a.js

import React from 'react';
import { View, Text, TouchableOpacity, TextInput, TouchableWithoutFeedback, Keyboard, Animated, Image } from 'react-native';
// import { connect } from 'react-redux';
import Spinner from '../components/Spinner';
import * as API from '../utils/api';

class EnterCode extends React.Component {
  static navigationOptions = {
    title: 'Enter Code',
    headerTintColor: 'black',
  }
  constructor(props) {
    super(props);
    this.state = {
      Loading: false,
      phone: '',
      a: '',
      b: '',
      c: '',
      d: '',
      e: '',
      clickable: false,
      error: '',
      Loading: false,
      showAnimation: false,
      animation: new Animated.Value(0)
    };
    this.state = { time: {}, seconds: 240 };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
    this.addNum = this.addNum.bind(this);
    this.verifyOtp = this.verifyOtp.bind(this);
    this.startAnimation = this.startAnimation.bind(this);
  }


  componentDidMount() {
    const timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
    this.startTimer();
    // this.startAnimation();
  }


  startTimer() {
    if (this.timer == 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  secondsToTime = (secs) => {
    const hours = Math.floor(secs / (60 * 60));

    const dfm = secs % (60 * 60);
    const minutes = Math.floor(dfm / 60);

    const dfs = dfm % 60;
    const seconds = Math.ceil(dfs);

    const obj = {
      h: hours,
      m: minutes,
      s: seconds,
    };
    return obj;
  }


  countDown() {
    // Remove one second, set state so a re-render happens.
    const seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds,
    });

    // Check if we're at zero.
    if (seconds === 0) {
      clearInterval(this.timer);
    }
  }

  addNum = async () => {
    this.setState({ Loading: true, error: '' });


    const phone = 3;
    try {
      const resp = await API.addNumber(phone);
      // const resp = this.props.data;
      console.log(resp);
      this.setState({
        Loading: false,
      });
      // this.props.navigation.navigate('EnterCode', { phone });
    } catch (error) {
      alert('Error registering number');
      console.log(error);
      this.setState({ error: true, Loading: false });
    }

    // this.props.navigation.navigate('EnterCode');
  };

  verifyOtp = async (e) => {
    // this.startAnimation();
    console.log('e val');
    console.log(e);
    
    this.setState({ e })
    this.setState({ Loading: true, showAnimation: true });
    console.log(this.state);

    const otp = this.state.a.concat(this.state.b).concat(this.state.c).concat(this.state.d).concat(this.state.ee);
    const data = {
      num: 3,
      otp,
    };

    console.log(data);

    try {
      const resp = await API.otpVerification(data);
      console.log(resp)
      // const resp = this.props.data;
      // if (resp.data.success === false) {
      //   alert('Failed')
      //   this.setState({ //error: 'Verification Failed',
      //     Loading: false
      //   });
      // }
      // else if (resp.data === undefined) {
      //   this.setState({ error: 'Verification Failed', Loading: false });
      // }

      // else {
      //   this.setState({
      //     Loading: false,
      //   });
      this.props.navigation.navigate('EnterPassword',{ phone: this.props.navigation.navigate.state.params.phone});
      // }

    } catch (error) {
      console.log('err');
      console.log(error);
      this.setState({ error: true, Loading: false });
    }
  }

  startAnimation = () => {

    Animated.loop(
      Animated.sequence([
        Animated.timing(this.state.animation, {
          toValue: 1,
          duration: 500,
          delay: 1000
        }),
        Animated.timing(this.state.animation, {
          toValue: 0,
          duration: 500
        })
      ]),
      {
        iterations: 100
      }
    ).start()
  }



  focusNextField(nextField) {
    this.refs[nextField].focus();
  }

  renderButton() {
    if (this.state.Loading) {
      return (
        <View style={{
          height: 50,
          padding: 10,
        }}
        >
          <Spinner size="large" color="white" />
        </View>);
    }
    return null;

  }


  render() {
    const squareAnimation = {
      height: '60%',
      width: '100%',
      transform: [
        {
          scaleX: this.state.animation
        }
      ],
      backgroundColor: '#44CCDF',
    };

    return (
      <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }}>
        <View style={{ flex: 1 }}>

          <View style={{
            marginTop: 20,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
            <Image source={require('../../assets/img/enter_pass.png')} style={{ width: 40, height: 40 }} />
          </View>
          <View style={{ justifyContent: 'center', alignSelf: 'center' }}>
            <View style={{
              // backgroundColor: 'white',
              marginTop: 50,
              // width: 50,
              justifyContent: 'space-between',
              flexDirection: 'row',
              margin: 10,

            }}
            >

              <View style={{ marginLeft: 10, justifyContent: 'center', alignItems: 'center', borderRadius: 5, height: 50, backgroundColor: '#ffffff', width: 50 }}>
                <TextInput
                  onChangeText={a => this.setState({ a })}
                  textAlign="center"
                  keyboardType='number-pad'
                  // ref={(c) => { this.textInputMobile = c; }}
                  ref="1"
                  returnKeyType="next"
                  placeholder="*"
                  style={{
                    width: 50,
                    height: 50,
                    fontSize: 20,
                    marginTop: -3,
                    marginLeft: 10,
                    fontWeight: 'bold',
                    borderBottomWidth: 1,
                    borderBottomColor: '#ABABAB',
                  }}
                  onKeyPress={() => {
                    this.focusNextField('2');
                  }}
                  maxLength={1}
                  underlineColorAndroid="transparent"
                  // onEndEditing={() => this.focusNextField('2')}
                  onSubmitEditing={() => this.focusNextField('2')}
                />
              </View>
              <View style={{ marginLeft: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 5, height: 50, backgroundColor: '#ffffff', width: 50 }}>
                <TextInput
                  onChangeText={b => this.setState({ b })}
                  textAlign="center"
                  keyboardType='number-pad'
                  returnKeyType="next"
                  // ref={(c) => { this.textInputMobile = c; }}
                  ref="2"
                  onKeyPress={() => {
                    this.focusNextField('3');
                  }}
                  placeholder="*"
                  style={{
                    width: 50,
                    height: 50,

                    fontSize: 20,
                    marginTop: -3,
                    marginLeft: 10,
                    fontWeight: 'bold',
                    borderBottomWidth: 1,
                    borderBottomColor: '#ABABAB',
                  }}
                  maxLength={1}
                  underlineColorAndroid="transparent"
                  onSubmitEditing={() => this.focusNextField('3')}
                />
              </View>

              <View style={{ marginLeft: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 5, height: 50, backgroundColor: '#ffffff', width: 50 }}>
                <TextInput
                  onChangeText={c => this.setState({ c })}
                  textAlign="center"
                  keyboardType='number-pad'
                  returnKeyType="next"
                  // ref={(c) => { this.textInputMobile = c; }}
                  ref="3"
                  onKeyPress={() => {
                    this.focusNextField('4');
                  }}
                  placeholder="*"
                  style={{
                    width: 50,
                    height: 50,

                    fontSize: 20,
                    marginTop: -3,
                    marginLeft: 10,
                    fontWeight: 'bold',
                    borderBottomWidth: 1,
                    borderBottomColor: '#ABABAB',
                  }}
                  maxLength={1}
                  underlineColorAndroid="transparent"
                  onSubmitEditing={() => this.focusNextField('4')}
                />
              </View>

              <View style={{ marginLeft: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 5, height: 50, backgroundColor: '#ffffff', width: 50 }}>
                <TextInput
                  onChangeText={d => this.setState({ d })}
                  textAlign="center"
                  keyboardType='number-pad'
                  placeholder="*"
                  returnKeyType="next"
                  onKeyPress={() => {
                    this.focusNextField('5');
                  }}
                  // ref={(c) => { this.textInputMobile = c; }}
                  ref="4"
                  style={{
                    width: 50,
                    height: 50,
                    fontSize: 20,
                    marginTop: -3,
                    marginLeft: 10,
                    fontWeight: 'bold',
                    borderBottomWidth: 1,
                    borderBottomColor: '#ABABAB',
                  }}
                  maxLength={1}
                  underlineColorAndroid="transparent"
                  onSubmitEditing={() => this.focusNextField('5')}
                />
              </View>

              <View style={{ marginLeft: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 5, height: 50, backgroundColor: '#ffffff', width: 50 }}>
                <TextInput
                  style={{ alignItems: 'center' }}
                  // onChangeText={e => this.setState({ e })}
                  textAlign="center"
                  keyboardType='number-pad'
                  placeholder="*"
                  // ref={(c) => { this.textInputMobile = c; }}
                  ref="5"
                  style={{
                    width: 50,
                    height: 50,
                    fontSize: 20,
                    marginTop: -3,
                    marginLeft: 10,
                    fontWeight: 'bold',
                    borderBottomWidth: 1,
                    borderBottomColor: '#ABABAB',
                  }}
                  maxLength={1}
                  underlineColorAndroid="transparent"
                  // onChange={this.verifyOtp.bind(this)}
                  onChange={(e) =>this.verifyOtp(e)}

                />
              </View>

            </View>
          </View>

          <View style={{
            marginTop: 8,
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'row',
          }}
          >
            <Text style={{ color: '#ABABAB' }}> SMS sent to </Text>
            <Text style={{ color: 'black' }}>
              {/* {this.props.navigation.state.params.phone} */}
              33
              {/* 3 */}
            </Text>
          </View>
          <View style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 30,
          }}
          >
            <Text style={{ color: '#ABABAB' }} > No code, </Text>
            <TouchableOpacity style={{ flexDirection: 'row'}} onPress={() => { this.addNum(); }}>
              <Text style={{color: 'blue' }}> Resend </Text>
              <Image source={require('../../assets/img/resend.png')} style={{ marginTop:4, width: 10, height: 10 }} />
            </TouchableOpacity>
            <Text style={{ color: '#ABABAB' }}>  in  {this.state.time.m}:{this.state.time.s} </Text>
          </View>
          <View style={{ justifyContent: 'center', alignSelf: 'center' }}>
            <Text style={{ color: 'red', paddingTop: 20, fontWeight: 'bold' }}>
              {this.state.error}
            </Text>
          </View>
          {this.renderButton()}
          {/* {
            this.state.showAnimation ?
              <View style={{ marginTop: 100, backgroundColor: 'red' }}>
                <View style={{ backgroundColor: '#ffffff', height: '8%', justifyContent: 'center', alignItems: 'center' }}>

                  <Animated.View
                    style={squareAnimation}
                  >

                  </Animated.View>
                </View>
              </View> : null
          } */}
        </View>


      </TouchableWithoutFeedback>
    );
  }
}


export default EnterCode;

// function mapStateToProps(state) {
//   return {
//     data: state.data,
//   };
// }


// export default connect(mapStateToProps)(EnterCode);