React Native: Using a callback with Navigator didFocus event
<p><strong>NOTE:</strong> I managed to solve the problem without using a didFocus event using EventEmitters and subscribables. Because that solution doesn't answer this particular question (how to use didFocus Events), I posted the <a href="https://stackoverflow.com/questions/29463592/react-native-pass-properties-on-navigator-pop/38946509#38946509">solution</a> on a different question.</p>

<p>I have a ListView with a <code>_refreshData</code> method which is called on <code>componentDidMount</code>. The method does a simple query to the realm database and the ListItems are refreshed accordingly:</p>

<p>In my <code>&lt;FooListScreen&gt;</code> Component</p>

<pre><code>componentDidMount(){
    this._refreshData();
}

_refreshData(){

    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(realm.objects('Foo'))
    })

}
</code></pre>

<p>I'd like to be able to call <code>_refreshData()</code> after saving a new instance of 'Foo" from a form component which I've pushed onto the Navigator stack. After the new Foo is saved, I'd do a <code>navigator.pop()</code> back to to the <code>&lt;FooListScreen&gt;</code> component and rerender the ListView somehow. After some reading, it seems like the best practice is to use a callback with the navigator's didFocus event, but I couldn't find a helpful code example. Any ideas?</p>

<p>My <code>&lt;MyNavigator&gt;</code> component:</p>

<pre><code>export class MyNavigator extends Component {
    constructor(props) {
        super(props);
        this._renderScene = this._renderScene.bind(this);
    }
    _renderScene(route, navigator) {
        var Component = route.component;
        return (
            &lt;Component {...route.props} navigator={navigator} route={route} /&gt;
        );
    }
  render() {
    const routes = [
        {component: FooListScreen, index: 0},
        {component: NewFooScreen, index: 1}
    ];

    return (
        &lt;Navigator
        initialRoute={routes[0]}
        initialRouteStack={routes}
        renderScene={this._renderScene}
        navigationBar={
              &lt;Navigator.NavigationBar
              routeMapper={{
         LeftButton: (route, navigator, index, navState) =&gt;
          { 
            if(route.index === 0){
                return null
            } else {
                return (
              &lt;TouchableHighlight onPress={() =&gt; navigator.pop()}&gt;
              &lt;Text&gt;Back&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
              ); 
            }
          },
         RightButton: (route, navigator, index, navState) =&gt;
           {
           if (route.index === 0){
            return (
              &lt;TouchableHighlight onPress={() =&gt; navigator.push({
                component: NewFooScreen
              })}&gt;
              &lt;Text&gt;New Foo!&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
            )
           } else {
            return null;
           } 
         },
         Title: (route, navigator, index, navState) =&gt;
           { return null; },
       }} /&gt;
    } /&gt; );
  }
}
</code></pre>

<p>In the <code>&lt;NewFooScreen&gt;</code> Component:</p>

<pre><code>    _onPressButton(){
        realm.write(()=&gt; {
          //Create a new Foo and save to realm db
            realm.create('Foo', {
                    name: this.state.fooName
            });

    //Somehow call _refreshData() in the FooList Component?? 
    //Through the Navigator? Using didFocus?

         this.props.navigator.pop();
    }
</code></pre>