Support for iPhone X

[kenljv]

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]

At the moment you could achieve this by checking if the device is an iPhone X and using innerStyle with an appropriate paddingBottom.

[Ehesp]

Easy fix (RN 50+):

import { SafeAreaView } from 'react-native';
...
render() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      // rest of your app goes here
    </SafeAreaView>
  );
}

[kenljv]

Thanks @timomeh and @Ehesp for the suggestion. I'll try that out. Also I read that it's not possible to do custom styling i.e. change font size for the tab titles? This is because on iOS it does appear a bit too large.

[keeleycarrigan]

@kennyljv @timomeh I actually worked out a solution to that title custom styling locally recently just messing around but hadn't gotten around to making a PR. I will try to get one soon if @timomeh is cool with it.

[timomeh]

@keeleycarrigan Of course, contributions are always welcome. ❤️

[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',
    },
);

[timomeh]

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

[timomeh]

Closed with v1.0.0 ✨