Automatically show keyboard on first render of react-native-confirmation-code-field

Question

I am using the react-native-confirmation-code-field package. I want the keyboard to be showing as soon as the screen renders and the first cell in focus. Any ideas how to do this?

Edit: Including my code below:

export default function ConfirmationCode({ route, navigation }) {

  const [value, setValue] = useState("")
  const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT })
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({value, setValue})

  return (
        <CodeField
          ref={ref}
          {...props}
          value={value}
          onChangeText={setValue}
          cellCount={CELL_COUNT}
          rootStyle={styles.codeFieldRoot}
          keyboardType="number-pad"
          textContentType="oneTimeCode"
          renderCell={({ index, symbol, isFocused }) => (
            <Text
              key={index}
              style={[styles.cell, isFocused && styles.focusCell]}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </Text>
          )
          }
        />
    )
}

Answer 1

So it turns out that CodeField does have an autoFocus property, my bad. The solution is simply to add autoFocus={true} as a prop to the CodeField component:

        <CodeField
          ref={ref}
          {...props}
          autoFocus={true}
          value={value}
          onChangeText={setValue}
          cellCount={CELL_COUNT}
          rootStyle={styles.codeFieldRoot}
          keyboardType="number-pad"
          textContentType="oneTimeCode"
          renderCell={({ index, symbol, isFocused }) => (
            <TextInput
              key={index}
              ref={index === 0 && textInputRef)
              style={[styles.cell, isFocused && styles.focusCell]}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </TextInput>
          )
          }
        />

Answer 2

Change Text component to TextInput. But make sure it is disabled. Set a ref(you would need the first one).

And on useEffect, call the focus method on that ref.

Roughly, it should look something like this:

export default function ConfirmationCode({ route, navigation }) {

  const [value, setValue] = useState("")
  const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT })
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({value, setValue})


 const textInputRef = useRef(null);

 useEffect(() => {
      textInputRef.current?.focus()      
}, []);
    
  return (
        <CodeField
          ref={ref}
          {...props}
          value={value}
          onChangeText={setValue}
          cellCount={CELL_COUNT}
          rootStyle={styles.codeFieldRoot}
          keyboardType="number-pad"
          textContentType="oneTimeCode"
          renderCell={({ index, symbol, isFocused }) => (
            <TextInput
              key={index}
              ref={index === 0 && textInputRef)
              style={[styles.cell, isFocused && styles.focusCell]}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </TextInput>
          )
          }
        />
    )
}