Const// Basic usage - Display success alert with auto-dismiss
import React, { useState } from 'react';
import { AlertComponent } from 'mediasfu-reactnative-expo';
function App() {
const [alertVisible, setAlertVisible] = useState(false);
const showSuccessAlert = () => {
setAlertVisible(true);
};
return (
<>
<Button title="Show Success" onPress={showSuccessAlert} />
<AlertComponent
visible={alertVisible}
message="Operation completed successfully!"
type="success"
duration={3000}
onHide={() => setAlertVisible(false)}
textColor="white"
/>
</>
);
}
// Danger alert with custom duration
<AlertComponent
visible={showError}
message="Failed to connect to server. Please try again."
type="danger"
duration={5000}
onHide={() => setShowError(false)}
textColor="white"
/>
// Using uiOverrides for complete alert replacement
import { MyCustomAlert } from './MyCustomAlert';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
alertComponent: {
component: MyCustomAlert,
injectedProps: {
position: 'top',
animation: 'slide',
},
},
},
};
// MyCustomAlert.tsx
export const MyCustomAlert = (props: AlertComponentOptions & { position: string; animation: string }) => {
return (
<Modal visible={props.visible} transparent>
<View style={{ position: 'absolute', [props.position]: 20 }}>
<Text style={{ color: props.type === 'success' ? 'green' : 'red' }}>
{props.message}
</Text>
</View>
</Modal>
);
};
AlertComponent - Toast-style alert notification with auto-dismiss
AlertComponent is a simple yet effective React Native modal for displaying temporary alert messages. It supports success/danger styling, auto-dismiss with configurable duration, and manual dismissal by tapping the alert.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.alertComponentto provide a completely custom alert implementation.