Extra padding after keyboard was shown

[JGuscins]

Hi,

I have one small issue, not sure if it my fault our it is an bug.

Bug appears only after keyboard has been shown. It adds extra padding/margin in top. Gifs below:

This is real padding before keyboard has shown:

And this is after keyboard has been shown:

Code for this:

index.ios.js

import React, { Component } from 'react';

import {
  AppRegistry,
  Navigator,
  Text,
  StyleSheet,
  StatusBar,
  View
} from 'react-native';

import Login from './components/login';

export default class app extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="default"
          translucent={true}
        />
        <Navigator
          initialRoute={{ name: 'Login', title: 'Login', component: Login, navigationBarHidden: true }}
          renderScene={(route, navigator) => {
            return <route.component navigator={navigator}/>;
          }}
          navigationBar={
             <Navigator.NavigationBar
               routeMapper={{
                 LeftButton: (route, navigator, index, navState) => {
                   return null;
                 },
                 RightButton: (route, navigator, index, navState) => {
                   return null;
                 },
                 Title: (route, navigator, index, navState) => {
                   return (
                     <Text style={styles.navigationBarText}>{route.title}</Text>
                   );
                 }
               }}
               style={styles.navigationBar}
               navigationStyles={Navigator.NavigationBar.StylesIOS}
             />
          }
        />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  navigationBar: {
    backgroundColor: 'red'
  },
  navigationBarText: {
    marginVertical: 10,
    fontSize: 16,
    fontWeight: '700'
  }
});

AppRegistry.registerComponent('app', () => app);

login.js

import React, {Component} from 'react';

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview'

import {
  Text,
  StyleSheet,
  TextInput,
  View,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native';

import Register from './register';

class Login extends Component {
  render() {
    return (
      <View style={styles.View}>
        <KeyboardAwareScrollView keyboardDismissMode="interactive" keyboardShouldPersistTaps={true} getTextInputRefs={() => {
          return [this._firstNameTI, this._lastNameTI, this._countryTI, this._stateTI, this._addrTI, this._emailTI, this._msgTI, this._notesTI];
        }}>
          <TextInput style={styles.TextInput} placeholder={'First Name'} ref={(r) => { this._firstNameTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._lastNameTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Last Name'} ref={(r) => { this._lastNameTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._countryTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Country'} ref={(r) => { this._countryTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._stateTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'State'} ref={(r) => { this._stateTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._addrTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Address'} ref={(r) => { this._addrTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._emailTI.focus()}/>
          <TextInput style={styles.TextInput} keyboardType="email-address" placeholder={'Email'} ref={(r) => { this._emailTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._msgTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Message'} ref={(r) => { this._msgTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._notesTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Notes'} ref={(r) => { this._notesTI = r; }} returnKeyType={'go'}/>
        </KeyboardAwareScrollView>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  View: {
    flex: 1,
    paddingTop: 64
  },
  TextInput: {
    borderWidth: 1,
    height: 40,
    marginTop: 5,
    marginLeft: 5,
    marginRight: 5,
    paddingHorizontal: 5
  }
});

export default Login

[superandrew213]

Having the same issue. Looks like the same height of the StatusBar. If you hide the StatusBar the extra space goes away. Must be related to the StatusBar somehow

[pcofilada]

Got same issue. Any fix on this?

[superandrew213]

@pcofilada I ended up wrapping ScrollView with KeyboardAvoidingView and it's working fine.

[pcofilada]

No luck for me. I still got an extra padding.

[FlaviooLima]

Hi there, in KeyboardAwareScrollView.js of this librarie, remove
contentInset={{bottom: this.state.keyboardHeight}}
from the ScrollView Component.

This solved the issue for me

[shakyShane]

anyone else struggling with this, it is indeed a problem with the StatusBar. If your app does NOT hide the status bar, you'll need something along the lines of shakyShane@37db7cc

I just made a new prop statusBar that indicates whether or not my status bar is visible (as there's no way to retrieve this programmatically, to the best of my knowledge on iOS)

[esganzerla]

I am having the same issue.

@shakyShane it seems better than just leaving that blank space, but it also move the content up by 20px.

About programmatically identifying the statusBar on iOS, apperantly you can do this:

import { NativeModules } from 'react-native'
const { StatusBarManager } = NativeModules

let statusBarHeight
StatusBarManager.getHeight(
  (statusBarFrameData) => {
    statusBarHeight = statusBarFrameData.height;
  }
);

source: https://github.com/jgkim/react-native-status-bar-size/blob/master/StatusBarSizeIOS.js

[esganzerla]

I tried to find a solution for a long time, but I could not find why it happens, I see this react-native-keyboard-aware-scroll-view has the same problem though.

Anyway, I found a workaround. Definitely not the best solution, but it works for now:

KeyboardAwareScrollView.js (line 13)

contentInset={{bottom: this.state.keyboardHeight, top: this.state.top || 0}}

KeyboardAwareBase.js (line 115)

this.setState({keyboardHeight: 0, top: -20});

This will include the state to set top to -20 when keyboard hide (that is the moment it creates the spacing), otherwise it will still be 0.

[petejkim]

You don't need all these hacks, just add automaticallyAdjustContentInsets={false}.

[shakyShane]

@petejkim Thanks! That works perfectly!

[nihp]

@petejkim
Your solution not worked for me automaticallyAdjustContentInsets={false}

[nihp]

I also blocked with this for a long time. Did not found any solution yet

[nihp]

This get resolved.

But I have a clarification question. I have a inputbox at the end of the screen and if i type a letter means it will shows a dropdown. Keyboard hides the dropdown in my case.

Can anyone give any solution for this

[Juanjo4U]

in react native if you set StatusBar hidden={true} you will get this problem, the solution is just to quit it. I found it out here: facebook/react-native#13000
I hope it helps

[SteFF1997]

Already fixed at https://github.com/SteFF1997/react-native-keyboard-aware-scrollview