Support for iPhone X

I notice when using the default React Navigation TabNavigator the bottom safe area is automatically adjusted for both tab bar height and icons aligned to the top nicely but the moment I plug in tabBarComponent: NavigationComponent it does not and it will overlap with the bottom bar. Is there any support for this? Thanks!

[timomeh]

I added support for iPhone X without SafeAreaView in #76. This issue will be closed when v1.0 will be released.

[ermalkaleci]

@kennyljv @timomeh Easy solution:

import { TabNavigator, SafeAreaView } from 'react-navigation';
import { NavigationComponent } from 'react-native-material-bottom-navigation';

const TabBar = props => (
  <SafeAreaView
    forceInset={{ top: 'never', bottom: 'always', horizontal: 'never' }}
    style={{ backgroundColor: '#fff' }}
  >
    <NavigationComponent {...props} />
  </SafeAreaView>
);

const MainScreen = TabNavigator(
  {
    Tab1: { screen: Screen },
    Tab2: { screen: Screen },
    Tab3: { screen: Screen },
    Tab4: { screen: Screen },
  },
  {
    tabBarComponent: TabBar,
    tabBarPosition: 'bottom',
    },
);