# react-native-keyboard-spacer

> Plug and play react-Native keyboard spacer view.

Latest version **0.4.1** (published 2017-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-keyboard-spacer
pnpm add react-native-keyboard-spacer
yarn add react-native-keyboard-spacer
bun add react-native-keyboard-spacer
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2017-10-08 |
| First published | 2015-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-keyboard-spacer) |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1572 |
| Author | Andrew Hurst |
| Maintainers | andr3whur5t |
| Keywords | react-component, react-native, ios, keyboard, spacer |

## Links

- npm: https://www.npmjs.com/package/react-native-keyboard-spacer
- Repository: https://github.com/Andr3wHur5t/react-native-keyboard-spacer
- Homepage: https://github.com/Andr3wHur5t/react-native-keyboard-spacer#readme
- Issues: https://github.com/Andr3wHur5t/react-native-keyboard-spacer/issues
- npm.io page: https://npm.io/package/react-native-keyboard-spacer

## Recent versions

- 0.4.1 (latest) — 2017-10-08
- 0.4.0 — 2017-09-26
- 0.3.1 — 2016-12-11
- 0.3.0 — 2016-06-21
- 0.2.0 — 2016-05-10
- 0.1.6 — 2016-03-27
- 0.1.5 — 2016-03-27
- 0.1.4 — 2016-02-29
- 0.1.3 — 2015-12-09
- 0.1.2 — 2015-10-18
- 0.1.1 — 2015-10-16
- 0.1.0 — 2015-10-13

## README

[![NPM](https://nodei.co/npm-dl/react-native-keyboard-spacer.png?months=3&height=2)](https://nodei.co/npm/react-native-keyboard-spacer/)

# react-native-keyboard-spacer

Plug and play iOS react-native keyboard spacer view.

![image](https://media.giphy.com/media/3oEjHJwLyYg7upTyYo/giphy.gif)
## Quick Start

Install View: `npm install --save react-native-keyboard-spacer`

## Example Usage

The view will automatically perform a layout animation when the keyboard appears or disappears.

```javascript
import KeyboardSpacer from 'react-native-keyboard-spacer';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  View,
  TextInput
} from 'react-native';

class DemoApp extends Component {
  render() {
    return (
      <View style={[{flex: 1}]}>
        {/* Some random image to show scaling */}
        <Image source={{uri: 'http://img11.deviantart.net/072b/i/2011/206/7/0/the_ocean_cherry_tree_by_tomcadogan-d41nzsz.png', static: true}}
                 style={{flex: 1}}/>

        {/* The text input to put on top of the keyboard */}
        <TextInput style={{left: 0, right: 0, height: 45}}
              placeholder={'Enter your text!'}/>

        {/* The view that will animate to match the keyboards height */}
        <KeyboardSpacer/>
      </View>
    );
  }
}

AppRegistry.registerComponent('DemoApp', () => DemoApp);
```
### Properties - Basic

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| topSpacing | 0 | `number` | Add or subtract additional spacing from keyboard height |
| animationConfig | [A default animation](https://github.com/Andr3wHur5t/react-native-keyboard-spacer/blob/expose-layout-animations/KeyboardSpacer.js#L14) | `LayoutAnimationConfig` | [LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation.html#content) configuration object |

### Properties - Methods

| Prop  | Params  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| onToggle | `toggleState` | `function` | onToggle method is called when when keyboard toggles. Two parameters passed through, keyboardState (boolean, true if keyboard shown) and keyboardSpace (height occupied by keyboard) |

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