Components

As we describe, View components should be stateless and ignore all of the business logic.

They are simple react components that can be share between applications and imported from other projects.

TodoForm.jsx

Todo form allow use to create a new todo item.

import React, { Component, PropTypes } from 'react';
import { TextInput } from 'react-native';

export default class TodoForm extends Component {
  constructor(props) {
    super(props);
  }

  addTodo(e) {
    this.props.onAddTodo(this.state.text);
    this._textInput.setNativeProps({text: ''});
  }

  render() {
    return (
      <TextInput
        ref={component => this._textInput = component}
        style={this.props.style}
        onSubmitEditing={(e) => this.addTodo()}
        onChangeText={(text) => this.setState({text:text})}
        enablesReturnKeyAutomatically={true}
        returnKeyType='done'
        clearButtonMode="while-editing"
        placeholder="Add a todo"
        blurOnSubmit={false} />
    )
  }
}

TodoForm.propTypes = {
  onAddTodo : PropTypes.func.isRequired
}

This component require an onAddTodo props of type function.

TodoList.jsx

The todo list component is in charge of displaying the list of todo items.

import { ListView } from 'react-native';
import React, { Component, PropTypes } from 'react';

export default class TodoList extends Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  }

  render() {
    const {
      todos,
      todoRenderer,
      ...props
    } = this.props;

    const dataSource = this.ds.cloneWithRows(todos);
    return (
      <ListView
        dataSource={ dataSource }
        renderRow={ (data, sectionID, id) => {
          return React.createElement(todoRenderer, { data, id, ...props }) 
        }}
      />
    );
  }
}

TodoList.propTypes = {
  todos: PropTypes.array,
  todoRenderer: PropTypes.func,
}

This component need a todoRenderer that is a React element and and array of todos.

TodoItem.jsx

TodoItem is the todo renderer for the list.

import {
  View,
  Text,
  TouchableHighlight
} from 'react-native';
import React, {
  Component,
  PropTypes
} from 'react';
import styles from '../styles';

export default class TodoItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const{
      data: todo,
      id,
      onTodoClick,
      onRemoveClick,
      todoStyle,
      todoCompletedStyle,
      ...props
    } = this.props;

    return(
      <View style={{flexDirection: 'row'}}>
        <TouchableHighlight onPress={() => onTodoClick(id)} style={{flex:3}}>
          <Text style={[todoStyle, todo.completed && todoCompletedStyle]}>{todo.text}</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={() => onRemoveClick(id)} style={{flex:1}}>
          <Text style={[styles.remove, {padding:10}]}>Remove</Text>
        </TouchableHighlight>
      </View>
    )
  }

}

TodoItem.propTypes = {
  id: PropTypes.string,
  data: PropTypes.object,
  onTodoClick: PropTypes.func,
  onRemoveClick: PropTypes.func,
};

Todo item need id, data and event handlers click and remove action.

styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  form : {
    height: 35,
    justifyContent: 'center',
    alignItems: 'stretch',
    margin:5
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    paddingTop: 20
  },
  todoItem : {
    flex:1,
    height:40,
    padding: 10
  },
  todoItemCompleted : {
    textDecorationLine : 'line-through'
  },
  remove : {
    color: '#da0000'
  }
});