React Navigation Android HW back button handling while React Native Modal is Opened

232 views Asked by At

i came across fairly common (or i thought so originally) issue that causes me headache. i have bare react-native project + react-navigation with sctructure:

<Tab.Navigator>
Tab.screen: StackNavigator1
Tab.screen: StackNavigator2
Tab.screen: StackNavigator3
Tab.screen: StackNavigator4
</Tab.Navigator>

My issue is, that when i open the modal in StackNavigator1 and leave it open when i move to another StackNavigator and press Hardware back button (on Android) it closes modal first (instead of doing StackActions.pop() ) and then when modal is closed it performs proper pop action for current stack. When i open more screens in StackNavigator1 the back button firstly closes all screens in that stack, then it performs desired actions in current navigator, which is really weird to me.

I am aware that once modal is opened it is standard behavior to close it first. I am also aware that RN-modal has onBackButtonPress (similar to onRequestClose in standar modal).

What i struggle with is:

in modal handleBackButton for RN modal function i can:

check if screen/modal is focused. If it is there is no problem in handling whatever i need, but once we switch to another StackNavigator i struggle to make it work.

I tried:

Get state of parent, search for StackNavigator, and get it's state, remove latest route and update it.

const getParentState = navigation.getParent().getState()

const stackNavigatorKey =
        parentState.history[parentState.history?.length - 1].key;

        const currentStackNavigator = parentState.routes.find(
          (route) => route.key === stackNavigatorKey,
        );
          const newRoutes = currentStackNavigator.state.routes.slice(0, -1);
          const newIndex = currentStackNavigator.state.index - 1;

But i struggle to target desired StackNavigator and update it with state, or simply .pop() the screen, while this function is located in Component in StackNavigator1. I tried CommonActions.Reset with multiple syntaxes, but unsuccessfully.

Anyone has a tip how to proceed?

Or maybe i am missing something really simple, this has to be really common issue, hasn't it?!

0

There are 0 answers