Todo Step4

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  ListView,
  TouchableOpacity,
  AsyncStorage
} from 'react-native';

const ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2
})

const data = []

class Project extends Component {

  state = {
    dataSource: ds.cloneWithRows(data)
  }

  componentDidMount() {
    AsyncStorage.getItem('data')
      .then(dataJSON => {
        if(dataJSON) {
          data = JSON.parse(dataJSON);
          this.setState({
            dataSource: ds.cloneWithRows(data)
          })
        }
      })
  }

  save = () => {
    AsyncStorage.setItem('data', JSON.stringify(data))
  }

  renderRow = (rowData, _, index) => {
    return (
      <View style={styles.itemContainer} >
        <Text style={styles.item} >{rowData}</Text>
        <TouchableOpacity style={styles.btn} onPress={()=>{
            data = data.filter((item, i) => i != index)
            this.setState({
              dataSource: ds.cloneWithRows(data)
            })

            this.save();
          }} >
          <Text style={styles.btnText}>Done</Text>
        </TouchableOpacity>
      </View>
    )
  }

  onChangeText = (text) => {
    this.setState({
      value: text
    })
  }

  onSubmitEditing = () => {
    data = [this.state.value, ...data];
    this.setState({
      dataSource: ds.cloneWithRows(data),
      value: ''
    })
    
    this.save();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          TODO
        </Text>
        <TextInput 
          style={styles.textInput}
          placeholder='Add item todo'
          onChangeText={this.onChangeText}
          onSubmitEditing={this.onSubmitEditing}
          value={this.state.value}
           />
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            enableEmptySections
            />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 22,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  textInput: {
    height: 50,
    padding: 8,
    borderWidth: 1,
    borderColor: '#eaeaea',
    margin: 8
  },
  itemContainer: {
    padding: 8,
    borderBottomWidth: 1,
    borderColor: '#eaeaea',
    flexDirection: 'row'
  },
  item: {
    fontSize: 18,
    flex: 1
  },
  btn: {
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 6
  },
  btnText: {
    color: 'white'
  }
});

AppRegistry.registerComponent('Project', () => Project);