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

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

export default function CustomInput(props){

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

    let [cn1, setcn1] = useState("")
    let [cn2, setcn2] = useState("")
    let [cn3, setcn3] = useState("")
    let [cn4, setcn4] = useState("")

    let [mobilenumber, setmobilenumber] = useState("+63")

    const onFocus = (key) => {
      setactiveinput(key)
      setfocus(true)
    }

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

    const onSubmitLastField = () => {
      Keyboard.dismiss();
      props.onSubmitDone?.();
    }
    
    if(props.isMobileNumber) {
      return (
        <View style={{flexDirection: 'row', width: '75%', marginTop: 20, alignItems: 'center'}}>
          <TextInput
              returnKeyType='done'
              returnKeyLabel="Done"
              blurOnSubmit={false}
              keyboardType="numeric"
              maxLength={13}
              value={mobilenumber}
              onKeyPress={({ nativeEvent }) => {
                nativeEvent.key === 'Backspace' && mobilenumber.length === 3
              }}
              onChangeText={(value) => {
                const checker = checkPhoneNumberInput(value);
                
                if(!checker) return;
                
                if(value.substring(0, 3) == "+63") {
                  setmobilenumber(value)
                  props.onChangeText(value)
                }
              }}
              onSubmitEditing={Keyboard.dismiss}
              style={[{...styles.input, borderBottomColor: focus && activeInput == 1 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 1 ? 1.5 : 1, textAlign: 'left' }, { color: props.textColor || Theme.colors.black}]}
            />
        </View>
      )
    }

    return (
        <View style={{flexDirection: 'row', width: '75%', marginTop: 20, alignItems: 'center'}}>
            <TextInput
              ref={input => inputs['field1'] = input}
              returnKeyType={ 'next' }
              onSubmitEditing={() => { onSubmitEditing('field2'); }}
              blurOnSubmit={ false }
              keyboardType="numeric"
              maxLength={4}
              onFocus={() => onFocus(1)}
              onKeyPress={({ nativeEvent }) => {
                if(cn1.length == 4 && nativeEvent.key != "Backspace") onSubmitEditing("field2")
              }}
              value={cn1}
              onChangeText={(value) => {
                setcn1(value)
                props.onChangeText(value + cn2 + cn3 + cn4)
                if(value.length == 4) onSubmitEditing("field2")
              }}
              style={[{...styles.input, borderBottomColor: focus && activeInput == 1 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 1 ? 1.5 : 1 }, { color: props.textColor || Theme.colors.black}]}
            />
            <TextInput
              ref={input => inputs['field2'] = input}
              returnKeyType={ 'next' }
              onSubmitEditing={() => { onSubmitEditing('field3'); }}
              keyboardType="numeric"
              maxLength={4}
              blurOnSubmit={ false }
              onFocus={() => onFocus(2)}
              value={cn2}
              onKeyPress={({ nativeEvent }) => {
                nativeEvent.key === 'Backspace' && cn2 === "" ? onSubmitEditing("field1") : null
                if(cn2.length == 4 && nativeEvent.key != "Backspace") onSubmitEditing("field3")
              }}
              onChangeText={(value) => {
                setcn2(value)
                props.onChangeText(cn1 + value + cn3 + cn4)
                if(value.length == 4) onSubmitEditing("field3")
                else if(value == "" || value == "" && cn2 == "") onSubmitEditing("field1")
              }}
              style={[{...styles.input, borderBottomColor: focus && activeInput == 2 ? Theme.colors.accent : "gray", borderBottomWidth: focus && activeInput == 2 ? 1.5 : 1 }, { color: props.textColor || Theme.colors.black}]} 
            />
            <TextInput
              ref={input => inputs['field3'] = input}
              returnKeyType={ 'next' }
              onSubmitEditing={() => { onSubmitEditing('field4'); }}
              keyboardType="numeric"
              maxLength={4}
              blurOnSubmit={ false }
              onFocus={() => onFocus(3)}
              value={cn3}
              onKeyPress={({ nativeEvent }) => {
                nativeEvent.key === 'Backspace' && cn3 === "" ? onSubmitEditing("field2") : null
                if(cn3.length == 4 && nativeEvent.key != "Backspace") onSubmitEditing("field4")
              }}
              onChangeText={(value) => {
                setcn3(value)
                props.onChangeText(cn1 + cn2 + value + cn4)
                if(value.length == 4) 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.textColor || Theme.colors.black}]} 
            />
            <TextInput
              ref={input => inputs['field4'] = input}
              keyboardType="numeric"
              maxLength={4}
              blurOnSubmit={ false }
              onFocus={() => onFocus(4)}
              value={cn4}
              onSubmitEditing={onSubmitLastField}
              onKeyPress={({ nativeEvent }) => {
                nativeEvent.key === 'Backspace' && cn4 === "" ? onSubmitEditing("field3") : null
              }}
              onChangeText={(val) => {
                setcn4(val)
                props.onChangeText(cn1 + cn2 + cn3 + 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.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, color: Theme.colors.white
    }
  });