Navigator vs NavigatorIOS React Native App

I have a React Native app using the NavigatorIOS API and I am trying to translate the same code to use the Navigator API. My problem is creating a NavigatorIOS component, the navigator is implicitly passed, whereas in the Navigator, you have to call renderScene and create your own navigator. I don't know which navigator to go through (can I create something or what?).

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

This is where I find a navigator to direct the scene to the route in the 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 version of Navigator 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}/>
            }
        />
    );
}