Question: calling navigate on top level component

[sagivo]

assume we have this component.
how can i trigger navigate event from the top level of App component?
in this example lets say under someEvent function.
this event is for top level (like new push notification arrived) and not per each individual loaded screen so it has to happen in App class.

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here?
  }
  render() {
    return (
      <AppNavigator />
    );
  }
}

[ericvicenti]

The following should work. If it doesn't then it is probably a bug. If it does work, can you find a good place to add this to the documentation?

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
  }
  render() {
    return (
      <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
  }
}

[sagivo]

works, thanks. i'll try to add a doc for it!

[sagivo]

time to give back, PR - #122

[rtman]

Hey @ericvicenti @kelset @brentvatne

How can this be done if the logic that does the dispatch is in another component that is rendered after the navigator on the same level? In my case I create my navigators (A drawer with a stack navigator and other nested navigators) and then I render them using the <Drawer> . On the same level I'm loading my <PushController> component to handle push notifications. The pushcontroller actually gets the event that I want to dispatch on and I can't figure out how to adapt the solution in this thread for this scenario. Currently the following isn't working.

Drawer + PushController rendering

  render(){
      return(
        <View style={{flex: 1}}>
          <Drawer ref={nav => { this.navigator = nav; }}/>
          <PushController user={this.props.user} navigator={this.navigator}/>
        </View>
      )
  }

PushController snippet:

import { NavigationActions } from 'react-navigation';

async doFCM() {
    FCM.getInitialNotification().then(notif => {
      //triggers on app first opening, checks for if the notification was opened 
      console.log('Initial Notification', notif);
      if(notif.fcm.action === "fcm.ACTION.OPEN_NOTIFICATION"){
        this.props.navigator && this.props.navigator.dispatch(NavigationActions.navigate({routename: 'Chat'})) //{friend: chatInfo}
      }
    });
}

[brentvatne]

hey @rtman - if you believe there is a bug please create an issue and follow the template. otherwise try one of the support options from https://reactnavigation.org/ :)

[rtman]

@brentvatne Ok, I didn't think it was a bug, so I opted to ask on stack overflow. If anyone is inclined to help me out here it is: https://stackoverflow.com/questions/48719141/how-to-call-navigate-from-a-component-rendered-at-top-level

[tinashe96]

@ericvicenti
I've tried to implement something similar but getting an error. The above solutions do not work as my navigator is connected to redux. Any help would be much appreciated.
undefined is not an object (evaluating '_this.props.navigation.state.params.conversation

AppNavigation.js

...
export default StackNavigator({
  TabNav: { screen: TabStack }, //this is a tab nav and the rest are stack
  ItemDetails: { screen: ItemDetailsStack },
  Login: { screen: LoginStack },
  Conversation: { screen: ChatScreen },
}, { headerMode: 'none' }
);

ReduxNavigation.js

...
import AppNavigation from '../App';

function ReduxNavigation(props) {
  const { dispatch, nav } = props;
  const navigation = ReactNavigation.addNavigationHelpers({
    dispatch,
    state: nav
  });
  
  return <AppNavigation navigation={navigation} />;
}
const mapStateToProps = state => ({ nav: state.nav });
export default connect(mapStateToProps)(ReduxNavigation);

App.js

...

navigateToChatList() {
  this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName: 'Conversation' });
}
...

<Provider store={store}>
          <StatusBar barStyle='light-content' />
                <TouchableOpacity style={styles.notification} onPress={() => this._navigateToChatList()}>
                 ..
                </TouchableOpacity>
          <AppNavigation ref={nav => { this.navigator = nav; }} />
 </Provider>

[brentvatne]

https://reactnavigation.org/docs/navigating-without-navigation-prop.html