Navigate app from the application root - react-native

Question

I'm trying to accomplish receiving a push notificaiton and then navigating my app to a specific route depending on the push notification. Everything with the push notification is working correctly, I'm just having an issue of how to navigate my app from the application root, or maybe I need to take a different approach.
// root component that hooks up to redux and renders the app
class Root extends Component {
render() {
return (
<Provider store={store}>
<App />
</Provider>
)
}
}
// app component that just renders the navigated application
class App extends Component {
componentWillMount () {
this._notificationSubscription = Notifications.addListener(this.handleNotification)
}
handleNotification = notification => {
// handler for when a push notification is received
if (notification.origin === 'selected') {
// this is where I need to navigate ]
console.log(navigation.data)
}
}
render() {
return <NavigatedApp />
}
}
The handler for the push notification works and I have the data available. I need to perform something like this.props.navigation.navigate('PageDetail', { pageId }) but obviously the navigation property isn't available at this point because it's not inside of the AppNavigator component. I've tried hooking up to redux, however I still get the same issue where the navigation dispatch action isn't available until entereing inside the AppNavigator.
Any ideas how I could perform a navigate from the App component or maybe a different approach?

Answer 1

I don't have the whole picture of your scenario so this might not be a hundred percent fitting but that does look like a case of having to call navigate on a top level component?
[...]
import { NavigationActions } from 'react-navigation';
[...]
// app component that just renders the navigated application
class App extends Component {
componentWillMount () {
this._notificationSubscription = Notifications.addListener(this.handleNotification)
}
handleNotification = notification => {
// handler for when a push notification is received
if (notification.origin === 'selected') {
// this is where I need to navigate ]
console.log(navigation.data)
this.navigator && this.navigator.dispatch(
NavigationActions.navigate({ routeName: someRouteName })
);
}
}
render() {
return <NavigatedApp ref={nav => { this.navigator = nav; }} />
}
}