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

export default class DemoAsyncStorage extends Component {
  constructor(props){
    super(props)

    this.state = {
      username:'',
      password:''
    }
  }

  _saveData(){
    AsyncStorage.setItem('username', this.state.username)
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection:'row'}}>
          <TextInput onChangeText={(value)=>this.setState({username:value})} placeholder={'username'} style={{flex:1}}/>
        </View>

        <View style={{flexDirection:'row'}}>
          <TextInput onChangeText={(value)=>this.setState({password:value})} placeholder={'password'} style={{flex:1}}/>
        </View>

        <View style={{flexDirection:'row', marginTop:20}}>
          <Text onPress={this._saveData.bind(this)}>Save</Text>
        </View>

        <View style={{flexDirection:'row', marginTop:20}}>
          <Text>Load</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

AppRegistry.registerComponent('AsyncStorage', () => DemoAsyncStorage);