Plug and play react-native keyboard spacer view.
Switch branches/tags
Clone or download
Latest commit 83636c1 Oct 8, 2017
Failed to load latest commit information.
.gitignore Added keyboard spacer. Oct 12, 2015
KeyboardSpacer.js Fixes crash using Release mode on 0.49 Oct 4, 2017
LICENSE Initial commit Oct 12, 2015 Update example and gif. Jun 21, 2016
package.json Bump version. Oct 8, 2017



Plug and play iOS react-native keyboard spacer view.


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.

import KeyboardSpacer from 'react-native-keyboard-spacer';
import React, { Component } from 'react';
import {
} from 'react-native';

class DemoApp extends Component {
  render() {
    return (
      <View style={[{flex: 1}]}>
        {/* Some random image to show scaling */}
        <Image source={{uri: '', 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 */}

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