CODEWITHSUNDEEP
react-nativereact-navigation
B. Mohammad
B. Mohammad

Reputation: 2464

How to access this.props.navigation in App.js

I want to pass navigation props to a firebase notificationListener in App.js but this.props.navigation is undefined which I can understand as App.js is the root where navigation is initiated. If there is any workaround it would be great. Thanks!

class App extends Component { 

componentDidMount() {
    notificationListener.initNotificationListener(this.props.navigation);
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={null}>
          <Navigation />
        </PersistGate>
      </Provider>
    );
  }
}

export default App

Upvotes: 1

Views: 1886

Answers (1)

German Molina
German Molina

Reputation: 11

One way you can workaround not having access to props.navigation in app.js when opening a notification is by setting up a value in your async storage when the app has been opened from a notification

//IN APP.JS
const notificationOpen = await 
    firebase.notifications().getInitialNotification();
    if (notificationOpen) {
      this._accessFromNotification();
    }

_accessFromNotification = async () => {
   console.log("Setting Access from Notification")
   await AsyncStorage.setItem('accessFromNot', true);}

After that you can call this variable from your async storage inside the componentDidMount of the first component from your navigation Stack and from there navigate to another component if the variable's value==true.

//IN THE FIRST COMPONENT THAT HAS ACCESS TO PROPS NAVIGATION 
componentDidMount() {
this._verifyOpenFromNot()
}

_verifyOpenFromNot = async()=>{
   const acc=  await AsyncStorage.getItem('accessFromNot');


    if (acc){

        this.props.navigation.navigate('NotificationViewer');
        this._setAccessFalse();
      }


}

Finally you should update the async storage setting up the accessFromNot variable to false, to avoid automatic navigation the next time you open the app.

_setEntroDesdeNotFalse = async () => {
await AsyncStorage.setItem('accessFromNot', 'false');}

Upvotes: 1

Related Questions