unioil-loyalty-rn-app/app/components/otpinput.js

import * as React from 'react'
import {useState, useEffect, useRef} from 'react'
import {View, Text, TouchableOpacity, TextInput, StyleSheet, Keyboard} from 'react-native'
import Theme from './theme.style.js'

export default function OTPInput(props){

    const [focus, setfocus] = useState(false);
    const [activeInput, setActiveInput] = useState(null);
    const [value, setvalue] = useState('')
    const inputs = {}

    let [otp1, setotp1] = useState("");
    let [otp2, setotp2] = useState("");
    let [otp3, setotp3] = useState("");
    let [otp4, setotp4] = useState("");

    const send = () => {
      props.onChangeText(value)
    }

    const onInputFocus = (x) => {
      setActiveInput(x);
      setfocus(true);
    }

    const onSubmitEditing = (key) => {
      inputs[key].focus()
    }

    const validator = (key) => {
      const reg = /^\d+$/;
      if(!reg.test(key) && key !== "") {
        return false;
      }

      return true;
    }

    return (
        <View style={[{flexDirection: 'row', width: '75%', marginTop: 5, alignItems: 'center'}, props.containerStyle || null]}> 
          <TextInput
            ref={input => inputs['field1'] = input}
            returnKeyType={ 'next' }
            onSubmitEditing={() => { onSubmitEditing('field2'); }}
            onKeyPress={({ nativeEvent }) => {
              if(otp1.length == 1 && nativeEvent.key != "Backspace") onSubmitEditing("field2")
            }}
            blurOnSubmit={ false }
            keyboardType="number-pad"
            secureTextEntry={props.secureTextEntry || false}
            maxLength={1}
            onFocus={() => onInputFocus(1)}
            value={otp1}
            onBlur={() => {
              setfocus(false)
            }}
            onChangeText={(value) => {
              if(!validator(value)) return;

              setotp1(value)

              props.onChangeText(value + otp2 + otp3 + otp4)
              if(value.length == 1){
                onSubmitEditing("field2")
              }
            }}
            style={{...styles.input, borderBottomColor: focus && activeInput == 1 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 1 ? 1.5 : 1, color: props?.isDarkMode ? props?.textColor : Theme.colors.black}}
          />
          <TextInput
            ref={input => inputs['field2'] = input}
            returnKeyType={ 'next' }
            onSubmitEditing={() => { onSubmitEditing('field3'); }}
            onKeyPress={({ nativeEvent }) => {
              nativeEvent.key === 'Backspace' && otp2 === "" ? onSubmitEditing("field1") : null
              if(otp2.length == 1 && nativeEvent.key != "Backspace") onSubmitEditing("field3")
            }}
            keyboardType="number-pad"
            secureTextEntry={props.secureTextEntry || false}
            maxLength={1}
            blurOnSubmit={ false }
            onFocus={() => onInputFocus(2)}
            value={otp2}
            onBlur={() => {
              setfocus(false)
            }}
            onChangeText={(value) => {
              if(!validator(value)) return;

              setotp2(value)
              props.onChangeText(otp1 + value + otp3 + otp4)
              if(value.length == 1) onSubmitEditing("field3")
              else if(value == "") onSubmitEditing("field1")
            }}
            style={{...styles.input, borderBottomColor: focus && activeInput == 2 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 2 ? 1.5 : 1, color: props?.isDarkMode ? props?.textColor : Theme.colors.black }} 
          />
          <TextInput
            ref={input => inputs['field3'] = input}
            returnKeyType={ 'next' }
            onSubmitEditing={() => { onSubmitEditing('field4'); }}
            onKeyPress={({ nativeEvent }) => {
              nativeEvent.key === 'Backspace' && otp3 === "" ? onSubmitEditing("field2") : null
              if(otp3.length == 1 && nativeEvent.key != "Backspace") onSubmitEditing("field4")
            }}
            keyboardType="number-pad"
            secureTextEntry={props.secureTextEntry || false}
            maxLength={1}
            blurOnSubmit={ false }
            onFocus={() => onInputFocus(3)}
            value={otp3}
            onBlur={() => {
              setfocus(false)
            }}
            onChangeText={(value) => {
              if(!validator(value)) return;

              setotp3(value)
              props.onChangeText(otp1 + otp2 + value + otp4)
              if(value.length == 1) onSubmitEditing("field4")
              else if(value == "") onSubmitEditing("field2")
            }}
            style={{...styles.input, borderBottomColor: focus && activeInput == 3 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 3 ? 1.5 : 1, color: props?.isDarkMode ? props?.textColor : Theme.colors.black }} 
          />
          <TextInput
            ref={input => inputs['field4'] = input}
            keyboardType="number-pad"
            secureTextEntry={props.secureTextEntry || false}
            maxLength={1}
            blurOnSubmit={ false }
            onFocus={() => onInputFocus(4)}
            onKeyPress={({ nativeEvent }) => {
              nativeEvent.key === 'Backspace' && otp4 === "" ? onSubmitEditing("field3") : null
            }}
            value={otp4}
            onBlur={() => {
              setfocus(false)
            }}
            onChangeText={(value) => {
              if(!validator(value)) return;

              setotp4(value)
              props.onChangeText(otp1 + otp2 + otp3 + value)
              if(value == "") onSubmitEditing("field3")
            }}
            onSubmitEditing={() => {
              Keyboard.dismiss();
            }}
            style={{...styles.input, borderBottomColor: focus && activeInput == 4 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 4 ? 1.5 : 1, color: props?.isDarkMode ? props?.textColor : Theme.colors.black }} 
          />
        </View>
    )

}

const styles = StyleSheet.create({
  input: {
    flex: 1, padding: 0, margin: 5, fontSize: 18, textAlign: 'center', borderBottomColor: Theme.colors.accent, borderBottomWidth: 1.5
  }
});