Activity indicator doesn't contain header on React-Native - react-native

Question

I wanna set the activity indicator while calling the api so that the user can't do anything, the problem is when I call the api, the activity indicator doesn't include the header(using react-navigation), so while calling the api, the user is able to go back to previous screen, according to this, unexpected error is occurred.
Here are the code:
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
const Screen1 = () => {
const [isLoading, setLoading] = useState(false);
useEffect(() => {
const fn = async () => {
setLoading(true);
const apiRes = await fetch(...);
setLoading(false);
};
fn();
}, []);
const renderIndicator = () => {
return (
<View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<>
<View style={{ flex: 1, backgroundColor: 'orange' }}>
{...}
</View>
{isLoading && renderIndicator()}
</>
);
}
export default Screen1;
Here the main problem is <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}> doesn't contain the header(react-navigation) container. I wanna the activity Indicator contains the header bar.
I can hide the standard header container and use custom header. but the requirement is to use standard header, not custom header.

Answer 1

I have a very simple solution for your problem is to use "Modal" Just make a component called Loader or whatever you want to name it and paste this code in it
I have used react-native-indicators but you can use react-native's ActivityIndicator if you want
Loader.js
import React, {Component} from 'react';
import {
Text,
View,
Modal,
SafeAreaView,
Alert,
ActivityIndicator,
} from 'react-native';
import {SkypeIndicator} from 'react-native-indicators';
import styles from './styles';
import {Colors} from '../../Themes';
export default class Loader extends Component {
state = {
};
render() {
return (
<Modal
animationType="none"
transparent={true}
visible={this.props.visible}>
<SafeAreaView
style={{
...styles.container,
backgroundColor:
this.props.type === 'invisible'
? `rgba(255,255,255,${1})`
: `rgba(0,0,0,${this.props.transparancy})`,
...this.props.customStyle,
}}>
<SkypeIndicator size={50} color={Colors.primary} />
</SafeAreaView>
</Modal>
);
}
}
Styles.js
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Just import it wherever you wanna use it and use it this way
import Loader from '../../Components/Loader';
Put the <Loader/> before the last closing tag in the component
<Loader visible={this.props.signin.fetching} transparancy={0.7}/>