I have a Typescript React Native custom component for React Native Boxed OTP input. Where it is working fine in all the conditions, but when it comes to autofilling otp for iOS it is only pasting 1st value of otp which is shown in iOS Keyboard and rest of the Input Box remains empty. Not pasting entire otp input all input box. But for android it is working fine.

im sharing my component below please let me know what kind of modification can help achieve my target

import React, { useEffect, useRef, useState } from 'react';
import {
  NativeSyntheticEvent,
  Platform,
  StyleSheet,
  TextInput,
  TextInputKeyPressEventData,
  View,
  ViewStyle,
} from 'react-native';
import colors from 'res/colors';
import fonts from 'res/fonts';
import { getScaledNumber } from 'library/Utils';
import { Clipboard } from 'react-native';

interface CombinedOtpInputProps {
  inputCount?: number;
  onOtpChange: (otp: string) => void;
  containerStyle?: ViewStyle;
  autoFocus?: boolean;
}

const CombinedOtpInput: React.FC<CombinedOtpInputProps> = ({
  inputCount = 6,
  onOtpChange,
  containerStyle,
  autoFocus = false,
}) => {
  const [otp, setOtp] = useState<string[]>(Array(inputCount).fill(''));
  const [focusedInput, setFocusedInput] = useState<number>(0);
  const inputsRef = useRef<Array<TextInput | null>>([]);

  useEffect(() => {
    if (autoFocus && inputsRef.current[0]) {
      inputsRef.current[0]?.focus();
    }
  }, [autoFocus]);

  const checkClipboardForOTP = async () => {
    const clipboardContent = await Clipboard.getString();
    if (clipboardContent) {
      const otpRegex = /bd{4,6}b/;
      const otpMatch = clipboardContent.match(otpRegex);
      if (otpMatch) {
        const otpArray = otpMatch[0].split('');
        setOtp(otpArray);
        Clipboard.setString('');
        const lastFilledIndex = Math.min(otpArray.length, inputCount) - 1;
        inputsRef.current[lastFilledIndex]?.focus();
      }
    }
  };

  const handleTextChange = (text: string, index: number) => {
    if (Platform.OS === 'android' && text.length === 1) {
      checkClipboardForOTP();
    }

    if (/^d*$/.test(text)) {
      const newOtp = [...otp];
      newOtp[index] = text;
      setOtp(newOtp);
      onOtpChange(newOtp.join(''));

      // Move focus to the next input if current input is not empty
      if (text && index < inputCount - 1) {
        inputsRef.current[index + 1]?.focus();
        setFocusedInput(index + 1);
      }
    }
  };

  const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
    if (e.nativeEvent.key === 'Backspace' && otp[index] === '' && index > 0) {
      inputsRef.current[index - 1]?.focus();
      setFocusedInput(index - 1);
    }
  };

  return (
    <View style={[styles.container, containerStyle]}>
      {Array(inputCount)
        .fill(0)
        .map((_, i) => {
          let inputContainerStyle = {
            borderWidth: 1,
            borderColor: colors.gainsboroGray,
          };
          let inputStyle = { ...styles.textInput };

          const value = otp[i];
          if (focusedInput === i && (value?.length === 0 || value === undefined)) {
            inputStyle = { ...inputStyle, fontSize: 16, fontFamily: fonts.ssd_thin };
          } else {
            if (value?.length > 0) {
              inputStyle = { ...inputStyle, backgroundColor: colors.lightSilver };
              inputContainerStyle = {
                ...inputContainerStyle,
                borderColor: colors.lightSilver,
                borderWidth: 1,
              };
            } else {
              inputStyle = { ...inputStyle, backgroundColor: colors.white };
            }
          }

          return (
            <View key={i} style={[styles.inputContainer, inputContainerStyle]}>
              <TextInput
                ref={(ref) => (inputsRef.current[i] = ref)}
                style={inputStyle}
                value={otp[i]}
                onChangeText={(text) => handleTextChange(text, i)}
                onKeyPress={(e) => handleKeyPress(e, i)}
                keyboardType='numeric'
                maxLength={1}
                selectionColor={colors.primaryGrey}
                autoFocus={autoFocus && i === 0}
                textContentType='oneTimeCode'
              />
            </View>
          );
        })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    alignSelf: 'center',
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: colors.gainsboroGray,
    borderRadius: getScaledNumber(8),
    width: 40,
    height: 45,
    overflow: 'hidden',
  },
  textInput: {
    height: 45,
    fontFamily: fonts.ssd_semiBold,
    fontSize: getScaledNumber(24),
    textAlign: 'center',
    color: colors.primaryGrey,
    backgroundColor: colors.white,
    padding: 0,
  },
});

export default CombinedOtpInput;

PS : Also tried a hidden field but hidden field’s behaviour is not as expected per my requirement. & tried with libarary and modified its code but not matching the expected UI behaviour.

Any help will be much appriciated.
thanks in advance.

I want to achieve OTP Autofill funcationality in specifically in iOS as in Android its working pretty fine.

I have tried with lots of libarary and tried modifying the libarary code but at the end i am not reaching my expected UI behaviour.

So i created a React Native typescript common component to handle autofill but in which it is only filling value for the first input box and not in the rest.