### Install react-native-confirmation-code-field

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/README.md

This snippet shows how to install the react-native-confirmation-code-field library using Yarn.

```sh
yarn add react-native-confirmation-code-field
```

--------------------------------

### Installation Compatibility

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/README.md

Information on which version of `react-native-confirmation-code-field` to install based on your React Native version. For React Native 0.63.x and below, use version 6. For newer versions, install the latest release.

```bash
yarn add react-native-confirmation-code-field@6 // For react-native@0.63.x and below
yarn add react-native-confirmation-code-field // For latest version
```

--------------------------------

### Underline Example Fix

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/examples/DemoCodeField/src/UnderlineExample/README.md

This snippet shows the correct way to render a cell for the confirmation code field with an underline style. It addresses a React Native bug related to border styles on iOS by wrapping the Text component in a View and moving the onLayout handler to the View.

```javascript
// BAD 👎
renderCell={({index, symbol, isFocused}) => (
  <View key={index}>
    <Text
      onLayout={getCellOnLayoutHandler(index)}
    >
      {...}
    </Text>
  </View>
)}


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

--------------------------------

### Basic Confirmation Code Input (React Native)

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/README.md

This snippet demonstrates a fundamental implementation of a confirmation code input field using the react-native-confirmation-code-field library. It utilizes hooks like `useBlurOnFulfill` and `useClearByFocusCell` for managing focus and clearing input. The example includes basic styling for the input cells and handles different auto-complete behaviors for Android and other platforms.

```tsx
import React, {useState} from 'react';
import {SafeAreaView, Text, StyleSheet, Platform} from 'react-native';
import type {TextInputProps} from 'react-native';

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

const styles = StyleSheet.create({
  root: {flex: 1, padding: 20},
  title: {textAlign: 'center', fontSize: 30},
  codeFieldRoot: {marginTop: 20},
  cell: {
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
    color: '#000', // text color
  },
  focusCell: {
    borderColor: '#000',
  },
});

const CELL_COUNT = 6;
const autoComplete = Platform.select<TextInputProps['autoComplete']>({
  android: 'sms-otp',
  default: 'one-time-code',
});

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

  return (
    <SafeAreaView style={styles.root}>
      <Text style={styles.title}>Verification</Text>
      <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"
        autoComplete={autoComplete}
        testID="my-code-input"
        renderCell={({index, symbol, isFocused}) => (
          <Text
            key={index}
            style={[styles.cell, isFocused && styles.focusCell]}
            onLayout={getCellOnLayoutHandler(index)}>
            {symbol || (isFocused && <Cursor />)}
          </Text>
        )}
      />
    </SafeAreaView>
  );
};

export default App;

```

--------------------------------

### JSX Structure for Confirmation Code Field

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/README.md

This JSX structure illustrates the component's internal layout, featuring a root view containing individual Cell components and an invisible TextInput for input handling. This setup is designed to manage code input and display.

```jsx
// Root view (rectangle with a red border on 3d visualization below)
<View style={rootStyle}>
  // Each Cell element is result of a `renderCell` function (gray boxes)
  <Cell>1</Cell>
  <Cell>2</Cell>
  <Cell>3</Cell>
  <Cell>|</Cell>
  <Cell></Cell>
  <Cell></Cell>
  // Invisible Text Input with absolute position (gray rectangle with text '123')
  <TextInput value="123"/>
</View>
```

--------------------------------

### useClearByFocusCell Hook for React Native

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md

This hook adds functionality to clear input values based on the focused cell in a confirmation code field. It returns props to spread onto the CodeField component and a helper to get onLayout handlers for each cell. It also includes a workaround for React Native's border style issues on iOS.

```javascript
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}) => (
        <Text
          key={index}
          // Call getter method on each cell component
          onLayout={getCellOnLayout(index)}>
          {symbol}
        </Text>
      )}
    />
  );
};

```

--------------------------------

### CodeField Component API

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md

The base CodeField component renders a root component with cells and an invisible text input. It inherits TextInput props and allows customization of root and input components, styles, and props.

```APIDOC
CodeField:
  cellCount?: number
    - Number of characters in input (optional, default: 4)
  renderCell: (options: {symbol: string, index: number, isFocused: boolean}) => ReactElement
    - Required function for Cell rendering, will be invoke with next options:
      - symbol: string
      - index: number
      - isFocused: boolean
  RootComponent?: ComponentType<any>
    - If you want change root component for example using animations RootComponent={Animated.View} (optional, default View)
  InputComponent?: ComponentType<any>
    - If you want to provide a custom TextInput component that can receive the same props (optional, default TextInput)
  rootStyle?: StyleProp<RootComponent>
    - Styles for root component (optional)
  RootProps?: Object
    - Any props that will applied for root component <RootComponent style={rootStyle} {...RootProps} />
  textInputStyle?: StyleProp<TextStyle>
    - Styles for invisible <TextInput/>, can be used for testing or debug (optional)
```

--------------------------------

### useBlurOnFulfill Hook

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md

The useBlurOnFulfill hook automatically blurs the input when the user has entered the required number of characters. It takes the current input value and the total cell count, returning a ref to the TextInput.

```APIDOC
useBlurOnFulfill({value?: string, cellCount: number}): Ref<TextInput>
```

--------------------------------

### Cursor Component Usage

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md

The Cursor component is a helper for simulating cursor blinking animation within Cell components. It accepts optional delay and cursor symbol props.

```javascript
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="|"
/>;
```

--------------------------------

### useBlurOnFulfill Hook for React Native

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md

This hook automatically blurs the TextInput component when the entered value reaches the specified cell count. It returns a ref that should be passed to the CodeField component. It integrates well with the useClearByFocusCell hook.

```javascript
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}
      //...
    />
  );
};

```

--------------------------------

### useClearByFocusCell Hook

Source: https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md

The useClearByFocusCell hook is designed to clear the input field when it gains focus. It requires the current input value and a function to set the value.

```APIDOC
useClearByFocusCell({value?: string, setValue: (text: string) => void})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.