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 with minimal changes. We...