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