React native opening modal wont pressed header back button - react-native

Question

I make loading component with modal base and Loading component waiting for api calls, when there is no answer from api call I want to users press to header back button and they can continue other screen problem is modal is opening and can't pressed header back button, I tried margin or padding to modal but rn modal locking to all screen, I use react native navigation and custom header below my screen picture while openin loading component
Red component is my opening loading component and I want to pressed header left side back button and back to previous screen, rn modal locking to all screen and not pressed that while loading component is open how can I press the back button
My Loading component is;
import React from 'react';
import {View} from 'react-native';
import Modal from 'react-native-modal';
import {SkypeIndicator} from 'react-native-indicators';
export const Loading = (props) => {
return (
<Modal
animationType="none"
transparent={true}
visible={visible}
supportedOrientations={['portrait']}
onRequestClose={() => {}}>
<View
style={{
flex: 1,
backgroundColor: 'yellow',
marginTop: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: 70,
height: 70,
backgroundColor: 'blue',
borderRadius: 70,
justifyContent: 'center',
alignItems: 'center',
}}>
<SkypeIndicator color={colors[indicatorColor]} />
</View>
</View>
</Modal>
);
};

Answer 1

Modal will block the screen, you have to cancel the modal first before user can interact on screen. For that you may need to add a cancel/close button on the modal.
Other options are
OnBackDropPressed
OnBackButtonPressed
etc.
Reference: https://github.com/react-native-modal/react-native-modal#available-props

Answer 2

I don't know it make sense or not to reply now. But I got the working idea from your question(Loading Comp) itself. Simply target the onRequestClose prop of Modal like below:
import React from "react";
import { View } from "react-native";
import Modal from "react-native-modal";
import { SkypeIndicator } from "react-native-indicators";
//import useNavigation hook
import { useNavigation } from "#react-navigation/native";
export const Loading = (props) => {
//create an instance of the hook
const navigation = useNavigation();
const handleOnRequest = () => {
//Now here you can do whatever you like
navigation.goBack(); //return to the previous screen
//OR you may wish to just close the modal on backPress
//For that you may pass onBackPress prop on your Loading component
//and reverse the modal visibility like below
//<Loading onBackPress={()=>setVisible(false)}
props.onBackPress && props.onBackPress();
};
return (
<Modal
animationType="none"
transparent={true}
visible={visible}
supportedOrientations={["portrait"]}
onRequestClose={handleOnRequest}
>
<View
style={{
flex: 1,
backgroundColor: "yellow",
marginTop: 150,
alignItems: "center",
justifyContent: "center",
}}
>
<View
style={{
width: 70,
height: 70,
backgroundColor: "blue",
borderRadius: 70,
justifyContent: "center",
alignItems: "center",
}}
>
<SkypeIndicator color={colors[indicatorColor]} />
</View>
</View>
</Modal>
);
};