Switch

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:

• onValueChange: This is a callback that is invoked with the new value of the switch when the value changes
• value: This is a Boolean that determines whether the switch is set to its 'on' position or not; it defaults to false

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:

• Expects the completed, due, formattedDate, and text props as part of its propTypes declaration.
• Contains a TextInput field that is preloaded with the name of the to-do list item and allows the user to edit the name.
• Adds a Switch component that is preloaded with the completion status of the to-do list item. When toggled, its completion status should change.

This is the solution that I came up with:

// Tasks/app/components/TasksList/index.js 

...  
export default class TasksList extends Component { 
  ... 
  _editTask (rowData) { 
    this.props.navigator.push({ 
      ... 
      passProps: { 
        completed: rowData.completed, 
        due: rowData.due, 
        formattedDate: rowData.formattedDate, 
        text: rowData.text 
      }, 
      ... 
    }); 
  } 
  ... 
} 

Pass in the four required fields for EditTask so that the view has access to rendering a to-do list item's existing details. If the row does not contain one or more of these fields, it will pass in undefined.

Declare the four propTypes that this component expects. Since completed and text are the only two that are set when a to-do list item is created by the app, they are marked as the required props.

// Tasks/app/components/EditTask/index.js 

import React, { Component, PropTypes } from 'react'; 
... 
import { 
  ... 
  Switch, 
  TextInput, 
  ... 
} from 'react-native'; 
... 
export default class EditTask extends Component { 
  static propTypes = { 
    completed: PropTypes.bool.isRequired, 
    due: PropTypes.string, 
    formattedDate: PropTypes.string, 
    text: PropTypes.string.isRequired 
  } 

  constructor (props) { 
    super (props); 

    this.state = { 
      completed: this.props.completed, 
      date: new Date(this.props.due), 
      expanded: false, 
      text: this.props.text 
    } 
  } 

Using props in state is considered an anti-pattern, but we have them here for good reason since we will be modifying these as part of the component.

In the next section, we will also create a Save button that lets us save the to-do item's updated details, and so we need a locally available copy of that data in state to reflect the EditTask component's changes.

Render a TextInput component to handle changing a to-do list item's name:

  render () { 
    ... 
    return ( 
      <View style={ styles.editTaskContainer }> 
        <View> 
          <TextInput 
            autoCorrect={ false } 
            onChangeText={ (text) => this._changeTextInputValue(text) } 
            returnKeyType={ 'done' } 
            style={ styles.textInput } 
            value={ this.state.text } 
          /> 
        </View> 

Render the Switch below ExpandableCell but above the clear due date Button:

        ... 
        <View style={ styles.switchContainer } > 
          <Text style={ styles.switchText } > 
            Completed 
          </Text> 
          <Switch 
            onValueChange={ (value) => this._onSwitchToggle(value) } 
            value={ this.state.completed } 
          /> 
        </View> 
        ... 
      </View> 
    ); 
  } 

The following callback methods change the values of TextInput and Switch:

  _changeTextInputValue (text) { 
    this.setState({ 
      text 
    }); 
  } 
  ...  
  _onSwitchToggle (completed) { 
    this.setState({ 
      completed 
    }); 
  } 
} 

A few styling additions for the new components:

// Tasks/app/components/EditTask/styles.js 

import { Navigator, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
  ... 
  switchContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    maxHeight: 50, 
    padding: 10 
  }, 
  switchText: { 
    fontSize: 16 
  }, 
  textInput: { 
    borderColor: 'gray', 
    borderWidth: 1, 
    height: 40, 
    margin: 10, 
    padding: 10 
  } 
}) 

export default styles;