# react-native-input-accessory-view

> an universal input accessory view for Android and iOS

Latest version **0.4.0** (published 2023-08-24) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2023-08-24 |
| First published | 2022-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Hoang Lam |
| Maintainers | hlam104 |
| Keywords | react-native, input-accessory-view, input-accessory-view android, input-accessory-view-ios |

## Links

- npm: https://www.npmjs.com/package/react-native-input-accessory-view
- Repository: https://github.com/hoanglam10499/react-native-input-accessory-view
- Homepage: https://github.com/hoanglam10499/react-native-input-accessory-view#readme
- Issues: https://github.com/hoanglam10499/react-native-input-accessory-view/issues
- npm.io page: https://npm.io/package/react-native-input-accessory-view

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2023-08-24
- 0.3.0 — 2022-06-20
- 0.2.0 — 2022-06-14
- 0.1.0 — 2022-06-14

## README

![React Native Input Accessory View](background.jpg)

## React Native Input Accessory View

[![Version][version-badge]][package]

[version-badge]: https://img.shields.io/npm/v/react-native-input-accessory-view
[package]: https://www.npmjs.com/package/react-native-input-accessory-view

An universal [InputAccessoryView](https://reactnative.dev/docs/inputaccessoryview) for Android and iOS

## Installation

```sh
yarn add react-native-input-accessory-view
```

If you don't have those already, you will also need to install the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) and [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)

```sh
yarn add react-native-reanimated
yarn add react-native-safe-area-context@4.7.1
```

## Usage

```js
import InputAccessoryView from 'react-native-input-accessory-view';
// ...

return (
  <>
    <SafeAreaView style={styles.container}>
      <View style={{ height: 55, backgroundColor: 'blue', width: '100%' }}>
        <TextInput style={{ flex: 1, padding: 0 }} />
      </View>
    </SafeAreaView>
    <InputAccessoryView
      spaceHeight={100}
      extraHeight={0} //? optional
      renderView={() => (
        <View
          style={{
            flex: 1,
            backgroundColor: 'blue',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: 'red' }}>hello</Text>
        </View>
      )}
    />
  </>
);

// ...
```

See the [example app](./example/src/App.js) for full usage details.

## License

MIT

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