React native opening modal wont pressed header back button

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, onRequestClose etc.

Reference: https://github.com/react-native-modal/react-native-modal#available-props / https://reactnative.dev/docs/modal

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>
  );
};