React-native Callback get props of child navigator from parent

Question

I'm trying to access route.id of my Navigator from his parent container to be able to hide/show a depending on Navigators route.id

I believe child to parent communications would need a callback function, here is my attempt.

var Home = require('./Home');
var Navigation = require('./Navigation');

class Parent extends Component {
    render() {
        return (
            <View style={styles.appContainer}>
                <Navigation getNavigator={this.getNavigator.bind(this)}/>
                <Footer />
            </View>
        );
    }
}

And here is the child component

var _navigator; 

class Navigation extends Component {
    getNavigator(route){
        return this.refs.navigator.push(route);
    }
    render() {
        return (
            <Navigator
            style={styles.container}
            ref={(navigator) => { this.navigator = navigator; }}
            initialRoute={{
                    id: 'Home',
                    index:0,
                }}
            renderScene={this.navigatorRenderScene}
            configureScene={(route) => {
                if (route.sceneConfig) {
                    return route.sceneConfig;
                }
                return Navigator.SceneConfigs.PushFromRight;
            }}
            navigationBar={
                <NavigationBar
                style={{backgroundColor: '#f5f6f8'}}
                routeMapper={NavigationBarRouteMapper} />
            }
            />
        );
    }
    navigatorRenderScene(route, navigator) {
        _navigator = navigator;
        switch (route.id) {
            case 'Home':
                return (<Home navigator={navigator}  {...route.passProps}  title="Home" />);
                ...     
        }
    }
}

Answer 1

The problem you have is that you may not have two this in a method. You bind the this from the parent, so this within getNavigator is the this from the parent. In this this no refs.navigator exists, this is why it doesn't work.

The way you would normally implement is having the Navigator as the top most component and passing a navigateTo method in the props of the children (or the context). If you would still like to navigate from the parent in the child you have two options:

1. Add redux and have a route store, the parent dispatches an action, that the child fulfils in the componentDidReceiveProps method.
2. You may add methods to be called from a ref of your navigator component. This would be similar to the approach used in DrawerLayoutAndroid. You may have a look at the React Native implementation to see how that works, or you may look at the polyfill here.