# @alcs/react-native-input-autofocus

> Support for next input focusing functionality

Latest version **0.0.2** (published 2023-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alcs/react-native-input-autofocus
pnpm add @alcs/react-native-input-autofocus
yarn add @alcs/react-native-input-autofocus
bun add @alcs/react-native-input-autofocus
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-06-23 |
| First published | 2023-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 51.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (Unknown) |
| GitHub stars | 10 |
| Author | Aleksandras Bogdanovas |
| Maintainers | frachtbot, sirse |
| Keywords | react-native, autofocus, next-field, enter, onenter, input, textField |

## Links

- npm: https://www.npmjs.com/package/@alcs/react-native-input-autofocus
- Repository: https://github.com/fracht/react-native-input-autofocus
- Homepage: https://github.com/fracht/react-native-input-autofocus#readme
- Issues: https://github.com/fracht/react-native-input-autofocus/issues
- npm.io page: https://npm.io/package/@alcs/react-native-input-autofocus

## Dependencies (1)

- [@sirse-dev/safe-context](https://npm.io/package/@sirse-dev/safe-context.md) ^0.3.0

## Recent versions

- 0.0.2 (latest) — 2023-06-23
- 0.0.1 — 2023-06-23

## README

# @alcs/react-native-input-autofocus

This package simplifies the focus system on the next input.

<table>
<thead>
<tr>
<th>
iOS
</th>
<th>
Android
</th>
</tr>
</thead>
<tbody>
<tr>
<td>

![Example](https://raw.githubusercontent.com/fracht/react-native-input-autofocus/75d9ef95574f1a1b59c3d40fc7845c9a29de6b7d/docs/assets/iosExample.gif)
</td>
<td>

![Example](https://raw.githubusercontent.com/fracht/react-native-input-autofocus/75d9ef95574f1a1b59c3d40fc7845c9a29de6b7d/docs/assets/androidExample.gif)

</td>
</tr>
</tbody>

</table>

## Installation

-   Using npm

```
npm i @alcs/react-native-input-autofocus
```

-   Using yarn

```
yarn add @alcs/react-native-input-autofocus
```

-   Using pnpm

```
pnpm add @alcs/react-native-input-autofocus
```

## Usage

-   Create or add to your `<Input />` component.

```tsx
import React, { useState } from 'react';
import { StyleSheet, TextInput, TextInputProps } from 'react-native';
import { useInputFocusController } from '@alcs/react-native-input-autofocus';

export const Input = (props: TextInputProps) => {
    const focusController = useInputFocusController();

    const [typedValue, setTypedValue] = useState('');

    return (
        <TextInput
            onChangeText={setTypedValue}
            value={typedValue}
            {...focusController}
            {...props}
        />
    );
};
```

-   Wrap component where you want to add auto focus.

```tsx
import React from 'react';
import { Input } from './Input';
import { View } from 'react-native';
import { InputFocusController } from '@alcs/react-native-input-autofocus';

export const YourPage = () => {
    return (
        <InputFocusController>
            <View>
                <Input placeholder="Input 1" />
                <Input placeholder="Input 2" />
                <Input placeholder="Input 3" />
                <Input placeholder="Input 4" />
            </View>
        </InputFocusController>
    );
};
```

## License

MIT © [Aleksandras Bogdanovas <aleksandras.bogdanovas21@gmail.com>](https://github.com/Aleksandriukas)

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