React Native - создайте оверлейный загрузчик, чтобы показать, когда что-то загружается в фоновом режиме

Question

Я хочу показывать загрузчик всякий раз, когда я делаю HTTP-вызов или когда я делаю что-то важное.

Я создал компонент загрузчика

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

export default class LoaderComponent extends Component {
    render() {
        return (
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="gray" />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        justifyContent: "center",
        height: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        zIndex: 10,
        backgroundColor: 'rgba(52, 52, 52, 0.8)'
    },
    horizontal: {
        flexDirection: "row",
        justifyContent: "space-around",
        padding: 10
    }
});

и в приложении. js Я включил это следующим образом.

<React.Fragment>
    <LoaderComponent></LoaderComponent>
    <React.Fragment>
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen options={{ headerShown: false, title: "Login" }} name="LoginStack" component={LoginStack} />
                <Stack.Screen options={{ headerShown: false, title: "Home" }} name="AppDrawer" component={AppDrawerComponent} />
            </Stack.Navigator>
        </NavigationContainer>
    </React.Fragment>
</React.Fragment>

Я хочу, чтобы загрузчик был виден на моих экранах. Но с некоторой непрозрачностью и плохим контролем в App. js. Но проблема в том, чтобы показать его поверх моего экрана. Какое хакерское моделирование я должен сделать здесь. Помощь !!!!!