mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
147 lines • 4.05 kB
JavaScript
// LoadingModal.tsx
import React from 'react';
import { Modal, View, Text, ActivityIndicator, } from 'react-native';
/**
* 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.
*
* @component
* @param {LoadingModalOptions} props - Configuration options
*
* @returns {JSX.Element} Rendered loading modal
*
* @example
* ```tsx
* // 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} />
* );
* ```
*
* @example
* ```tsx
* // With custom styling
* const [loading, setLoading] = useState(false);
*
* return (
* <LoadingModal
* isVisible={loading}
* backgroundColor="rgba(0, 0, 0, 0.8)"
* displayColor="white"
* />
* );
* ```
*
* @example
* ```tsx
* // 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} />
* </>
* );
* ```
*
* @example
* ```tsx
* // Using custom UI via uiOverrides
* const config = {
* uiOverrides: {
* loadingModal: {
* component: MyCustomLoadingSpinner,
* injectedProps: {
* theme: 'dark',
* showProgressBar: true,
* },
* },
* },
* };
*
* return <MyMeetingComponent config={config} />;
* ```
*/
const LoadingModal = ({ isVisible, backgroundColor = 'rgba(0, 0, 0, 0.5)', displayColor = 'black', style, renderContent, renderContainer, }) => {
if (!isVisible) {
return null;
}
/**
* Styles for the modal overlay container.
*/
const modalContainerStyle = {
flex: 1,
justifyContent: 'center', // Vertically center content
alignItems: 'center', // Horizontally center content
backgroundColor,
};
/**
* Styles for the modal content box.
*/
const modalContentStyle = {
backgroundColor: 'rgba(255, 255, 255, 0.8)', // Semi-transparent white background
borderRadius: 10,
padding: 20,
alignItems: 'center',
justifyContent: 'center',
maxWidth: 200,
};
/**
* Styles for the loading text.
*/
const loadingTextStyle = {
color: displayColor,
marginTop: 10,
fontSize: 16,
textAlign: 'center',
};
const dimensions = { width: 200, height: 0 };
const defaultContent = (<>
<ActivityIndicator size="large" color={displayColor}/>
<Text style={loadingTextStyle}>Loading...</Text>
</>);
const content = renderContent
? renderContent({ defaultContent, dimensions })
: defaultContent;
const defaultContainer = (<Modal transparent animationType="fade" visible={isVisible} onRequestClose={() => { }}>
<View style={[modalContainerStyle, style]}>
<View style={modalContentStyle}>
{content}
</View>
</View>
</Modal>);
return renderContainer
? renderContainer({ defaultContainer, dimensions })
: defaultContainer;
};
export default LoadingModal;
//# sourceMappingURL=LoadingModal.js.map