How to link 'from outside' into Navigator (for example from a global footer)

Question

With React Navigation, is there a way to link from outside to a specific path/screen inside a Navigator?

For example to implement a global footer, like this:

<Provider store={store}>
  <View>
     <AppNavigator />
     <MyFooter /> // Link from here to a path/screen inside AppNavigator
  </View>
</Provider>

Answer 1

I think refs might work here. If you want to use Navigator from the same level you declare it you can use react's refs and pass props to MyFooter. Look at example in official documentation.

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

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