Navigator vs NavigatorIOS React Native application

Question

I have a React Native app working using NavigatorIOS API, and am trying to translate the same code to use Navigator API. My trouble is when creating a NavigatorIOS component, the navigator is implicitly passed, whereas in Navigator, you must call renderScene and make your own navigator prop. I'm not sure what navigator to pass (do i create one or what?).

The structure of the app is that there are 2 tabs: Book and Search, and BookList is another component which lists all the book entries, so that when you press one of them, it brings you to BookDetail. Right now, pressing a book brings me to the same page (BookList). I think this is because there's only one page in the route, but I'm not sure how to initialize the route and navigator.

This is where I call the navigator to push a scene onto the route in BookList:

showBookDetail(book) {
   this.props.navigator.push({
       title: book.volumeInfo.title,
       component: BookDetail,
       passProps: {book}
   });
}

This is the NavigatorIOS version:

class Books extends React.Component {
render() {
    return (
    <NavigatorIOS
            style={styles.container}
            initialRoute={{
        title: 'Featured Books',
        component: BookList
        }}/>
    );
}

This is my Navigator version that is not working:

class Books extends React.Component {
render() {
    return (
        <Navigator
            style={styles.container}
            initialRoute={{ title: 'Featured Books', index: 0}}
            renderScene={(route, navigator) =>
                <BookList title={route.title} navigator={navigator}/>
            }
        />
    );
}

Answer 1

I see the body of your renderScene function returns the <BookList> component, so it's not really surprising that when it is called you just see another BookList. Try something like this instead:

renderScene={(route, navigator) =>
    <route.component title={route.title} navigator={navigator}/>     
}

As long as you have imported or required BookDetail in the source file for Books, renderScene will be passed the route object you specified in navigator.push, which has the component property BookDetail

Note that you will also have to change your initialRoute to have a component property set to BookList if you take this approach