grimor / react-native-keyboard-spacer

Plug and play react-native keyboard spacer view.

react-native-keyboard-spacer

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