test android

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

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View,
  ScrollView,
  Alert,
  Switch
} from 'react-native';
import {Button, List, ListItem} from 'react-native-elements';
export default class element_form extends Component {
  constructor(props) {
    super(props);
    this.chevronDefault = {
      type: 'material',
      name: 'chevron-right',
      color: '#bdc6cf'
    }
    this.chevronError = {
      type: 'material',
      name: 'error',
      color: '#ff1744'
    }
    this.state = {
      userName: '',
      userPassword: '',
      userNameAutoFocus: true,
      userNameFocus: true,
      userPasswordFocus: false,
      userNameChevron: this.chevronDefault,
      userPasswordChevron: this.chevronDefault,
      userBirthDate: '',
      userMale: false,
      userFemale: true,
      testSwitch: false
    }

  }
  _registerButtonClicked() {
    console.log(this.state);
  }
  _loginButtonClicked() {
    if (this.state.userName.length == 0) {
      Alert.alert("System", "Have you key the username ?");
      this
        .refs
        .form1
        .refs
        .form1Component
        .focus();
      // this.setState({userNameStyle: styles.inputFormStyleError});
      this.setState({userNameChevron: this.chevronError})

      return false;
    } else {
      this.setState({userNameChevron: this.chevronDefault})

    }
    if (this.state.userPassword.length == 0) {
      Alert.alert("System", "Have you key the password ?");
      this
        .refs
        .form2
        .refs
        .form2Component
        .focus();
      this.setState({userPasswordChevron: this.chevronError})
      return false;
    } else {
      this.setState({userPasswordChevron: this.chevronDefault})

    }
    //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.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});
    }
  }
  _afterClickedDate() {
    console.log(this);
  }
  _testSwitch(value1) {
    this.setState({testSwitch: value1});
    console.log("funckin works")
  }
  _lol(a, b) {
    console.log(this)
    console.log(a);
    console.log(b);
    if (a == 1) {
      console.log("tuui");
    } else {
      console.log("salaj")
    }
  }
  joker() {
    return "lol";
  }
  render() {
    let leftIconRow1 = {
      name: "user",
      type: "font-awesome",
      color: 'blue'
    }
    let leftIconRow2 = {
      name: "lock",
      type: "font-awesome",
      color: 'blue'
    }
    return (
      <ScrollView>
        <List>

          <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"
            rightIcon={this.state.userNameChevron}/>
          <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"
            rightIcon={this.state.userPasswordChevron}/>
          <ListItem
            title="Non Editable"
            leftIcon={leftIconRow2}
            ref="form3"
            textInput={true}
            textInputRef="form3Component"
            textInputSecureTextEntry={false}
            textInputValue={this.state.userPassword}
            textInputOnChangeText={this
            .bindData
            .bind(this, 'userPassword')}
            textInputFocus={this.state.userPasswordFocus}
            textInputKeyboardType="default"
            textInputPlaceHolder="Non Editable here"
            textInputContainerStyle={styles.inputFormStyleNonEdit}
            textInputOnSubmitEditing={this
            .nextFormComponent
            .bind(this, 'submit')}
            textInputReturnKeyType="done"
            rightIcon={this.chevronDefault}/>

          <ListItem
            title="Success"
            leftIcon={leftIconRow2}
            ref="form4"
            textInput={true}
            textInputRef="form4Component"
            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"
            rightIcon={this.chevronDefault}/>

          <ListItem
            title="Error"
            leftIcon={leftIconRow2}
            ref="form5"
            textInput={true}
            textInputRef="form5Component"
            textInputSecureTextEntry={true}
            textInputOnChangeText={this
            .bindData
            .bind(this, 'userPassword')}
            textInputFocus={this.state.userPasswordFocus}
            textInputKeyboardType="default"
            textInputPlaceHolder="Error"
            textInputContainerStyle={styles.inputFormStyle}
            textInputOnSubmitEditing={this
            .nextFormComponent
            .bind(this, 'submit')}
            textInputReturnKeyType="done"
            rightIcon={this.chevronError}/>
          <Text></Text>
          <ListItem
            title="Date Default"
            textInputDate={true}
            textInputDateMode={'default'}
            textInputDateOnChange={(date) => this.setState({userBirthDate: date})}/>
          <ListItem
            title="Date Spinner"
            textInputDate={true}
            textInputDateMode={'spinner'}
            textInputDateOnChange={(date) => this.setState({userBirthDate: date})}/>
          <ListItem
            title="Date Calendar"
            textInputDate={true}
            textInputDateMode={'calendar'}
            textInputDateOnChange={(date) => this.setState({userBirthDate: date})}/>

          <ListItem
            title="Date Time"
            textInputDateTime={true}
            textInputDateMode={'default'}
            textInputDateTimeOnChange={(date) => this.setState({userBirthDate: date})}/>
          <ListItem
            title="Time"
            textInputTime={true}
            textInputTimeIs24Hour={false}
            textInputTimeOnChange={(date) => this.setState({userBirthDate: date})}/>
          <Text></Text>
          <ListItem title="Gender"/>
          <ListItem
            title="Man"
            switchButton={true}
            hideChevron={true}
            switchDisabled={false}
            switchOnChange={(obj) => this.setState({userMale: obj})}
            switched={this.state.userMale}/>
          <ListItem
            title="Women"
            switchButton={true}
            hideChevron={true}
            switchDisabled={false}
            switchOnChange={(obj) => this.setState({userFemale: obj})}
            switched={this.state.userFemale}/>
        </List>
        <Text>Testing switch normal</Text>
        <Switch
          onValueChange={this
          ._testSwitch
          .bind(this)}
          value={this.state.testSwitch}/>
        <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
          ._registerButtonClicked
          .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)}/>
      </ScrollView>
    );
  }

};
const styles = StyleSheet.create({
  inputFormStyle: {
    flex: 1
  },
  inputFormStyleError: {
    flex: 1
  },
  inputFormStyleNonEdit: {
    flex: 1,
    backgroundColor: "#eeeeee"
  },
  inputFormStyleFocus: {
    flex: 1,
    backgroundColor: "#eeeeee"
  }
});
AppRegistry.registerComponent('element_form', () => element_form);