source file

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

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View,
  Alert
} from 'react-native';
import {Button, List, ListItem} from 'react-native-elements';
export default class element_form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userPassword: '',
      userNameStyle: styles.inputFormStyle,
      userPasswordStyle: styles.inputFormStyle,
      userNameAutoFocus: true,
      userNameFocus: true,
      userPasswordFocus: false
    }

  }
  _registerButtonClicked() {}
  _loginButtonClicked() {
    if (this.state.userName.length == 0) {
      Alert.alert("System", "Have you key the username ?");
      this
        .refs
        .form2
        .refs
        .form2Component
        .focus();
      this.setState({userNameStyle: styles.inputFormStyleError});
      return false;
    } else {
      this.setState({userNameStyle: styles.inputFormStyle});
    }
    if (this.state.userPassword.length == 0) {
      Alert.alert("System", "Have you key the password ?");
      this
        .refs
        .form2
        .refs
        .form2Component
        .focus();
      this.setState({userPasswordStyle: styles.inputFormStyleError})

      return false;
    } else {
      this.setState({userPasswordStyle: styles.inputFormStyle})
    }
    //test sample focus Ajax Request register Ajax Request
    var myRequest = new Request('http://172.20.10.2/rn/test.php');
    fetch(myRequest).then(function (response) {
      if (response.status == 200)
        return response.json();
      else
        Alert.alert('System', 'Something went wrong on api server!');
        }
      )
      .then(function (responseJson) {
        me.setState({"welcomeText": responseJson.message});
      })
      .catch(function (error) {
        Alert.alert("System", "error:" + error);
      });
  }
  _resetButtonClicked() {
    //remove focus  not nessary but undocumented.. hmm

    this
      .refs
      .form2
      .refs
      .form2Component
      .blur();

    console.log(this.refs);
    // console.log(this.refs.form2.form2Component);
    this.setState({userName: ''});
    this.setState({userPassword: ''});

    this
      .refs
      .form1
      .refs
      .form1Component
      .focus();

  }
  nextFormComponent(event) {
    console.log(this);
    switch (event) {
      case "userPassword":
        this
          .refs
          .form2
          .form2Component
          .focus();
        this.setState({userNameFocus: false, userPasswordFocus: true});
        break;
      case "submit":
        // do nothing ..
        break;
      default:
        // Alert.alert("system", "Unknown Request")
    }
  }
  /**
   * Bind Data . the reason using standard   textInputOnChangeText={(text) => this.setState({text})} not working
   * @param {string} id
   * @param {string} value
   */
  bindData(id, value) {
    // seem pretty odd here cannot work this.setState({idx: value});
    switch (id) {
      case "userName":
        this.setState({"userName": value});
        break;
      case "userPassword":
        this.setState({"userPassword": value});
    }
  }
  render() {
    let leftIconRow1 = {
      name: "user",
      type: "font-awesome",
      color: 'blue'
    }
    let leftIconRow2 = {
      name: "lock",
      type: "font-awesome",
      color: 'blue'
    }
    return (
      <View>
        <Text style={styles.welcome}>
          Login Basic Apps
        </Text>
        <List>
          <ListItem title="row1"/>
          <ListItem title="row2"/>
          <ListItem
            leftIcon={leftIconRow1}
            title="Username"
            textInput={true}
            ref="form1"
            textInputRef="form1Component"
            textInputValue={this.state.userName}
            textInputSecureTextEntry={false}
            textInputOnChangeText={this
            .bindData
            .bind(this, 'userName')}
            textInputAutoFocus={this.state.userNameAutoFocus}
            textInputKeyboardType="default"
            textInputPlaceHolder="Type your Username Here"
            textInputContainerStyle={styles.inputFormStyle}
            textInputOnSubmitEditing={this
            .nextFormComponent
            .bind(this, 'userPassword')}
            textInputReturnKeyType="next"/>
          <ListItem
            title="Password"
            leftIcon={leftIconRow2}
            ref="form2"
            textInput={true}
            textInputRef="form2Component"
            textInputSecureTextEntry={true}
            textInputValue={this.state.userPassword}
            textInputOnChangeText={this
            .bindData
            .bind(this, 'userPassword')}
            textInputFocus={this.state.userPasswordFocus}
            textInputKeyboardType="default"
            textInputPlaceHolder="Type Your Password Here"
            textInputContainerStyle={styles.inputFormStyle}
            textInputOnSubmitEditing={this
            .nextFormComponent
            .bind(this, 'submit')}
            textInputReturnKeyType="done"/>
        </List>
        <Text></Text>
        <Button
          title="L o g i n"
          icon={{
          name: 'sign-in',
          type: 'font-awesome'
        }}
          color="#000000"
          backgroundColor="#2dc1f5"
          onPress={this
          ._loginButtonClicked
          .bind(this)}/>
        <Text></Text>
        <Button
          title="R e g i s t e r"
          icon={{
          name: 'file-o',
          type: 'font-awesome'
        }}
          color="#000000"
          backgroundColor="#51cccc"
          onPress={this
          ._loginButtonClicked
          .bind(this)}/>
        <Text></Text>
        <Button
          title="R e s e t"
          backgroundColor="#3d997a"
          icon={{
          name: 'refresh',
          type: 'font-awesome'
        }}
          onPress={this
          ._resetButtonClicked
          .bind(this)}/>
        <Text></Text>
        <Button
          title="F a c e b o o k"
          backgroundColor="#286666"
          icon={{
          name: 'facebook',
          type: 'font-awesome'
        }}
          onPress={this
          ._resetButtonClicked
          .bind(this)}/>
      </View>
    );
  }

};
const styles = StyleSheet.create({
  inputFormStyle: {
    flex: 1
  },
  inputFormStyleError: {
    flex: 1,
    backgroundColor: 'rgba(255, 0, 0, 0.4)'
  },
  inputFormStyleCannotEdit: {
    flex: 1,
    backgroundColor: 'rgba(24,24,24,1)'
  }
});
AppRegistry.registerComponent('element_form', () => element_form);