Added padding to tab bar bottom for iPhoneX devices

App.js

@@ -17,6 +17,7 @@ import URLHandler from "./src/utils/URLHandler";
 import {setSafeBounceHeight} from "react-navigation-collapsible";
 import SplashScreen from 'react-native-splash-screen'
 import {OverflowMenuProvider} from "react-navigation-header-buttons";
+import {SafeAreaProvider} from "react-native-safe-area-context";
 
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
 // Crashes app when navigating away from webview on android 9+
@@ -192,12 +193,16 @@ export default class App extends React.Component<Props, State> {
                 <PaperProvider theme={this.state.currentTheme}>
                     <OverflowMenuProvider>
                         <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
-                            <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
-                                <MainNavigator
-                                    defaultHomeRoute={this.defaultHomeRoute}
-                                    defaultHomeData={this.defaultHomeData}
-                                />
-                            </NavigationContainer>
+                            <SafeAreaProvider
+                                edges={['bottom']}
+                            >
+                                <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
+                                    <MainNavigator
+                                        defaultHomeRoute={this.defaultHomeRoute}
+                                        defaultHomeData={this.defaultHomeData}
+                                    />
+                                </NavigationContainer>
+                            </SafeAreaProvider>
                         </View>
                     </OverflowMenuProvider>
                 </PaperProvider>

src/components/Tabbar/CustomTabBar.js

@@ -3,7 +3,8 @@ import {withTheme} from 'react-native-paper';
 import TabIcon from "./TabIcon";
 import TabHomeIcon from "./TabHomeIcon";
 import {Animated} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
+import {withSafeArea} from "../../utils/withSafeArea";
+import {EdgeInsets} from "react-native-safe-area-context";
 
 type Props = {
     state: Object,
@@ -11,6 +12,7 @@ type Props = {
     navigation: Object,
     theme: Object,
     collapsibleStack: Object,
+    safeArea: EdgeInsets
 }
 
 type State = {
@@ -37,13 +39,6 @@ class CustomTabBar extends React.Component<Props, State> {
         barSynced: false,// Is the bar synced with the header for animations?
     }
 
-    tabRef: Object;
-
-    constructor(props) {
-        super(props);
-        this.tabRef = React.createRef();
-    }
-
     onItemPress(route: Object, currentIndex: number, destIndex: number) {
         const event = this.props.navigation.emit({
             type: 'tabPress',
@@ -135,28 +130,24 @@ class CustomTabBar extends React.Component<Props, State> {
     render() {
         this.props.navigation.addListener('state', this.onRouteChange);
         return (
-            <SafeAreaView>
                 <Animated.View
-                    ref={this.tabRef}
-                    // animation={"fadeInUp"}
-                    // duration={500}
-                    // useNativeDriver
+                    useNativeDriver
                     style={{
                         flexDirection: 'row',
-                        height: CustomTabBar.TAB_BAR_HEIGHT,
+                        height: CustomTabBar.TAB_BAR_HEIGHT + this.props.safeArea.bottom,
                         width: '100%',
                         position: 'absolute',
                         bottom: 0,
                         left: 0,
                         backgroundColor: this.props.theme.colors.surface,
-                        transform: [{translateY: this.state.translateY}]
+                        transform: [{translateY: this.state.translateY}],
+                        paddingBottom: this.props.safeArea.bottom,
                     }}
                 >
                     {this.props.state.routes.map(this.renderIcon)}
                 </Animated.View>
-            </SafeAreaView>
         );
     }
 }
 
-export default withTheme(CustomTabBar);
+export default withSafeArea(withTheme(CustomTabBar));

src/utils/withSafeArea.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {useSafeArea} from 'react-native-safe-area-context';
+
+export const withSafeArea = (Component: any) => {
+    return React.forwardRef((props: any, ref: any) => {
+        let safeArea = useSafeArea();
+        // safeArea.bottom = 0;
+        return <Component
+            safeArea={safeArea}
+            ref={ref}
+            {...props}
+        />;
+    });
+};