KeyboardSpacer does not work properly with react navigation tab bar about react-native-keyboard-spacer HOT 8 OPEN

I experienced the issue while applying into an 'absolute' or 'fixed' view. I could be caused by any issue, though I found out that while using 'absolute' or 'fixed' view, the calculation would be missed (similar to this described issue).

I came up with a different method that supports 'absolute', 'fixed' view and publish it on react-native-spacer.

from react-native-keyboard-spacer.

@pulpdood while this works on some devices, it does not seem to work on all. For example I still get bars on Pixel XL 2 and iPhone X when adding -55 on topSpacing

from react-native-keyboard-spacer.

Yeah having the same issue with a grey bar above the keyboard when using a tab bar

from react-native-keyboard-spacer.

I added topSpacing={-50} and it seems to fix the issue:

<KeyboardSpacer topSpacing={-50}/>

from react-native-keyboard-spacer.

from react-native-keyboard-spacer.

Yet another solution:

import { getBottomSpace } from 'react-native-iphone-x-helper';
...
<KeyboardSpacer topSpacing={-getBottomSpace()} />

from react-native-keyboard-spacer.

thanks for direction @ESA2012. For the case of iPhoneX + tab bar. I use:

import { getBottomSpace } from 'react-native-iphone-x-helper';
...
<KeyboardSpacer topSpacing={-(TAB_BAR_HEIGHT + getBottomSpace())} />

It looks like it is exact this value needed

My config:

"react-native": "0.59.10",
"react-navigation": "^3.0.5"

from react-native-keyboard-spacer.

I'm using this for iPhone only (don't have issues on Android), and this combo solved all my problems...

import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';

<KeyboardSpacer topSpacing={-useBottomTabBarHeight()} />

from react-native-keyboard-spacer.