Navigation

Now, its time to make our application more actionable. Let's begin by transforming our SimpleButton into a Create Note button. When the user clicks on the Create Note button, it transitions them to another screen to create notes. To do this, we need our button to be able to accept a function via props from index.ios.js to activate the transition. We will add some custom text as well for extra flair:

 import React, { Text, TouchableOpacity, View } from 'react-native'; export default class SimpleButton extends React.Component { render () { return ( <TouchableOpacity onPress={this.props.onPress}> <View> <Text>{this.props.customText || 'Simple Button'}</Text> </View> </TouchableOpacity> ); } } SimpleButton.propTypes = { onPress: React.PropTypes.func.isRequired, ...

Get Getting Started with React Native now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.