https://github.com/Andr3wHur5t/react-native-keyboard-spacer

Plug and play react-native keyboard spacer view.
https://github.com/Andr3wHur5t/react-native-keyboard-spacer

clean-code helper ios keyboard react-native

Last synced: about 1 month ago
JSON representation

Plug and play react-native keyboard spacer view.

• Host: GitHub
• URL: https://github.com/Andr3wHur5t/react-native-keyboard-spacer
• Owner: Andr3wHur5t
• License: mit
• Created: 2015-10-12T23:29:34.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-05-03T05:21:03.000Z (over 1 year ago)
• Last Synced: 2024-12-05T10:36:37.965Z (about 1 month ago)
• Topics: clean-code, helper, ios, keyboard, react-native
• Language: JavaScript
• Homepage:
• Size: 28.3 KB
• Stars: 1,562
• Watchers: 13
• Forks: 219
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-keyboard-spacer ★1103 - Plug and play react-Native keyboard spacer view. (Components / UI)
• awesome-reactnative-ui - react-native-keyboard-spacer - native keyboard spacer view.|<ul><li>Last updated : This week</li><li>Stars : 1184</li><li>Open issues : 28</li></ul>|| (Others)
• awesome-react-native - react-native-keyboard-spacer ★1103 - Plug and play react-Native keyboard spacer view. (Components / UI)
• awesome-reactnative-ui - react-native-keyboard-spacer - native keyboard spacer view.|<ul><li>Last updated : This week</li><li>Stars : 1184</li><li>Open issues : 28</li></ul>|| (Others)
• awesome-react-native - react-native-keyboard-spacer ★1103 - Plug and play react-Native keyboard spacer view. (Components / UI)
• awesome-react-native-ui - react-native-keyboard-spacer ★506 - Plug and play react-Native keyboard spacer view. (Components / UI)
• awesome-react-native - react-native-keyboard-spacer ★1103 - Plug and play react-Native keyboard spacer view. (Components / UI)
• awesome-react-native - react-native-keyboard-spacer
• ReactNativeMaterials - react-native-keyboard-spacer

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 (

      

        {/* Some random image to show scaling */}

        

        {/* The text input to put on top of the keyboard */}

        

        {/* The view that will animate to match the keyboards height */}

        

      

    );

  }

}

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) |