andr3whur5t / react-native-keyboard-spacer Goto Github PK

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>

Hey there, great component you guys have built! thanks.

I was wondering if it'd be possible to close the keyboard when you swipe from top to bottom, as Whatsapp does.

Thanks.

I've been using this component for a couple months and noticed a strange issue. I have a navigator scene that allows keyboard input, and the spacer shows when the keyboard is displayed (as it should). However, that same scene allows the user to click on other touchable items to navigate to another scene (not unmounting this scene).

When the user navigates back, KeyboardSpacer no longer hears keyboard events and if the user touches the text input field, the spacer doesn't engage and is hidden behind the keyboard. I confirmed that the KeyboardSpacer does not unmount with some simple debug logging. Any idea what's going on?

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?

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.

THe library works perfectly find except on Android nougat. On android nugget when the keyboards opened then react native readjusts the view accordingly instead of having the view blocked by the keyboard.
So the library adds an additional keyboard space on top the keyboard as below:

Is there anyway to fix this?

@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

I appreciate your help to resolve the error of the library I am following the same implementation example.

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

Hey there. I'm unclear as what this spacer does exactly. Here

      <View style={[{backgroundColor: 'green', flex: 1}]}>
        <TextInput style={{backgroundColor: 'yellow', flex: 1}}/>
        <View style={{backgroundColor: 'red', left: 0, right: 0, height: 5}}/>
        <KeyboardSpacer/>
      </View>

I would understand if KeyboardSpacer were between the textinput and view then I would assume the view ends up at the bottom as the spacer grows to all the space available. But what actually renders in the example code?

@Andr3wHur5t Is it possible to get the height of the smaller view that is created once the keyboard is displayed?

When using keyboardDismissMode="interactive" in a ScrollView/ListView spacer does not resize as keyboards hides.

I guess this is because it only responds to show/hide events and listen to their coordinates to set its size.

Is there any other event this view can listen to update its size as keyboard hides?

Heres a gif to demonstrate what behavior I'm referring to:

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

The component doesn't resize itself when keyboard is shown 😢

Edit: seems to be an issue with RN facebook/react-native#3468

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?

One of my components changes state in order to render an InputText, the state change handler has set LayoutAnimation.configureNext to animate this state transition. It seems like this is being fired at the same time KeyboardSpacer animates itself, throwing the next warning:

Warning: Overriding previous layout animation with new one before the first began

Both animations (spacer and my component's state change) render without issues.

Is there a way to avoid this?

I added TextInput in Scrollview and I found that Keyboard obscures TextInput.
<ScrollView> <View> ....... </View> <TextInput/> <KeyboardSpace/> </ScrollView>

When the keyboard is brought up, the animation moves everything down instead of up! The opposite of what is desired...

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？

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

animationConfig prop isn't being used anywhere. We need to change the animationConfig to be as follows:

let animationConfig = this.props.animationConfig || defaultAnimation;

When starting the iOS prod build, it crashes with this error in the console:
[error][tid:com.facebook.react.JavaScript] undefined is not an object (evaluating 'p.View.propTypes.style')

Debug builds are fine.

as KeyboardAvoidingView is open sourced on RN core - facebook/react-native@8b78846

should we deprecated this package?

my problem its when i when i touch the input the padding of the keyboard came before the keyboard

you can see in this gif

<View style={{flex:1}}>
      <View style=
       {{backgroundColor:"green",height:60,justifyContent:"center",alignItems:"center"}}>
        <Text>yotav try</Text>
      </View>

      <ListView
        style={{backgroundColor:'black'}}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <RegBubble>{rowData}</RegBubble>}
      />

      <TextInput style={{height:50}}/>
      <KeyboardSpacer/>
    </View>

If content is larger than screen height, you should be allowed to scroll, or at least allow user to specify behaviour

My component layout looks like this:

<View>
     <ScrollView> ... </ScrollView>
     <MessageInput />
     <KeyboardSpacer />
</View>

It looks like the children inside the ScrollView get cut off while the KeyboardSpacer is sliding up.

Here is a gif

When using the keyboard spacer it will push the textinput up an additional amount (additional amount = height of the tab bar) for both ios and android.

Works great if you aren't using a tab bar.... but most cases the developer likes to use the tab bars.

Actual result:
The keyboardSpace is taking too much when external physical keyboard is connected.

External physical keyboard could be simulated as well with the following method:

1. Create an example iOS project with project setting -> Deployment Info -> Devices set to "Universal";
2. Run on iPad simulator, make sure simulator setting -> Hardware -> Keyboard has set to be:
   ✓ Use the Same Layout as OSX
   ✓ Connect Hardware Keyboard

Reason:
frames.endCoordinates deviation from screenHeight does not necessarily equal to virtual keyboard height.
When external physical keyboard is connected, only the keyboard toolbar is showing if there should be one.
The keyboard frame is located offscreen and could be glimpsed only during rotation.

using this type of layout:-

      <View style={{flex: 1}}>
        <MasterNav/> <--- that's a scrollview with login boxes
        <KeyboardSpacer/>
      </View>

When the keyboard is dismissed, if the scrollview is at the very bottom, the scrollview resizes, but doesn't scroll back - the bottom of it's content is where the top of the keyboard is, as soon as you drag it a little bit, it corrects itself.

I presume scrollview has a special case for being at the bottom maybe, if so can it be triggered to do a refresh?
After dismissing:

After I updated the package from version 0.2.0 to 0.3.0, the error shown as title popped out in my 0.26.1 React Native. It was no error if I use version 0.2.0 in 0.26.1 React Native.

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

After upgrading to RN29 react-native-keyboard-spacer causes my textInput field to use the entire window height.

Any suggestions?

when i click on send messege button then it's working on double press on button .first button hide the keyboard and second send the text from text field. how i can send it on single click. this is my source code.

<ScrollView style={{backgroundColor: '#F4F4F4'}} onScroll={this.scroll}>
{data}

            <View style={{backgroundColor:"#F4F4F4",flexDirection: 'row',paddingLeft:5,paddingBottom:5,height:SCREEN_HEIGHT*7/100}}>
              <TextInput 
                multiline={true}
                defaultValue={this.state.post}
                returnKeyType='done'
                maxLength={500} 
                onChangeText={(post) => {this.setState({post});}}
                style={{backgroundColor: '#ffffff',
                  marginTop: 5,
                  paddingLeft: 15,
                  paddingRight: 15,
                  marginLeft:screen.width/100*3, 
                  width:screen.width/100*78,
                  fontSize:screen.width/100*4,
                  color:'gray'}} 
                placeholderTextColor="gray"
                onSubmitEditing={(event) => this.postComment()} 
                placeholder='Write a comment'/>
                <TouchableOpacity onPress={()=>{this.postComment()}}>
                  <Thumbnail square style={{marginLeft:8,marginTop:8,width:screen.width/100*7,height:screen.height/100*4}} source={send}/>
                </TouchableOpacity>
            </View>
          <KeyboardSpacer/>

Keyboard is not found did you mean DeviceEventEmitter?

The input is remain under the keyboard when I try to change it.

please add release notes with react native compatibility versions

I think it is worth to add which version of this package is compatible with which version of react native

Keyboard overlaps Text Input multine once you start typing.

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

On Android, view height is decreased by android itself when open keyboard. So here KeyboardSpacer not needed.

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.

In ios working fine

In android i ahve a problem (like hiding navigator)

I'm working on a standard for displaying version support on React-Native module README files. I would love your feedback: react-native-version-support-table

pleese remove style: ViewPropTypes.style, error when release build in ios

facebook/react-native#16542

When using the spacer I get a yellow warning with the following

#23 does not seem to have been resolved

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

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)

Seems you've left in a console log (it happens). :D

I know I can just go in the node module and do it myself but I'm on a team with other developers and we don't want to start adding node modules to our commits.

'!!!!', { easing: 'easeInEaseOut',
duration: 0,
endCoordinates: { height: 291, screenX: 0, width: 375, screenY: 521 },

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.

Hey, any support for multilines that adapt to the content height? I've got a listener on my TextInput that will adjust itself based on the content height. The KeyboardSpacer doesn't appear to adjust height based on the new height of the multiline.

After i upgraded react native to last version, react-native-keyboard-spacer started to crash application because after react changes Proptypes is now can not be imported from react directly. You need install another package as described here https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html. I was able to fix it by changing package files directly, but it is bad idea for a lot of reasons