createBottomTabNavigator white space (icon is auto hide) when keyboard show - react-native

Question

React-native application with version:
react#16.9.0
react-native#0.61.2
react-navigation#^4.0.10
react-navigation-stack#^1.10.3
react-navigation-tabs#^2.5.6
I'm trying to make an application with createBottomTabs, when i try to type in TextInput, when the keyboard show, there are bottomtabs with icon, the icon will auto hide, leaving the white space / gap behind on top of the keyboard
my code example :
<SafeAreaView style={
flex: 1,
alignItems: 'center'
}>
<View>
<TextInput />
</View>
</SafeAreaView>
already tried to change SafeAreaView with KeyboardAvoidingView, but the white space/gap is still there.
const MainTabs = createBottomTabNavigator({
Screen1: {
screen: Screen1Stack,
navigationOptions: {
tabBarIcon: Icon
}
},
Screen2: {
screen: Screen2Screen,
navigationOptions: {
tabBarIcon: Icon
}
},
Screen3: {
screen: Screen3Screen,
navigationOptions: {
tabBarIcon: Icon
}
},
Screen4: {
screen: Screen4Screen,
navigationOptions: {
tabBarIcon: Icon
}
},
},
{
tabBarOptions: {
...
showLabel: false
}
}
)

Answer 1

i get the answer from the comment at react navigation tabs github (with title "Bottom tab bars and keyboard on Android #16"), and i will share it here, incase someone experiencing a same issue as me, its answered by #export-mike and detailed by #hegelstad
import React from 'react';
import { Platform, Keyboard } from 'react-native';
import { BottomTabBar } from 'react-navigation-tabs'; // need version 2.0 react-navigation of course... it comes preinstalled as a dependency of react-navigation.
export default class TabBarComponent extends React.Component {
state = {
visible: true
}
componentDidMount() {
if (Platform.OS === 'android') {
this.keyboardEventListeners = [
Keyboard.addListener('keyboardDidShow', this.visible(false)),
Keyboard.addListener('keyboardDidHide', this.visible(true))
];
}
}
componentWillUnmount() {
this.keyboardEventListeners && this.keyboardEventListeners.forEach((eventListener) => eventListener.remove());
}
visible = visible => () => this.setState({visible});
render() {
if (!this.state.visible) {
return null;
} else {
return (
<BottomTabBar {...this.props} />
);
}
}
}
Usage :
const Tabs = createBottomTabNavigator({
TabA: {
screen: TabA,
path: 'tab-a',
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Tab A',
})
},
TabB: {
screen: TabB,
path: 'tab-b',
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Tab B',
})
}
},
(Platform.OS === 'android')
? {
tabBarComponent: props => <TabBarComponent {...props} />,
tabBarPosition: 'bottom'
}
: {
// don't change tabBarComponent here - it works on iOS after all.
}
);