KeyboardSpacer does not work properly with react navigation tab bar

[mikechambers610]

When using the keyboard spacer it will push the textinput up an additional amount (additional amount = height of the tab bar) for both ios and android.

Works great if you aren't using a tab bar.... but most cases the developer likes to use the tab bars.

[arthurCalv]

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

[pulpdood]

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

<KeyboardSpacer topSpacing={-50}/>

[mikechambers610]

Thanks pulpdood I will give it a shot and see how it works.

On Mon, Jun 18, 2018 at 6:26 AM, pulpdood notifications@github.com wrote:

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

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub , or mute the thread .

[hieunc229]

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.

[dextermb]

@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

[ESA2012]

Yet another solution:

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

[CyxouD]

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"

[alansp]

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()} />