React Native while navigating via deeplink to specific route navigation.goBack is not working

user_12917651 0
Viewed 921

When app is in backgroud stack [ not killed ] then from details screen

navigation.goBack() is working but when app is kill then via deeplinking

 <a href="deeplinking://Details/123">Click on ut </a>

navigation.goBack() is not working giving error

The action "GO_BACK" was not handled by any navigation

Please help below is the code

const HomeScreen = ({ navigation }) => (
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    <Text>Home Screen</Text>
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('Details', { itemId: 40 });
      }}>
      <Text>Go to Details</Text>
    </TouchableOpacity>
  </View>
);

const DetailScreen = ({ route, navigation }) => {
  console.log(navigation);
  console.log(route);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Details Screen</Text>
      <Text>Item Id: {route.params.itemId}</Text>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>Go Back</Text>
      </TouchableOpacity>
    </View>
  );
};

const Stack = createStackNavigator();

const App = () => {
  const deepLinking = {
    prefixes: ['https://deeplinking.com/', 'deeplinking://'],
    config: {
      initialRouteName: 'Home',
      Home: 'Home',
      Details: {
        path: 'Details/:itemId',
        params: {
          itemId: null,
        },
      },
    },
  };

  return (
    <NavigationContainer linking={deepLinking}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

react-navigation react-native deep-linking
1 Answers

When you open the app from the deeplink, the first and only screen that is available is from the deeplink, of course the goBack isn't available.

I counter this problem with BackHandler. I mimic from Instagram, when you open a post from a link. Then when you go back, the Instagram will closed. So, I make my back button to kill the app.

  useEffect(() => {
    const backAction = () => {
      if (index == 0) {
        BackHandler.exitApp();
      } else {
        navigation.goBack();
      }
      return true;
    };

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

    return () => backHandler.remove();
  });

index tells me what is the index of my current screen in the navigation:

  const index = useNavigationState((state) => state.index);

Alternatively

I found this flow on most marketplace. They navigate user to the homepage first, then navigate to deeplink screen.

So, in my Homepage, I put function to check the deeplink.

  const deeplinkCheck = () => {
    const { params } = route;
    const screen = params?.screen;
    if (screen == undefined) {
      return;
    }
    switch (screen) {
      case "my-coupons":
        navigation.navigate(PAGE.MY_COUPONS);
        return;

      default:
        return;
    }
  };



useEffect(() => {
    deeplinkCheck();
  }, [route]);
user_147780690
Related