Modal View in React Native

Question

I am new to react native, I am trying to present a view modally. I have a table view and when one of the rows is clicked I want the view to show up modally.

This is how I am implementing the transition right now :

renderbooks(books) {
     return (
          <TouchableHighlight onPress={() => this.showbooksDetail(books)}  underlayColor='#dddddd'>
              <View>
                  <View style={styles.container}>

                      <View style={styles.rightContainer}>
                          <Text style={styles.title}>{books.title}</Text>



                          </View>
                  </View>
                  <View style={styles.separator} />
              </View>
          </TouchableHighlight>
     );
 }
 showbooksDetail(books){
   this.props.navigator.push({
     title:books.title,
     component: ProductView,
     passProps:{books}
   });
 }

How can I modify this so that the view can be presented modally?

FYI: I have already looked at multiple questions and sample projects such as these:

• How do I create a native looking modal view segue with react-native?
• http://facebook.github.io/react-native/docs/modal.html#content
• https://github.com/aaronksaunders/React-Modal-Nav-Example

Answer 1

Check out the built-in Modal. It's implemented on iOS, Android implementation should come in one of the next releases of React Native.

The documentation contains an example on how to use it.

In your case it would be something like:

renderBooks(books) {
   ...
   <Modal
      animated={true}
      transparent={true}
      visible={!!this.state.selectedBook}>
      <Text>{this.state.selectedBook.title}</Text>
   </Modal>

   ...
}

showDetail(book) {
    this.setState({
        selectedBook: book,
    });
}