Question 34135 in React native Question posted in
The official React Native documentation can be found here.

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

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?

enter image description here

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>
          )
          }
        />
    )
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>
          )
          }
        />

  2. 0

    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>
          )
          }
        />
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search