Plug and play react-native keyboard spacer view.

Overview

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)
Comments
  • deprecated this package ?

    deprecated this package ?

    as KeyboardAvoidingView is open sourced on RN core - https://github.com/facebook/react-native/commit/8b78846a9501ef9c5ce9d1e18ee104bfae76af2e

    should we deprecated this package?

    question 
    opened by sibelius 13
  • [Warning]`keyboardWillShow` event should be registered via the Keyboard module

    [Warning]`keyboardWillShow` event should be registered via the Keyboard module

    The Latest version of React-native, import the module ‘react-native-keyboard-spacer’ , found a warning keyboardWillShow event should be registered via the Keyboard module,keyboardWillHide event should be registered via the Keyboard module,How to deal with the warning?

    bug 
    opened by zeo112140 10
  • [Android] 0.3.0 Element type is invalid React-Native 0.28.0

    [Android] 0.3.0 Element type is invalid React-Native 0.28.0

    I use this library in a few different screens throughout my app and 0.2.0 was working great in Android 4.4. I recently updated React-Native to 0.28.0 and also upgraded this library to 0.3.0 to handle the Keyboard listener changes, however. Now any screen that uses a gives me a React red screen error with the following message.

    E/ReactNativeJS(15228): Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `SetupScreen`.
    

    And here is the render method of SetupScreen. Note that if I remove the KeyboardSpacer component, everything works. Also, I reverted back to 0.2.0 and just changed the DeviceEventEmitter to Keyboard and then everything worked correctly, the spacer worked properly, and I didn't have any Keyboard warnings popping up either.

    render() {
        return (
          <Image style={styles.bgImg} source={require('./img/thank-bg.jpg')}>
            <View style={styles.scene}>
            <Animatable.View animation='' easing='ease-in' style={styles.modal}>
                <View style={styles.bar}>
                  <Text style={styles.text}>
                    Kiosk: {this.props.kioskloc.name} |
                    Org: {this.props.kioskloc.orgname} |
                    Location: {this.props.kioskloc.locationname}
                  </Text>
                  <Text style={styles.text}>
                    Device ID: {DeviceInfo.mobileDeviceId}  |
                    Serial #: {DeviceInfo.serialNumber}
                  </Text>
                  <Text style={styles.text}>
                    Mode: {this.state.apiMode}
                  </Text>
                </View>
                <View style={styles.modalContent}>
                  {
                    GlobalConfig.isProdMode()
                    ?
                      null
                    :
                      <View>
                        <Text style={styles.h1}>Change API URL</Text>
                        <TextInput
                          ref='apiUrl'
                          style={styles.input}
                          autoFocus={false}
                          autoComplete={false}
                          autoCapitalize={'none'}
                          placeholder={'API URL'}
                          returnKeyType={'next'}
                          value={this.state.apiBaseUrl}
                          onChangeText={value => this.setState({apiBaseUrl: value})}
    
                        />
                        <SmallButton {...this.props} onPress={this.handleSaveApiBaseUrl.bind(this)}
                                                     color={UI.positiveColor}
                                                     label="Save"/>
                      </View>
                  }
                  <Text style={styles.h1}>
                    Change Kiosk or Full Sync
                  </Text>
                  <TextInput
                    ref='kioskName'
                    style={styles.input}
                    autoFocus={false}
                    autoComplete={false}
                    autoCapitalize={'none'}
                    placeholder={'Kiosk Name'}
                    returnKeyType={'next'}
                    value={this.state.kioskName}
                    onChangeText={value => this.setState({kioskName: value})}
    
                  />
                  <SmallButton {...this.props}
                    onPress={this.handleSaveKiosk.bind(this)}
                    color={UI.positiveColor}
                    label={this.props.kioskloc.name != this.state.kioskName ? "Change Kiosk" : "Full Sync"}/>
                  <SmallButton {...this.props}
                    onPress={() => this.props.goHome()} color={UI.primaryColor}
                    label="Cancel"/>
                </View>
              </Animatable.View>
              <KeyboardSpacer/>
            </View>
          </Image>
        );
    
    bug 
    opened by basudz365 7
  • Android behaviour on Samsung Galaxy

    Android behaviour on Samsung Galaxy

    Hi, the package works great both on android and ios, but it acts weirdly on samsung devices. Basically, it seems like <KeyboardSpacer /> is not needed on samsung devices, while necessary on other android devices to move the content away from keyboard.

    Eg. I have a position: absolute element anchored to the bottom of the view, and I'm using a keyboardspacer to keep it attached to the bottom and visible right above the keyboard when the keyboard shows up. If I use the keyboard spacer, it looks right on my Nexus 5, but it pushes the button away from the keyboard on a Samsung Galaxy S6.

    The only solution I came up with is device detection, but I don't think it's a viable solution (I should test every possible android device to ensure the same behaviour).

    Has anyone experienced this same inconsistency?

    opened by desmondhume 5
  • Keyboard Immediately Dismissed on Native Starter Kit

    Keyboard Immediately Dismissed on Native Starter Kit

    I'm using the native-starter-kit as a basis, trying to customize it. On their login/index.js page, I've tried adding <KeyboardSpacer /> between lines 60-61 and between lines 62-63, but in either case the keyboard starts to show and is immediately dismissed.

                <Container theme={theme}>
                    <View style={styles.container}>
                        <Content>
                            <Image source={require('../../../images/shadow.png')} style={styles.shadow}>
                                <View style={styles.bg}>
                                    <InputGroup style={{marginBottom: 20}}>
                                        <Icon name="ios-person" />
                                        <Input placeholder="EMAIL" />
                                    </InputGroup>
                                    <InputGroup style={{marginBottom: 10}}>
                                        <Icon name="ios-unlock-outline" />
                                        <Input
                                            placeholder="PASSWORD"
                                            secureTextEntry={true}
                                        />
                                    </InputGroup>
                                    <Button style={{marginTop: 20, alignSelf: 'center'}} textStyle={{color: '#fff'}} onPress={() => this.replaceRoute('home')}>
                                        Login
                                    </Button>
                                </View>
                            </Image>
                            <KeyboardSpacer />
                        </Content>
                    </View>
                </Container>
    

    opened by geirman 5
  • Deprecation warnings on ReactNative >=25.

    Deprecation warnings on ReactNative >=25.

    https://github.com/facebook/react-native/releases/tag/v0.25.1

    Requiring React API from react-native is now deprecated - 2eafcd4 0b534d1

    Also this will stop working in 0.26. So we had to rewrite imports to avoid warnings.

    opened by andrey-skl 5
  • Animation not Firing

    Animation not Firing

    Thanks for this great plugin.

    I'm having trouble making the animation happen and was wondering if you could help point me in the right directly.

    Currently, the <KeyboardSpacer /> takes up physical height on keyboardWillShow event, but the window doesn't animate towards it.

    Any thoughts? Thanks!

    React Native 0.22.0 iOS 9.1, iPhone 5s (test only)

    opened by nitsujri 5
  • Please show a syntax example of how to use onToggle

    Please show a syntax example of how to use onToggle

    Everything works great, but when I tap in empty space areas above the keyboard and outside the form (in order to dismiss the keyboard as expected by user), the keyboard does not dismiss. I think I can get the keyboard to dismiss if I can see an example of how to use onToggle.

    <KeyboardSpacer onToggle={true} />

    or

    <KeyboardSpacer onToggle={this.state.toggledStatus} />

    neither worked btw

    opened by quadsurf 4
  • Doesn't  take into account auto-correct bar on android

    Doesn't take into account auto-correct bar on android

    Thanks for this component, very nice.

    I'm using it to do some positioning of a absolute element in android. There's a auto correct bar on the top of the keyboard which doesn't seem to be accounted for in the Y direction. The result is that my component appears slightly under the keyboard. Any idea how to find out the height of the auto correct bar?

    opened by npomfret 4
  • Is this library still maintained?

    Is this library still maintained?

    @Andr3wHur5t, this library hasn't been updated for 11 months and there seems to be issues which haven't been resolved.

    Is this package still maintained? I assume not

    opened by dextermb 3
  • Support in Auto-Suggest

    Support in Auto-Suggest

    Hey,

    I'm trying to use this awesome lib, but I'm having some difficulties when the auto-suggest panel is there. Is there any support for that?

    Thanks, Guy

    opened by geldarhb 3
  • ViewPropTypes are deprecated

    ViewPropTypes are deprecated

    Hi! 👋

    Firstly, thanks for your work on this project! 🙂

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js b/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js
    index 14560d8..7ce3aca 100644
    --- a/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js
    +++ b/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js
    @@ -8,10 +8,10 @@ import {
       LayoutAnimation,
       View,
       Dimensions,
    -  ViewPropTypes,
       Platform,
       StyleSheet
     } from 'react-native';
    +import { ViewPropTypes } from 'deprecated-react-native-prop-types';
     
     const styles = StyleSheet.create({
       container: {
    

    This issue body was partially generated by patch-package.

    opened by AlbertoMeQ 0
  • RN 0.68 and ViewPropTypes deprecation

    RN 0.68 and ViewPropTypes deprecation

    Hi! 👋

    Firstly, thanks for your work on this project! 🙂

    Today I used patch-package to patch [email protected] for the project I'm working on.

    It is related to version 0.68 of react-native where the ViewPropTypes import was deprecated.

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js b/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js
    index 14560d8..97933d5 100644
    --- a/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js
    +++ b/node_modules/react-native-keyboard-spacer/KeyboardSpacer.js
    @@ -8,10 +8,10 @@ import {
       LayoutAnimation,
       View,
       Dimensions,
    -  ViewPropTypes,
       Platform,
       StyleSheet
     } from 'react-native';
    +import { ViewPropTypes } from 'deprecated-react-native-prop-types'
     
     const styles = StyleSheet.create({
       container: {
    

    This issue body was partially generated by patch-package.

    opened by onelittlebird 2
  • Error occur on web

    Error occur on web

    Please change line 42

    from: style: ViewPropTypes.style

    into: style: Platform.OS === 'web' ? PropTypes.any : ViewPropTypes.style

    Otherwise there will be a error as follow when displaying on web:

    KeyBoardSpacer.js:42 Uncaught TypeError: Cannot read property 'style' of undefined
    
    opened by JoshL579 0
  • Need to scroll up the screen to see the text input after the keyboard shown below

    Need to scroll up the screen to see the text input after the keyboard shown below

    I used KeyboardSpacer. Here the inputbox hide behind the keyboard and it does not show the inputbox above the keyboard. I need to scroll up the screen

    opened by nihp 0
  • Problems on some Android models

    Problems on some Android models

    There are Android models that have the so-called monobrow, on all these models "keyboard-spacer" does not work correctly.

    keyboard on top of input

    изображение
    opened by lordenas 5
Releases(v4.0)
Owner
Andrew Hurst
I build things...
Andrew Hurst
A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

react-native-keyboard-accessory A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. Expo Snack Playground https:

Arda Pektaş 458 Sep 26, 2022
"Rate us on Google Play/Play Store" modal with React Native.

react-native-rate-modal "Rate us on Google Play/Play Store" modal with React Native. Example usage You can pass different functions for each star, so

Omer Gulen 11 May 14, 2020
⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

React-Native Keyboard Manager Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ⚛ . Thanks to awesome IQK

Douglas Nassif Roma Junior 697 Sep 22, 2022
Keyboard events for react-native

react-native-keyboardevents Keyboard events for react-native As of react-native 0.11 this module is obsolete. Now you can do something like the follow

Johannes Lumpe 247 Apr 16, 2022
A Virutal Screen keyboard implementation for React-Native

React Native Screen Keyboard is a virutal screen keyboard implementation for React Native. It is fully customizable, the last row of the keys can be completely customized or changed to fit perfectly with your projects.

Usman Hassan 2 Sep 11, 2022
🚀 Organize your games easily. Create groups to play your favorite games with your friends.

?? Introduction ?? Technologies This project was developed using the following technologies: React Native Expo ??️ Features OAuth2 Social Authenticati

Tundê Cavalcante 3 Sep 10, 2021
React Native: Native Siri Wave View

ReactNative: Native Siri Wave View (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can s

Pranav Raj Singh Chauhan 137 Jul 20, 2022
Local and remote media gallery with captions, selections and grid view support for react native.

React Native Photo Browser Information A full screen image gallery with captions, selections and grid view support for react-native. Layout and API de

Halil Bilir 717 May 31, 2022
📱⚛ 🔄 The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.

?? About ?? Getting started ?? Usage ?? Properties ?? Demo ?? Contributing ?? License About People want to see all the details of a product before the

Rodrigo Gonçalves S. 121 Sep 20, 2022
Responsive Grid View for React Native

React Native Super Grid Responsive Grid View for React Native. Getting Started This library export two components - FlatGrid (similar to FlatList) and

Saleel 1.2k Sep 19, 2022
React Native PDF View

react-native-pdf-view React Native PDF View (cross-platform support) Breaking changes React native 0.40 moved iOS headers, thus all iOS react import s

Jon 400 Jul 25, 2022
React Native Grid/Collection View component

react-native-grid-view THIS PROJECT IS NO LONGER MAINTAINED, PLEASE GRAB THE SOURCE CODE AND TAKE OWNERSHIP IN YOUR OWN PROJECT IF YOU FIND IT USEFUL.

Luis Floreani 281 Jul 12, 2022
Parallax scroll view for react-native

react-native-parallax-scroll A ScrollView-like component that: Has a parallax background Has a parallax foreground Has a fixed or sticky header Can be

Monterosa 480 Sep 14, 2022
Segmented View for React Native (with animation)

react-native-segmented-view Segmented View for React Native (with animation) Demo Example <SegmentedView titles={["First", "Second", "Third"]}

Leland Richardson 184 Nov 27, 2021
A react native scroll view component with Parallax header :p

RNParallax (react-native-parallax-header) A react native scroll view component with Parallax header :p Inspired by GitHub - jaysoo/react-native-parall

Carol 515 Sep 19, 2022
circle progress bar for react native android using circle-view

react-native-circle-view circle progress bar for react native android using circle-view Installation and How to use Step 1 - NPM Install npm install -

Igor Adrov 37 Dec 17, 2021
Slidable tab bar for react native with instant view rendering

react-native-slidable-tab-bar Easily pass views into an organized view selector with a scrollable tab bar Demo Add it to your project Run 'npm install

Philip Brown 41 Dec 20, 2021
A lightweight View component for React Native

react-native-view A lightweight View component that can be styled quickly. Installation $ npm install react-native-view --save then import View from '

Alexander Vitanov 39 Oct 25, 2021