Navigate to Screen After Opening a Notification

React Native Navigate to Particular Screen When Notification is Clicked

Assuming you are using react-navigation, the NavigationContainer accepts a normal ref prop:

<NavigationContainer ref={navigationRef}>
    <CustomNavigator>   
</NavigationContainer>

see NavigationContainer docs

How to navigate to a screen when opening push notification in React Native?

To dispatch a navigation action you have to use a root navigation object from you props like this =>

const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'HOME_SCREEN' })]                });

this.props.navigation.dispatch(resetAction);

But I found it more convenient to create a common file called NavigationService.js to manage your navigation actions, like this one

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

function getCurrentRoute() {
  let route = _navigator.state.nav
  while (route.routes) {
    route = route.routes[route.index]
  }
  return route
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
  getCurrentRoute
};

Update your <AppContainer/> to pass the navigation refs to NavigationSerive file

<AppContainer  ref={ref =>  NavigationService.setTopLevelNavigator(ref) }

And then anywhere in your app just import and call whatever you need

import NavigationService from './NavigationService';

NavigationService.navigate(routeName, { ...yourParams })

Happy Coding

Navigate when user opens notification

what you want to do is similar to deep linking,lock at this
,there are some helpful answers.

How to navigate screen on notification open in React Native with One Signal?

To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.

To use Deep Linking you attach url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking functionality.

From One Signal Documentation

url string The URL to open in the browser when a user clicks on the
notification. Example: http://www.google.com

Note: iOS needs https or updated NSAppTransportSecurity in plist

---

From React Navigation Documentation

Deep Linking

In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the
getting started guide. In this example, we want a URI like
mychat://chat/Taylor to open our app and link straight into Taylor's
chat page.

---

Related Topics