Neodymium Plated Magnet

    react-native-keyboard-spacer
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-keyboard-spacer package

    0.4.1 • Public • Published

    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

    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)

    Install

    npm i react-native-keyboard-spacer

    DownloadsWeekly Downloads

    18,162

    Version

    0.4.1

    License

    MIT

    Last publish

    Collaborators

    • andr3whur5t