DOCSEARCHbyAlgolia
Submit Docs

react-native-confirmation-code-field

repository·master·Indexed 22 days ago

https://github.com/retyui/react-native-confirmation-code-field

A React Native component for creating customizable confirmation code input fields for Android and iOS. Version 9.0.0 features the <CodeField /> component, a <Cursor /> component for blinking animations, and specialized hooks like useClearByFocusCell and useBlurOnFulfill for UX improvements. It supports custom cell rendering via renderCell, password masks, and placeholder characters.

Tokens
2K
Snippets
6
Records
21
Agent score
77%

What's inside react-native-confirmation-code-field

  1. Fix border style issues on iOS using View wrappers

    master

    React Native has a known issue with border styles on <Text/> components on iOS. To resolve this when using custom cell rendering, wrap your <Text/> component in a <View/>.

    Crucial: When using a wrapper, you must move the onLayout handler from the <Text/> component to the <View/> component to ensure layout calculations remain accurate.

    // GOOD ✔️
renderCell={({index, symbol, isFocused}) => (
  <View
    key={index}
    onLayout={getCellOnLayoutHandler(index)}
  >
    <Text>{...}</Text>
  </View>
)}

  3. View the Animated Example concept

    master

    The DemoCodeField package includes an animated example inspired by a Dribbble design concept. This example demonstrates how the confirmation code field can be used with animations to create a polished user experience for verification screens (e.g., Forgot Password verification).

    ![react-native-confirmation-code-field animated example](https://media.giphy.com/media/huJrqF0YRrNJBTwUmz/giphy.gif)

  5. Automatically blur input with `useBlurOnFulfill`

    master

    The useBlurOnFulfill hook provides logic to automatically call .blur() on the <TextInput /> once the input length reaches the specified cellCount.

    Parameters:

    • value?: string: The current input value.
    • cellCount: number: The target number of characters.

    Returns: A Ref<TextInput> which must be passed to the ref prop of the <CodeField /> component.

    import {
  CodeField,
  useBlurOnFulfill,
} from 'react-native-confirmation-code-field';

const App = () => {
  const CELL_COUNT = 4;
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});

  return (
    <CodeField
      ref={ref}
      value={value}
      cellCount={CELL_COUNT}
      //...
    />
  );
};

  6. Implement cell clearing with `useClearByFocusCell`

    master

    The useClearByFocusCell hook adds functionality to trim the input value when a user presses a specific cell.

    It returns an array containing:

    1. props: An object to be spread onto the <CodeField /> component.
    2. getCellOnLayout(index: number): A helper function that returns an onLayout handler for a specific cell index.

    Important iOS Styling Note: If you are styling borders (like borderBottom) on a <Text /> component on iOS, you must wrap the cell in a <View /> and apply the onLayout handler to that <View /> to avoid rendering issues.

    import {
  CodeField,
  useClearByFocusCell,
} from 'react-native-confirmation-code-field';

const App = () => {
  const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({
    value,
    setValue,
  });

  return (
    <CodeField
      {...codeFieldProps}
      value={value}
      onChangeText={setValue}
      renderCell={({index, symbol, isFocused}) => (
        <View
          key={index}
          onLayout={getCellOnLayout(index)}
        >
          <Text>{symbol}</Text>
        </View>
      )}
    />
  );
};

  7. Use the `<CodeField />` component

    master
    The <CodeField /> component is the primary component for rendering a confirmation code input. It renders a RootComponent (defaulting to View) containing cells generated by the renderCell function, and an invisible <TextInput /> layered on top to handle user input. It inherits all standard TextInput props, except for style, which should be applied via rootStyle.

  8. Use the `<Cursor />` component for blinking animations

    master

    The <Cursor /> component is a helper used within your renderCell implementation to simulate a blinking cursor animation inside a cell.

    import {Cursor} from 'react-native-confirmation-code-field';

<Cursor
  // Blinking animation speed (optional, number)
  delay={500}
  // Symbol that would be returned to simulate cursor blinking (optional, string)
  cursorSymbol="|"
/>;

  9. Configure `<CodeField />` props

    master

    The following props are available for <CodeField />:

    • cellCount?: number: The number of characters in the input (default: 4).
    • renderCell: (options: {symbol: string, index: number, isFocused: boolean}) => ReactElement: Required. Function used to render each individual cell.
    • RootComponent?: ComponentType<any>: Custom component for the container (e.g., Animated.View). Defaults to View.
    • InputComponent?: ComponentType<any>: Custom TextInput component. Defaults to TextInput.
    • rootStyle?: StyleProp<RootComponent>: Styles for the root container.
    • RootProps?: Object: Any props to be spread onto the RootComponent.
    • textInputStyle?: StyleProp<TextStyle>: Styles for the invisible <TextInput /> (useful for debugging).