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()
    }

    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="phone-pad"
              secureTextEntry={props.secureTextEntry || false}
              maxLength={1}
              onFocus={() => onInputFocus(1)}
              value={otp1}
              onBlur={() => {
                setfocus(false)
              }}
              onChangeText={(value) => {
                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="phone-pad"
              secureTextEntry={props.secureTextEntry || false}
              maxLength={1}
              blurOnSubmit={ false }
              onFocus={() => onInputFocus(2)}
              value={otp2}
              onBlur={() => {
                setfocus(false)
              }}
              onChangeText={(value) => {
                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="phone-pad"
              secureTextEntry={props.secureTextEntry || false}
              maxLength={1}
              blurOnSubmit={ false }
              onFocus={() => onInputFocus(3)}
              value={otp3}
              onBlur={() => {
                setfocus(false)
              }}
              onChangeText={(value) => {
                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="phone-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={(val) => {
                setotp4(val)
                props.onChangeText(otp1 + otp2 + otp3 + val)
                if(val == "") onSubmitEditing("field3")
              }}
              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
  }
});