CustomActivityIndicator.js

import React from 'react'
import { StyleSheet, View, Modal, Text } from 'react-native'
import { Colors, ActivityIndicator } from "react-native-paper";

const CustomActivityIndicator = (props) => {
    return (
        <Modal transparent={true} animationType="none" visible={props.visible}>
            <View
                style={{ ...styles.activityIndicator, ...props.style }}>
                <ActivityIndicator 
                    style={styles.loading} 
                    animating={props.visible} 
                    color={Colors.white}
                    size='large'
                />
                <Text style={styles.text}>
                    {props.text}
                </Text>
            </View>
        </Modal>
    )
}

export default CustomActivityIndicator

const styles = StyleSheet.create({
    loading: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center'
      }, 
    activityIndicator: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: `rgba(0,0,0,${0.1})`
    }, 
    text: {
        alignContent: "center", 
        marginTop: 100,
        color: 'white'
    }
})