API.md

• API
  • Base props
    • onFulfill: (code: string) => void
    • normalizeCode?: (code: string) => string
    • autoFocus?: boolean
    • codeLength?: number
    • defaultCode?: string
  • Style props
    • CellComponent?: ComponentType
    • maskSymbol?: string
    • keyboardType?: KeyboardType
    • activeColor?: string
    • inactiveColor?: string
    • cellBorderWidth?: number
    • space?: number
    • size?: number
    • inputPosition?: 'left' | 'right' | 'center' | 'full-width'
    • variant?: 'border-box' | 'border-circle' | 'border-b' | 'clear'
    • blurOnSubmit?: boolean
  • Customize props
    • containerProps?: ViewProps
    • inputProps?: TextInputProps
    • cellProps: TextInputProps | ({index: number, isFocused: boolean, hasValue: boolean}) => ?TextInputProps
  • Other props
    • testID?: any
  • Functions
    • focus() => void
    • blur() => void
    • clear = () => void

API

Base props

onFulfill: (code: string) => void

Callback function called when fulfilling code.

Required

normalizeCode?: (code: string) => string

This function will called before setState will apply a new code. It useful when you need check pasted user text.

autoFocus?: boolean

Auto focus on code input, Default false

codeLength?: number

Length of confirmation code -> number of cells. Default 5

defaultCode?: string

Default code value, must be the same length as codeLength

blurOnSubmit?: boolean

Control the focus after submitting. Default true

Style props

CellComponent?: ComponentType

A react component that use for render cell. It is really helpful for create animation.

maskSymbol?: string

A symbol that will be displayed when the field is filled. Supports emoji.

keyboardType?: KeyboardType

Determines which keyboard to open.

All values: KeyboardType.

Default value: "number-pad"

activeColor?: string

Color of cells when active. Default #fff. Demo activeColor:

inactiveColor?: string

Color of cells when inactive. Default #ffffff35. Demo inactiveColor:

cellBorderWidth?: number

Width of cell borders. Default 1. Demo cellBorderWidth:

space?: number

Space between 2 cells. Default 8. Demo space:

size?: number

Size of input cells. Default 40. Demo size:

inputPosition?: 'left' | 'right' | 'center' | 'full-width'

The position of code input in its container. Default center. Demo inputPosition:

variant?: 'border-box' | 'border-circle' | 'border-b' | 'clear'

Some built-in variants. Default border-box. Demo variant:

Customize props

containerProps?: ViewProps

<View/> component props

inputProps?: TextInputProps

<TextInput/> component props

cellProps: TextInputProps | ({index: number, isFocused: boolean, hasValue: boolean}) => ?TextInputProps

That property help customize Cells. When pass Object it must be <TextInput/> component props and this object will spread for each cell.

And if you pass function component will call with next options:

• index: unique number of cell
• isFocused: is cell in focus now
• hasValue: is cell has value

Your function must will pass TextInputProps or null.

(Example for custom style)

Other props

testID?: any

Help in test

Functions

focus() => void

Method that will focus the TextInput programmatically.

blur() => void

Method that will blur the TextInput programmatically.

clear = () => void

Method to clear the entered code.

import React, { Component, createRef } from 'react';
import CodeInput from 'react-native-confirmation-code-field';

class App extends Component {
  inputRef = createRef();

  handlerOnIvalidCode() {
    const { current } = this.inputRef;

    if (current) {
      current.clear();
    }
  }

  render() {
    return (
      <CodeInput
        ref={this.inputRef}
        // ...
      />
    );
  }
}