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

user_9562314 0
Viewed 1419

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

no keyboard keyboard show

react-navigation react-native
1 Answers

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.
  }
);
user_95623140
Related