Use Navigator in React Native + Redux

Question

I'm new to React Native. I have a React Native app using the Redux framework. I'm using the Navigator component to handle navigation but this.props.navigator is undefined in component. How can I pass "this.props.navigator" to component? I'm not able to find any good examples of how to do it correctly so I'm looking for some help and clarification.

index.anroid.js

...
import App from './app/app';

AppRegistry.registerComponent('RnDemo', () => App);

app.js

...    
import App from './containers/app';

const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);
const store = createStoreWithMiddleware(rootReducer);

const rootApp = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  )
}

export default rootApp;

containers/app.js

...
class App extends Component {

  renderScene(route, navigator) {
    let Component = route.component
    return (
      <Component navigator={navigator} route={route} />
    )
  }

  configureScene(route) {
    if (route.name && route.name === 'Home') {
      return Navigator.SceneConfigs.FadeAndroid
    } else {
      return Navigator.SceneConfigs.FloatFromBottomAndroid
    }
  }

  _selectPage(page) {
    if(page === 'detail') {
      this.props.navigator.push({
        component: Detail,
        name: 'Detail'
      }) // **this.props.navigator.push is not a function**
    }
  }
  render() {
    const { navigator } = this.props;
    console.log(navigator);  // **>>>>>> Undefined**
    return (
      <View style={styles.container}>
        <View style={styles.menu}>
          <TouchableOpacity onPress={() => this._selectPage('detail')}><View style={styles.menuItem}><Text>Detail</Text></View></TouchableOpacity>
        </View>
        <View style={styles.content}>
          <Navigator
            ref='navigator'
            style={styles.navigator}
            configureScene={this.configureScene}
            renderScene={this.renderScene}
            initialRoute={{
              component: Home,
              name: 'Main'
            }}
          />
        </View>
      </View>
    )
  }
}

Answer 1

renderScene(route, navigator) {
    let Component = route.component
    return (
        // <Component navigator={navigator} route={route} />
        <Component {...this.props} navigator={navigator} route={route} />
    )
}

Try it