Loading component for React Native

LoadingModal.js

import React from 'react';
import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';

function LoadingModal({ message }) {
    return (
        <View style={styles.loading}>
            <ActivityIndicator size='large' />
            <Text style={{ color: 'white', padding: 10 }}>{message}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
  loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
    opacity: 0.5,
    zIndex: 3
  }
})

export default LoadingModal;

How to use:

1. Import the file import LoadingModal from '../YOUR_PATH/LoadingModal';
2. Create a useState hook to show/hide the loader const [loading, setLoading] = useState(false);
3. Display this piece of code anywhere you want the loading overlay to show:
   { loading && <LoadingModal message={'Please Wait...'} /> }

That's it!