1

After the app receives a deep link and navigates to it, the route (screen) that was specified as a deep link becomes the home screen! After receiving the deep link, each time the app is updated (and automatically re-loaded on the Android emulator), the app navigates to that deep link route (screen). How can I remove this route from the navigation state?

Demonstration of the Scenario:

  1. adb shell am start -W -a android.intent.action.VIEW -d "casualjob://InvitedEmployee" com.casualjob
  2. App is triggered by the command above and navigates to the route InvitedEmployee
  3. User clicks on the Home screen link and navigates to it
  4. I update the app's code
  5. The app is automatically re-loaded to reflect the new code change
  6. The app starts in InvitedEmployee, rather than the Home screen. I expect it to navigate to the Home screen!?

Deep Linking Configuration:

const config = {
    screens: {
        SingleStack: {
            initialRouteName: "InitialScreen",
            screens: {
                EmployerActionVacancyScreen: "EmployerVacancyAction/:itemID/:opType/:itemStatus?",
                ListShiftEmployeeInviteScreen: "InvitedEmployee",
                InitialScreen: "*", 
            },
        },
    }
};

Stack Definition:

const SingleStack = () => {
    const MyStack = createNativeStackNavigator();
    return (
    <MyStack.Navigator screenOptions={defaultScreenOptions}>
        <MyStack.Screen name="InitialScreen" component={InitialScreen} options={{ title: "Home" }}/>
        <MyStack.Screen name="ListShiftEmployeeInviteScreen" component={ListShiftEmployeeInviteScreen} options={{ title: "Shifts List", }}/>
    </MyStack.Navigator>
    );
};

I tried executing different pieces of code that I added to a useEffect hook in the route (screen) that the deep link leads to (InvitedEmployee in the example above). None of them seems to work!?

Solution 1 - throws an error: The action 'RESET' with payload {"index":0,"routes":[{"name":"initialScreen"}]} was not handled by any navigator. This is a development-only warning and won't be shown in production.

const isFocused = useIsFocused();
useEffect( () => {
  async function _fetchData() {
   props.navigation.reset({
    index: 0,
    routes: [{ name: "initialScreen" }], // this is the home screen
   });
  }

  if (isFocused) { 
    _fetchData(); 
  }
}, [isFocused, ]); 

solution 2: this does NOT seem to have any effect. As soon as the App is re-laoded after the code update, the deep-link's route appears back in the navigation state.

const isFocused = useIsFocused();
useEffect( () => {
  async function _fetchData() {
   props.navigation.dispatch(state => {
    if (!state?.routes || state?.routes < 2) { 
        return; 
    }
    const routes = state.routes.filter( (item, index) => {
        if (item.name === "ListShiftEmployeeInviteScreen") { // This is the route (screen) that the deep link leads to 
            return false;
        }
        return true;
    });

    if (routes?.length > 0) {
        return CommonActions.reset({
            ...state,
            routes,
            index: routes.length - 1,
        });
    }
    return;
  }); 
  }

  if (isFocused) { 
    _fetchData(); 
  }
}, [isFocused, ]); 
Bilal Abdeen
  • 1,627
  • 1
  • 19
  • 41
  • Is this issue still happing to u even after declaring an `initialRouteName`? because if you already have `initialRouteName` on your stack this wouldn't happen – Hamed Feb 27 '23 at 15:40
  • @Hamed Thank you very much for your comment. Adding initialRouteName fixed the problem for many scenarios. However, the problem still exists for the specific scenario that I tried to describe in my question. – Bilal Abdeen Feb 27 '23 at 21:15
  • yeah that's what I wanted to say,`initialRouteName` will fix the problem and that's the only way so far I found to fix the problem, even the docs not mentioning that problem already (( – Hamed Feb 28 '23 at 09:17

0 Answers0