OnbackPrees to return home always in react stack navigation-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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/