# react-native-input-code

> A passcode input field for React Native

Latest version **1.1.0** (published 2021-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-input-code
pnpm add react-native-input-code
yarn add react-native-input-code
bun add react-native-input-code
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-07-18 |
| First published | 2019-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sfjwr |
| Maintainers | sfjwr |
| Keywords | react-native, input, passcode, confirmation-code |

## Links

- npm: https://www.npmjs.com/package/react-native-input-code
- Homepage: https://github.com/sfjwr/react-native-input-code
- npm.io page: https://npm.io/package/react-native-input-code

## Recent versions

- 1.1.0 (latest) — 2021-07-18
- 1.0.0 — 2019-09-02
- 0.0.11 — 2019-07-05
- 0.0.10 — 2019-05-29
- 0.0.9 — 2019-05-23
- 0.0.8 — 2019-05-15
- 0.0.7 — 2019-05-09
- 0.0.5 — 2019-04-12
- 0.0.4 — 2019-03-22
- 0.0.3 — 2019-03-08
- 0.0.2 — 2019-03-02

## README

# react-native-input-code

A code input field for React Native.

![screenshot0](https://user-images.githubusercontent.com/8042009/58779993-7e6b3800-8612-11e9-99d0-6835eea178aa.png)

![screenshot1](https://user-images.githubusercontent.com/8042009/58779997-81febf00-8612-11e9-956c-f6e7620d899c.png)

# Installation

```sh
yarn add react-native-input-code
```

# Usage

```typescript
import React, {useCallback, useRef, useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';

import InputCode, {InputCodeHandler} from 'react-native-input-code';

const App = () => {
  const inputCode = useRef<InputCodeHandler>(null);
  const [code, setCode] = useState<string>('');

  const onChangeCode = useCallback(value => {
    console.log(value);
    setCode(value);
  }, []);

  const onFullFill = useCallback(
    value => {
      console.log(value);

      setTimeout(() => {
        setCode('');
        inputCode.current!.focus();
      }, 100);
    },
    [inputCode],
  );

  return (
    <SafeAreaView>
      <InputCode
        code={code}
        length={4}
        ref={inputCode}
        onChangeCode={onChangeCode}
        onFullFill={onFullFill}
        passcode
        passcodeChar="*"
        autoFocus
        codeContainerStyle={styles.codeContainerStyle}
        codeContainerCaretStyle={styles.codeContainerCaretStyle}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  codeContainerStyle: {
    borderWidth: 0,
    borderBottomWidth: 2,
  },
  codeContainerCaretStyle: {
    borderWidth: 0,
    borderBottomWidth: 2,
    borderBottomColor: 'red',
  },
});

export default App;
```

---
_Source: https://npm.io/package/react-native-input-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._