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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.