extra bottom space

[donmezemre]

Reproduce

Problem when we focused a text input and scroll to bottom, an extra space is added at the bottom. besides that, android and ios behaves different.

Questions why does this happen? how to avoid from this behave?

and thank you

Code That I Used*

[aleciogomes]

Your Android issue might be related with your android:windowSoftInputMode in your AndroidManifest.xml. It seems to be adding double keyboard-height padding. Also, is there any reason to use enabledOnAndroid? Android seems to handle well these kind of situations without any configuration.

The iOS extra value seems to be the bottom SafeAreaInset. Not sure why, tho. (It seems the same height value os the pink bottom area).

[donmezemre]

for android: android:windowSoftInputMode was adjustResize by default. but if i use this default value the keyboard focus losing suddenly when the text input focused. I had to change adjustPan to avoid lose focus.

[Soliman13]

Is this issue still being tracked? As I encounter the same issue.

[donmezemre]

i am telling with sadness, yes

[devinjameson]

Having the same issue on iOS.

[devinjameson]

This may be a safe area inset issue on iOS. You may be able to get the bottom safe area from a library like react-native-static-safe-area-insets and set the extraScrollHeight to the negative of that value.

[WhidRubeld]

At the moment disabling android insert will solve this problem enableOnAndroid={false}

[galbenyosef]

This may be a safe area inset issue on iOS. You may be able to get the bottom safe area from a library like react-native-static-safe-area-insets and set the extraScrollHeight to the negative of that value.

try import { useSafeAreaInsets } from 'react-native-safe-area-context'; let insets = useSafeAreaInsets();

<KeyboardAwareScrollView extraScrollHeight={-insets.bottom} contentContainerStyle={{ flexGrow: 1 }} .../>

occurs only on ios works for me.

[devinjameson]

This may be a safe area inset issue on iOS. You may be able to get the bottom safe area from a library like react-native-static-safe-area-insets and set the extraScrollHeight to the negative of that value.

try

import { useSafeAreaInsets } from 'react-native-safe-area-context';

let insets = useSafeAreaInsets();

<KeyboardAwareScrollView

extraScrollHeight={-insets.bottom}

contentContainerStyle={{ flexGrow: 1 }}

.../>

occurs only on ios

works for me.

@galbenyosef This looks great. If you want to avoid using a hook (no need for a hook in this case, it's just a static value), you can use react-native-static-safe-area-insets to grab the bottom inset.

[lucasriondel]

@devinjameson 's solution worked perfectly. thanks a lot !

[svmszcck]

On Android try to set extraHeight to 0(According to the docs Default is 75)

[Chifaa-Bouzid]

@devinjameson's solution worked perfectly fine for me, thanks a lot. I just modified it a bit to correspond to how I want it to look --> extraScrollHeight={-(insets.bottom)*2.3}

[bombillazo]

Adding to the solution provided previously, I use useBottomTabBarHeight() + a custom useKeyboardHeight() hook:

extraScrollHeight={-(keyboardHeight + bottomTabBarHeight)}

[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!

[vishalrathod817]

extraScrollHeight={-insets.bottom} contentContainerStyle={{ flexGrow: 1 }}

this working for me.... thanks

[Nidhi-Kayasth-RXO]

You need to set these properties to remove extra spacing. This is working for me.

<KeyboardAwareScrollView automaticallyAdjustContentInsets={true} keyboardShouldPersistTaps='always' scrollEventThrottle={10} resetScrollToCoords={{ x: 0, y: 0 }} contentInset={{ top: 0, bottom: 0 }}