Fixed padding breaking other components offsets

App.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, StatusBar, View, YellowBox} from 'react-native';
+import {Platform, SafeAreaView, StatusBar, View, YellowBox} from 'react-native';
 import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from "./src/managers/AsyncStorageManager";
 import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
@@ -17,7 +17,6 @@ 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+
@@ -193,16 +192,14 @@ export default class App extends React.Component<Props, State> {
                 <PaperProvider theme={this.state.currentTheme}>
                     <OverflowMenuProvider>
                         <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
-                            <SafeAreaProvider
-                                edges={['bottom']}
-                            >
+                            <SafeAreaView style={{flex: 1}}>
                                 <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
                                     <MainNavigator
                                         defaultHomeRoute={this.defaultHomeRoute}
                                         defaultHomeData={this.defaultHomeData}
                                     />
                                 </NavigationContainer>
-                            </SafeAreaProvider>
+                            </SafeAreaView>
                         </View>
                     </OverflowMenuProvider>
                 </PaperProvider>

src/components/Tabbar/CustomTabBar.js

@@ -3,8 +3,6 @@ import {withTheme} from 'react-native-paper';
 import TabIcon from "./TabIcon";
 import TabHomeIcon from "./TabHomeIcon";
 import {Animated} from 'react-native';
-import {withSafeArea} from "../../utils/withSafeArea";
-import {EdgeInsets} from "react-native-safe-area-context";
 
 type Props = {
     state: Object,
@@ -12,7 +10,6 @@ type Props = {
     navigation: Object,
     theme: Object,
     collapsibleStack: Object,
-    safeArea: EdgeInsets
 }
 
 type State = {
@@ -130,24 +127,23 @@ class CustomTabBar extends React.Component<Props, State> {
     render() {
         this.props.navigation.addListener('state', this.onRouteChange);
         return (
-                <Animated.View
-                    useNativeDriver
-                    style={{
-                        flexDirection: 'row',
-                        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}],
-                        paddingBottom: this.props.safeArea.bottom,
-                    }}
-                >
-                    {this.props.state.routes.map(this.renderIcon)}
-                </Animated.View>
+            <Animated.View
+                useNativeDriver
+                style={{
+                    flexDirection: 'row',
+                    height: CustomTabBar.TAB_BAR_HEIGHT,
+                    width: '100%',
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    backgroundColor: this.props.theme.colors.surface,
+                    transform: [{translateY: this.state.translateY}],
+                }}
+            >
+                {this.props.state.routes.map(this.renderIcon)}
+            </Animated.View>
         );
     }
 }
 
-export default withSafeArea(withTheme(CustomTabBar));
+export default withTheme(CustomTabBar);

src/utils/withSafeArea.js

@@ -1,14 +0,0 @@
-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}
-        />;
-    });
-};