focus next textInput in react native in functional component

Question

i have a component for textinput

return (
    <TextInput
      onChangeText={(text) => {
        props.onChange(text)
      }}
      value={props.value}
      placeholder={props.placeholder}
      placeholderTextColor={Colors.gry}
      autoFocus={props.focus ? true : false}
      onFocus={() => setColor(Colors.org)}
      onBlur={() => setColor(Colors.gry)}
      ref={props.ref}
      returnKeyType='next'
    />
  )

i'm using this component like this

                   const inputRef = useRef<any>()

                    <Input
                      keyboard={'numeric'}
                      onChange={(text) => {
                        setOtp({ ...otp, o1: text })
                        inputRef.current.focus()
                      }}
                      value={otp.o1}
                      max={1}
                    />
                  </View>
                  <View style={styles.input}>
                    <Input
                      keyboard={'numeric'}
                      onChange={(text) => setOtp({ ...otp, o2: text })}
                      value={otp.o2}
                      ref={inputRef}
                      max={1}
                    />
                  </View>

i want to focus next input field when change text in first input field how can i do it?

Answer 1

Since your component Input is a wrapper for TextInput you need to use forwardRef to pass the ref to inner child and not directly through props

here is a code snipprt from react documentation on how to do it

const Input = React.forwardRef((props, ref) => (

<TextInput
  onChangeText={(text) => {
    props.onChange(text)
  }}
  value={props.value}
  placeholder={props.placeholder}
  placeholderTextColor={Colors.gry}
  autoFocus={props.focus ? true : false}
  onFocus={() => setColor(Colors.org)}
  onBlur={() => setColor(Colors.gry)}
  ref={ref} 
  returnKeyType='next'
/>)

// You can now get a ref directly :
const inputRef = React.createRef();
 <Input
     keyboard={'numeric'}
     onChange={(text) => setOtp({ ...otp, o2: text })}
     value={otp.o2}
     ref={inputRef}
     max={1}

then you can use focus