Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-keyboard-spacer with all npm packages installed. Try it out:

var reactNativeKeyboardSpacer = require("react-native-keyboard-spacer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-keyboard-spacer v0.4.1

Plug and play react-Native keyboard spacer view.

NPM

react-native-keyboard-spacer

Plug and play iOS react-native keyboard spacer view.

image

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

PropDefaultTypeDescription
topSpacing0numberAdd or subtract additional spacing from keyboard height
animationConfigA default animationLayoutAnimationConfigLayoutAnimation configuration object

Properties - Methods

PropParamsTypeDescription
onToggletoggleStatefunctiononToggle method is called when when keyboard toggles. Two parameters passed through, keyboardState (boolean, true if keyboard shown) and keyboardSpace (height occupied by keyboard)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free