How to add confirmation code field in react native

When you do any online payment or login then you need to enter otp. So if you want to add codes input in your react native app then follow these steps

When you are in middle of a project than you don’t want to create a custom code input from modifying text input. You just want to use a third party library to ease up the process. So here i find some for you, so you don’t have to spend time on searching and trying different libraries.

1. React native confirmation code field

you only need to add this library like this.

yarn add react-native-confirmation-code-field

after that you only need to use this in your enter otp or code screen like this.

<CodeField
        ref={ref}
        {...props}
        // Use `caretHidden={false}` when users can't paste a text value, because context menu doesn't appear
        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]}
            onLayout={getCellOnLayoutHandler(index)}>
            {symbol || (isFocused ? <Cursor /> : null)}
          </Text>
        )}
      />

You can implement it with ease. I use this in my many projects. This works totally fine.

If you want to see other props and other details than you can check it on here

If you get any issue with this library and unable to add code input in your app comment down below, I am gonna help you with this.