Implementing navigation in a mobile application helps us control how our users interact with and experience our apps. It lets us assign context to situations that would otherwise not have any--for example, in Tasks, it will not make sense to show a user an edit view for a task that they haven't selected; only showing this to the user when they select a task to edit builds situational context and awareness.

React Native's Navigator component handles the transitions between different views in your application. Glancing at the documentation, you may note that there's both a Navigator and NavigatorIOS component. Navigator is available on iOS and Android and implemented with JavaScript. On the other hand, NavigatorIOS is specifically available for iOS and is a wrapper around iOS's native UINavigationController, animating it and behaving the way you would expect from any iOS application.

Later in this chapter, we will take a closer look at the Navigator.

A key feature in Tasks is the ability to set a reminder for when a task is due. Ideally, our users can set a day as well as a time for when a task should be completed so that they can be reminded of the due date. To accomplish this, we'll use an iOS component named DatePickerIOS. This is a component that renders a date and time selector that we can utilize in our application.

Listed here are the two props that we will be using with our DatePickerIOS component. Other props exist in the React Native documentation in case you are interested:

In our preceding example, we don't need to specify the height of the DatePickerIOS component when expanded. However, there may be scenarios in which you may need to manually get the dimensions of a component.

To calculate a component's height, we can utilize its onLayout property to fire a callback and then use that callback to save properties passed to the callback. The onLayout property is an event that is invoked on mount and layout changes, giving the event object a nativeEvent object that nests the component's layout properties. Using DatePickerIOS as an example, you can pass a callback to its onLayout prop like this:

<DatePickerIOS 
  date={ this.state.date } 
  onDateChange={ (date) => this._onDateChange(date) } 
  onLayout={ (event) => this._getComponentDimensions(event) } 
  style={ styles.datePicker }  
/> 

The event from onLayout gives access to the following property:

event: { 
  nativeEvent: { 
    layout: { 
      x: //some number 
      y: //some number...

Let's build a clear due date button for the EditTask component and only selectively enable it if a due date has been selected for the to-do item. The Button component in React Native should help us render one quickly.

The Button component accepts a couple of props; the following four will be used in our application:

A sample Button component can be rendered like this:

<Button 
  color={ 'blue' } 
  disabled={ this.state.buttonDisabled } 
  onPress={ () => alert('Submit button pressed') } 
  title={ 'Submit' }  
/> 

Modify EditTask so that it has the following features:

Switch is a component that renders a Boolean input and allows the user to toggle back and forth.

With Switch, these are the props that we will use:

A simple Switch component can look like this:

<Switch 
  onValueChange={ (value) =? this.setState({ toggled: value })} 
  value={ this.state.toggled } 
/> 

As stated earlier, Switch has two props that are required: its value and a callback to change its value when toggled.

Using this knowledge, let's make changes to the TasksList component so that it passes the completed, due, formattedDate, and text properties of each row to the EditTask component for use.

Then, make additions to the EditTask component so that it:

In this section, we will create a button in the upper-right corner of the navigation bar that is labeled as Save. When it is tapped on, the following two things must happen:

Rendering the Save button is easy with React Native. The object that gets pushed to NavigatorIOS needs to receive the following two key/value pairs:

At face value, this looks simple. However, we can't pass any information to the onRightButtonPress method of NavigatorIOS from a rendered child. Instead, we have to keep a copy of the changes we make inside our TasksList component as well, and update them as the...

Finally, we want to edit each row rendered by our ListView to display the due date, if one exists.

To do this, we will have to write some conditional logic to show the formatted date, if one is assigned to the to-do item we are rendering. This is also a good time to create a custom styles folder for this component as we will be needing it.

Spend some time creating your version of this feature. My solution is as follows:

// Tasks/app/components/TasksListCell/index.js 

... 
import styles from './styles'; 

You might notice from the above import statement that TasksListCell now imports its StyleSheet.

Add formattedDate to propTypes as an optional string:

export default class TasksListCell extends Component { 
  static propTypes = { 
    ... 
    formattedDate: PropTypes.string, 
  } 

... 
  render () { 
    ... 
    return ( 
      <View style={ styles.tasksListCellContainer }> 
        <TouchableHighlight 
          ... 
        > 
          <View style...

The Navigator component works a bit differently from its native iOS component, but it's still very powerful to work with. One of the changes with using Navigator is that your routes should be explicitly defined. We can do this by setting up an array of routes and rendering a specific scene based on which route we're accessing. Here's a sample:

export default class Tasks extends Component { 
  render () { 
    const routes = [ 
      { title: 'First Component', index: 0 }, 
      { title: 'Second Component', index: 1 } 
    ]; 

Create a routes array, as shown in the preceding code.

You might notice that we are explicitly defining our routes from the beginning, setting up an initial route and then passing in props to each route's component here:

    return ( 
      <Navigator 
        initialRoute={{ index: 0 }} 
        renderScene={ (routes, navigator) => 
        this._renderScene(routes, navigator) } /> 
    ) 
  } 

The route object passed in to _renderScene contains a passProps...

When your files have such little variance in the differences between their iOS and Android functionalities, it's okay to use the same file. Utilizing the Platform API, we can identify the type of mobile device the user is on and conditionally send them down a specific path.

Import the Platform API along with the rest of your React Native components:

import { Platform } from 'react-native';  

Then call its OS property within a component:

  _platformConditional () { 
    if (Platform.OS === 'ios') { 
      doSomething(); 
    } 

    if (Platform.OS === 'android') { 
      doSomethingElse(); 
    } 
  } 

This lets us control the path our app takes and allows for a little bit of code reuse.