Navigate to an specific screen after tapping a notification when the app is killed

Question

My question is simple but I'm not being able to find any documentation about this.

I have a notification that the app sends to the user periodically if the user is not loggeIn, when the user taps on the notification it opens the app and opens the "Login" screen, the problem is that if the app is killed the app opens but it doesn't navigate to the "Login" screen, it stays at the home screen.

Any ideas how to do this?

Thank you very much in advance

Right now I'm using RootNavigation.navigate('Login') when the user taps on the notification.

Answer 1

Your problem is that navigation not loaded yet in moment you use Root Navigation.navigate(). You can make it like this

    const Deferred = () => {
    let d = {};
    d.promise = new Promise(function(resolve, reject) {
        d.resolve = resolve;
        d.reject = reject;
    });
    return d;
};
const navigationDeferred = new Deferred()

---

<NavigationContainer ref={navigationRef} onReady={()=>{navigationDeferred.resolve()}} >

---

 messaging()
    .getInitialNotification()
    .then(remoteMessage => {
        if (remoteMessage) {
            console.log(
                'Notification caused app to open from quit state:',
                remoteMessage.notification,
            );
            navigationDeferred.promise.then(()=>{
               NavHelper.navigate("YourScreen");;
            })
        }
    });
   

NavHelper it helper from documentation https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

Not sure if I'm too late to answer. Sir @KetchUp answer is valid and just to provide more options please see below...

You can still use the default navigation. You just need to do a little modification to the deferredPromise trick that was mentioned on the previous answer. Instead of using the RootNavigation you can just use the "centralized promise" (I call it) like the function below and add it to the page where you're planning to trigger the navigation. Example: HomePage add this...

// from sir KetchUp's answer
// add this outside the class component if you're using class-based code
const Deferred = () => {
    let d = {};
    d.promise = new Promise(function(resolve, reject) {
        d.resolve = resolve;
        d.reject = reject;
    });
    return d;
};
const navigationDeferred = new Deferred()

Then instead of creating the RootNavigation or adding the resolve() in the NavigationContainer, just place the navigationDeferred.resolve() inside the componentDidMount() of the page where you want to trigger the navigation. In my example it should look like this:

// HomePage.js

export default class HomePage extends Component {
 componentDidMount() {
// this will make sure that the page is mounted and
// navigation is ready to be used.
   navigationDeferred.resolve(); 
 }

 function showAnotherPage() {
   navigationDeferred.promise.then(()=>{
     // call the navigation.navigate here....
   });
 }
}

// ... add the deferredPromise here .../

To further explain, it's not sending you to the correct page because the navigation isn't available yet when you tap the notification. By doing this little trick, the module will wait for the page to be mounted before it navigates to the page you want to display upon Notification Click.

I hope this one helps and happy coding!