Plug and play iOS react-native keyboard spacer view.
Install View: npm install --save react-native-keyboard-spacer
The view will automatically perform a layout animation when the keyboard appears or disappears.
var React = require('react-native');
var KeyboardSpacer = require('react-native-keyboard-spacer');
var {
AppRegistry,
StyleSheet,
Image,
View,
TextInput
} = React;
var DemoApp = React.createClass({
render: function() {
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);
Prop | Default | Type | Description |
---|---|---|---|
topSpacing | 0 | number |
Add or subtract additional spacing from keyboard height |
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) |