I am do do navigation in react native where all the back arrow or back press return to initial route. On last on option is to list to onBackPreessed event and passs call to init route which is home. I am hoping their will be props for allowing the Screen to return to init Screen in stack navigations
What is happening
On home: go details then go A back arrow press in A, it return back to details
Need actions
On home: go details then go A back arrow press in A return back to home instead of details
The code I try
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to A"
onPress={() => navigation.navigate('A')}
/>
</View>
);
}
function A({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>AAAAAAAAAAAAAAAAAAA Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" detachInactiveScreens={true}
detachPreviousScreen={true}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Group screenOptions={{ presentation: 'modal' }}>
<Stack.Screen name="Details" component={DetailsScreen}
options={{ presentation: 'transparentModal' }}
/>
<Stack.Screen name="A" component={A} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
u can do it by passing "key" to "navigate" more info (source): https://reactnavigation.org/docs/navigation-prop/
https://reactnavigation.org/docs/navigation-prop/#going-back-from-a-specific-screen
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_A });
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_B });
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_C });
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_D });
navigation.navigate({ key: SCREEN_KEY_A }); // will go to screen A FROM screen D
I think you can use BackHandler on Screen A.
So you should listen for BackHandler in Screen A and the navigate to Home screen when it's triggered.
Your Screen A should look like this:
import { BackHandler } from 'react-native';
function handleBackPressHandler() {
navigation.navigate('HomeScreen');
return true;
}
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', handleBackPressHandler);
return () => {
BackHandler.removeEventListener('hardwareBackPress', handleBackPressHandler);
};
}, []);
The default behaviour of React Navigation is this only, it takes you to the last visited stack on pressing back but if you want to update it, you can you this line of code:
useFocusEffect( //imported from @react-navigation/native-stack
React.useCallback(() => {
const onBackPress = () => {
navigation.navigate('InitialRouteName');
};
BackHandler.addEventListener('hardwareBackPress', onBackPress);
return () =>
BackHandler.removeEventListener('hardwareBackPress', onBackPress);
}, [])
);
For reference, you can check this out - https://reactnavigation.org/docs/custom-android-back-button-handling/