Failed prop type: Invalid prop `defaultValue` of type `object`

Question

Hy. I'm new in react native but I'm facing this issue.

I design the OTP screen using TextInput but having that error I don't know why, failed prop type invalid prop 'defaultValue' of type 'object' supplied to 'textinput' expected 'string' . I used state hook and useref hook to do create this screen.

here's complete code of screen:

//import files

const EmailOTP = ({ navigation }) => {
    const [otpState, setOtpState] = useState({
        pin1: '',
        pin2: '',
        pin3: '',
        pin4: '',
        pin5: '',
        pin6: '',
    })

    otpState.pin1 = useRef('');
    otpState.pin2 = useRef('');
    otpState.pin3 = useRef('');
    otpState.pin4 = useRef('');
    otpState.pin5 = useRef('');
    otpState.pin6 = useRef('');

    useEffect(() => {
        otpState.pin1.current.focus();
    }, [])

    
    return (
        <View style={styles.container} >
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                showsVerticalScrollIndicator={false}
            >

                <View style={styles.OTPWrapper} >

                    <TextInput
                        ref={otpState.pin1}
                        onChangeText={pin1 => {
                            setOtpState({ pin1: pin1 })
                            if (otpState.pin1 != "") {
                                otpState.pin2.current.focus();
                            }
                        }
                        }
                        defaultValue={otpState.pin1}
                        maxLength={1}
                        style={styles.OTPinput}
                    />
                    <TextInput
                        ref={otpState.pin2}
                        onChangeText={pin2 => {
                            setOtpState({ pin2: pin2 })
                            if (otpState.pin2 != "") {
                                otpState.pin3.current.focus();
                            }
                        }
                        }
                        defaultValue={otpState.pin2}
                        maxLength={1}
                        style={styles.OTPinput}
                    />
                    <TextInput
                        ref={otpState.pin3}
                        onChangeText={pin3 => {
                            setOtpState({ pin3: pin3 })
                            if (otpState.pin3 != "") {
                                otpState.pin4.current.focus();
                            }
                        }
                        }
                        defaultValue={otpState.pin3}
                        maxLength={1}
                        style={styles.OTPinput}
                    />
                    <TextInput
                        ref={otpState.pin4}
                        onChangeText={pin4 => {
                            setOtpState({ pin4: pin4 })
                            if (otpState.pin4 != "") {
                                otpState.pin5.current.focus();
                            }
                        }
                        }
                        defaultValue={otpState.pin4}
                        maxLength={1}
                        style={styles.OTPinput}
                    />
                    <TextInput
                        ref={otpState.pin5}
                        onChangeText={pin5 => {
                            setOtpState({ pin5: pin5 })
                            if (otpState.pin5 != "") {
                                otpState.pin6.current.focus();
                            }
                        }
                        }
                        defaultValue={otpState.pin5}
                        maxLength={1}
                        style={styles.OTPinput}
                    />
                    <TextInput
                        ref={otpState.pin6}
                        onChangeText={pin6 => {
                            setOtpState({ pin6: pin6 })
                        }
                        }
                        defaultValue={otpState.pin6}
                        maxLength={1}
                        style={styles.OTPinput}
                    />
                </View>

                <TouchableOpacity onPress={()=>navigation.navigate('PhoneNumberVerification')}>
                    <View style={[styles.btnWrapper, { marginTop: 40, }]} >
                        <Text style={styles.logButton} >Verify Email</Text>
                    </View>
                </TouchableOpacity>
                <View style={styles.contentWrapperOtpResend} >
                    <View style={styles.loginRedirectWrapper}>
                        <Text style={styles.loginRedirectText} >Didn't Receive the code?</Text>
                        <Text style={styles.loginRedirectButton}> Resend</Text>
                    </View>
                </View>
            </ScrollView>

        </View>
    );
}

export default EmailOTP

Answer 1

The way I see it, you actually have just linked the pins but have not set them. Try this instead:

  otpState.pin1 = useRef(null);
  otpState.pin2 = useRef(null);
  otpState.pin3 = useRef(null);
  otpState.pin4 = useRef(null);
  otpState.pin5 = useRef(null);
  otpState.pin6 = useRef(null);

  otpState.pin1.current = '';
  otpState.pin2.current = '';
  otpState.pin3.current = '';
  otpState.pin4.current = '';
  otpState.pin5.current = '';
  otpState.pin6.current = '';

And set the defaultValue of every TextInput to their respective pins like this: 'otpState.pin1.current'

This is how the TextInput should look like:

    <TextInput
        ref={otpState.pin1}
        onChangeText={pin1 => {
          setOtpState({pin1: pin1});
          if (otpState.pin1 != '') {
            otpState.pin2.current.focus();
          }
        }}
        defaultValue={otpState.pin1.current}
        maxLength={1}
        style={styles.OTPinput}
      />