How to call navigate from a component rendered at top level

Question

According to the docs on react-navigation you can call navigate from the top level component using the following:

import { NavigationActions } from 'react-navigation';

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

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

However I'm trying to figure out how can this be done if the logic that does the dispatch is in another component that is rendered on the same level as the navigator? 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.

I can't figure out how to pass(?) the ref to the pushcontroller component so I can use it, currently the following isn't working. I get the console log telling me that the fcm.ACTION.OPEN_NOTIFICATION triggered but no dispatch occurs. I suppose it could be because the ref is created during a render and it isn't available to pass yet when the render occurs? But I'm also not sure you would do things this way in order to give another component access to a ref declared at the same level. Thanks for your help in advance!

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 => {
      console.log('Initial Notification', notif);
      if(notif.fcm.action === "fcm.ACTION.OPEN_NOTIFICATION"){
        console.log('fcm.ACTION.OPEN_NOTIFICATION triggered', notif);
        this.props.navigator && this.props.navigator.dispatch(NavigationActions.navigate({routename: 'Chat'}))
      }
    });
}

Answer 1

Answer was to move the navigate call to a function defined at render and pass it to the component.

import { NavigationActions } from 'react-navigation';

...
//class definition omitted for brevity
  render(){
    const callNavigate = (routeName, params) => {
      console.log('Params', params);
      this.navigator.dispatch({
        type: NavigationActions.NAVIGATE,
        routeName: routeName,
        params: params
      }) 
    }

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

The function is called within PushController like this:

  this.props.callNavigate('RouteName', params);