extraScrollHeight cause bottom empty space

[andrej-kuznetsov]

I have bottom empty space, it cause extraScrollHeight

"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native": "0.55.4",

My code

<KeyboardAwareScrollView
    style={ { flex: 1 } }
    extraScrollHeight={ this.props.extraScrollHeight }
    keyboardShouldPersistTaps='handled'
    contentContainerStyle={ { width: responsiveWidth(100) } }
    enableOnAndroid
>
// CONTENT
</KeyboardAwareScrollView>

[andrej-kuznetsov]

In case double tap for hiding keyboard

[andrej-kuznetsov]

For me, the quickest fix is to pass scrollEnabled={ false }.But it forbid user to scroll, it just suitable fix for my case, and it isn't properly way of fixing this bug.

[mdnahian]

any update on this?

[SaltySammy]

I don't think it's related to extraScrollHeight I've got this problem without the extraScrollHeight property.

[OsamaSaleem95]

same problem here

[ataschz]

Any solution for this problem? Here, the same problem :(

[DIMASIK1502]

The library adds padding. I just edit that lines in render method(KeyboardAwareHOC.js), it solved my problem. But this is not the best way.

 if (Platform.OS === 'android' && enableOnAndroid) {
        newContentContainerStyle = [].concat(contentContainerStyle).concat({
          paddingBottom:
            ((contentContainerStyle || {}).paddingBottom || 0) +
            this.state.keyboardSpace
        })
      }

to

 if (Platform.OS === 'android' && enableOnAndroid) {
        newContentContainerStyle = [].concat(contentContainerStyle).concat({
          paddingBottom:
            ((contentContainerStyle || {}).paddingBottom || 0)
        })
      }

[duyenhang]

You don't need change in Lib, you can add this line to KeyboardAwareFlatList contentContainerStyle={Platform.OS == 'android' ? { paddingBottom: -this.state.keyboardHeight } : {}}

[jsam6]

Any solution found yet?

I've been experiencing this issue on android. Nothing to do with scrollHeight but it only happens when i add enableOnAndroid={true}

[jsam6]

I've found the solution for this problem (at least for my case).

I added style = {{ flex: 1, minHeight: Dimensions.get('window').height }} to KeyboardAwareScrollView.

[dkoprowski]

I've the same issue. Both iOS & Android are affected.

[jsam6]

@dkoprowski try using native-base instead

import { Content } from 'native-base';

<Content extraScrollHeight={heightofkeyboard}  enableOnAndroid>
// children
</Content>

[darkhorse-coder]

In ScrollView, flex properties will be applied by contentContainerStyle.

<KeyboardAwareScrollView
        contentContainerStyle={{flex: 1}}
>

It will help you.

[devinjameson]

Maybe this will help: https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/289#issuecomment-777094398

[raffibag]

In ScrollView, flex properties will be applied by contentContainerStyle.

<KeyboardAwareScrollView
        contentContainerStyle={{flex: 1}}
>

It will help you.

Worked perfectly for me. Not sure why it got two thumbs down...

[alecdewitz]

Found a fix, use:

<KeyboardAwareScrollView
    contentInset={{ top: 0, bottom: 0 }}
>

[SrikanthNandanaboina]

  const [contentBottom, setContentBottom] = useState(0);

      <KeyboardAwareScrollView
          style={{
            flex: 1,
            backgroundColor: Color.white,
          }}
          keyboardOpeningTime={0}
          extraScrollHeight={150}
          enableResetScrollToCoords
          onKeyboardWillHide={() => setContentBottom(0)}
          onKeyboardWillShow={() => setContentBottom(200)}
          contentInset={{ bottom: contentBottom }}
        >

This solution might help. Add the values that are suitable for bottom

[kitkatMielPineda]

  const [contentBottom, setContentBottom] = useState(0);

      <KeyboardAwareScrollView
          style={{
            flex: 1,
            backgroundColor: Color.white,
          }}
          keyboardOpeningTime={0}
          extraScrollHeight={150}
          enableResetScrollToCoords
          onKeyboardWillHide={() => setContentBottom(0)}
          onKeyboardWillShow={() => setContentBottom(200)}
          contentInset={{ bottom: contentBottom }}
        >

This solution might help. Add the values that are suitable for bottom

This works tested on iPhone 13 and iPhone 13 Pro Max but not on iPhone SE (3rd generation)

[kitkatMielPineda]

I got a solution on this.. Tested on iPhone 13, iPhone 13 Pro Max, iPhone 6s, iPhone SE (3rd generation) and android.

try:

import React, {useEffect, useState} from 'react';
import { useWindowDimensions} from 'react-native';
import useKeyboardHeight from 'react-native-use-keyboard-height'


  const [contentBottom, setContentBottom] = useState(0);
  const [keyboardActive, setKeyboardActive] = useState(false)

  const {height} = useWindowDimensions()
  const keyHeight = useKeyboardHeight()

  useEffect(()=>{  
    if (keyboardActive){
      const diff = (parseFloat((height - keyHeight)/2))
      setContentBottom(diff)
    } else{
      setContentBottom(0)
    }
  },[keyHeight, keyboardActive]
  
<KeyboardAwareScrollView
            keyboardOpeningTime={0}
            enableResetScrollToCoords
            onKeyboardWillHide={() => setKeyboardActive(false)}
            onKeyboardWillShow={()=>setKeyboardActive(true)}
            contentInset={{ bottom: contentBottom }}
            automaticallyAdjustKeyboardInsets={true}
            automaticallyAdjustContentInsets={false}
          >

Previous

with extra white space at the bottom of the background image and before the keyboard for iPhone 13

Changes

no extra white space anymore

goodnight everyone!