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, customText: React.PropTypes.string };
Now, we have extended our SimpleButton
component to be reusable...