React: Building Modern Web Applications

Connecting the final pieces

Now that we have CameraScreen and ImageScreen, we need to be able to navigate to them via the NoteScreen. We are going to add a button that will change the state based on the imagePath of the note. If it does not exist, then we want the user to transition to the CameraScreen and the ImageScreen when it does. Visually we are going to place the button in-line with the title input:

import SimpleButton = from './SimpleButton'; export default class NoteScreen extends React.Component { ... blurInputs () { this.refs.body.blur(); this.refs.title.blur(); } render () { var pictureButton = null; if (this.props.showCameraButton) { pictureButton = (this.state.note.imagePath) ? ( <SimpleButton onPress={() => { this.blurInputs(); this.props.navigator.push({ ...