React-native-keyboard-aware-scroll-view: 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();

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

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.