OnbackPrees to return home always in react stack navigation

Question

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;

Answer 1

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);
    };
  }, []);

Answer 2

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/

Answer 3

please try this,

import { BackHandler } from 'react-native';

<!- -->

  useEffect(() => {
    const backAction = () => {
      navigation.navigate('intialRouteName');
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

    return () => backHandler.remove();
  }, []);