MediaSFU React Native (Expo)
    Preparing search index...

    Variable LoadingModalConst

    LoadingModal: React.FC<LoadingModalOptions> = ...

    LoadingModal - Fullscreen loading indicator overlay

    LoadingModal is a React Native component that displays a centered loading spinner with "Loading..." text in a fullscreen modal overlay. Used to indicate ongoing operations like joining meetings, processing media, or waiting for server responses.

    Key Features:

    • Fullscreen modal overlay
    • Centered loading spinner
    • "Loading..." text label
    • Customizable background and spinner colors
    • Transparent overlay support
    • Blocks interaction while visible
    • Simple visibility toggle

    UI Customization: This component can be replaced via uiOverrides.loadingModal to provide a completely custom loading indicator.

    Configuration options

    Rendered loading modal

    // Basic usage with default styling
    import React, { useState } from 'react';
    import { LoadingModal } from 'mediasfu-reactnative-expo';

    const [isLoading, setIsLoading] = useState(true);

    return (
      <LoadingModal isVisible={isLoading} />
    );

    // With custom styling
    const [loading, setLoading] = useState(false);

    return (
      <LoadingModal
        isVisible={loading}
        backgroundColor="rgba(0, 0, 0, 0.8)"
        displayColor="white"
      />
    );

    // During async operation
    const handleJoinMeeting = async () => {
      setLoading(true);
      try {
        await joinRoom({ roomName, userName });
      } finally {
        setLoading(false);
      }
    };

    return (
      <>
        <LoadingModal isVisible={loading} displayColor="#007bff" />
        <Button title="Join" onPress={handleJoinMeeting} />
      </>
    );

    // Using custom UI via uiOverrides
    const config = {
      uiOverrides: {
        loadingModal: {
          component: MyCustomLoadingSpinner,
          injectedProps: {
            theme: 'dark',
            showProgressBar: true,
          },
        },
      },
    };

    return <MyMeetingComponent config={config} />;

    Settings

    Member Visibility