MediaSFU React Native
    Preparing search index...

    Variable AlertComponentConst

    AlertComponent: React.FC<AlertComponentOptions> = ...

    AlertComponent presents lightweight meeting alerts such as success or error notifications. It supports timed dismissal, manual close taps, and override hooks for tailoring the rendered modal or its content.

    • Auto-dismiss after configurable duration (default 4 seconds)
    • Success (green) or danger (red) theme styles
    • Tap-to-dismiss functionality
    • Centered modal overlay with fade animation
    • Render overrides for content and container
    • Automatically hides after duration milliseconds
    • Calls onHide callback on dismiss
    • Dismissable by tapping the modal backdrop
    • Modal includes transparent backdrop
    • Pressable area for dismissal
    • Clear visual feedback for success/error states
    // Basic success alert
    <AlertComponent
      visible={showSuccess}
      message="Recording started successfully!"
      type="success"
      duration={3000}
      onHide={() => setShowSuccess(false)}
    />

    // Danger alert with custom text color
    <AlertComponent
      visible={showError}
      message="Failed to connect to server"
      type="danger"
      textColor="#fff"
      duration={5000}
      onHide={() => setShowError(false)}
    />

    // With custom content and icon
    <AlertComponent
      visible={showAlert}
      message="Participant joined"
      type="success"
      renderContent={({ defaultContent }) => (
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Icon name="check-circle" size={20} color="green" />
          {defaultContent}
        </View>
      )}
      onHide={() => setShowAlert(false)}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesBehaviorAccessibility