fix(boilerplate): fix deep link not working with navigation persist

[vanenshi]

Please verify the following:

• yarn test jest tests pass with new tests, if relevant
• yarn lint eslint checks pass with new code, if relevant
• yarn format:check prettier checks pass with new code, if relevant
• README.md (or relevant documentation) has been updated with your changes

Describe your PR

On the dev env, if you try to start the app from a deep link because the navigation persists, it will get ignored by the navigation

[frankcalise]

@vanenshi Thanks for the contribution! Can you supply steps to reproduce / test this change for us so we can confirm the fix?

[vanenshi]

@vanenshi Thanks for the contribution! Can you supply steps to reproduce / test this change for us so we can confirm the fix?

Hi @frankcalise
Sure, to test the PR, you need to start the application from a deep link

1. build and run the boilerplate
2. enable the navigation to persist
3. kill the app, and click on a deep link in the simulator (for example helloworld:://community)

Expected Behavior

open the app and go to the community screen

Actual behavior

app stays on the persisted navigation status (last page that was open)

Note

I picked up the fix from the react-navigation website, here is their example code, pay attention to the const initialUrl = await Linking.getInitialURL(); line
https://reactnavigation.org/docs/state-persistence/#usage

import * as React from 'react';
import { Linking, Platform } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';

const PERSISTENCE_KEY = 'NAVIGATION_STATE_V1';

export default function App() {
  const [isReady, setIsReady] = React.useState(Platform.OS === 'web'); // Don't persist state on web since it's based on URL
  const [initialState, setInitialState] = React.useState();

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        const initialUrl = await Linking.getInitialURL();

        if (initialUrl == null) {
          // Only restore state if there's no deep link
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          const state = savedStateString
            ? JSON.parse(savedStateString)
            : undefined;

          if (state !== undefined) {
            setInitialState(state);
          }
        }
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  if (!isReady) {
    return null;
  }

  return (
    <NavigationContainer
      initialState={initialState}
      onStateChange={(state) =>
        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
      }
    >
      {/* ... */}
    </NavigationContainer>
  );
}

[mustafahsz]

any update on this? we have the same problem

[frankcalise]

@mustafahsz later this week probably, but feel free to just incorporate the code into your project

[frankcalise]

Thanks for the contribution and the provided documentation, left one question for you

[frankcalise]

Nice work!

[infinitered-circleci]

🎉 This PR is included in version 9.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀