Browse Source

Fixed padding breaking other components offsets

Arnaud Vergnet 3 years ago
parent
commit
1c2d2ab1ca
3 changed files with 19 additions and 40 deletions
  1. 3
    6
      App.js
  2. 16
    20
      src/components/Tabbar/CustomTabBar.js
  3. 0
    14
      src/utils/withSafeArea.js

+ 3
- 6
App.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Platform, StatusBar, View, YellowBox} from 'react-native';
4
+import {Platform, SafeAreaView, StatusBar, View, YellowBox} from 'react-native';
5 5
 import LocaleManager from './src/managers/LocaleManager';
6 6
 import AsyncStorageManager from "./src/managers/AsyncStorageManager";
7 7
 import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
@@ -17,7 +17,6 @@ import URLHandler from "./src/utils/URLHandler";
17 17
 import {setSafeBounceHeight} from "react-navigation-collapsible";
18 18
 import SplashScreen from 'react-native-splash-screen'
19 19
 import {OverflowMenuProvider} from "react-navigation-header-buttons";
20
-import {SafeAreaProvider} from "react-native-safe-area-context";
21 20
 
22 21
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
23 22
 // Crashes app when navigating away from webview on android 9+
@@ -193,16 +192,14 @@ export default class App extends React.Component<Props, State> {
193 192
                 <PaperProvider theme={this.state.currentTheme}>
194 193
                     <OverflowMenuProvider>
195 194
                         <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
196
-                            <SafeAreaProvider
197
-                                edges={['bottom']}
198
-                            >
195
+                            <SafeAreaView style={{flex: 1}}>
199 196
                                 <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
200 197
                                     <MainNavigator
201 198
                                         defaultHomeRoute={this.defaultHomeRoute}
202 199
                                         defaultHomeData={this.defaultHomeData}
203 200
                                     />
204 201
                                 </NavigationContainer>
205
-                            </SafeAreaProvider>
202
+                            </SafeAreaView>
206 203
                         </View>
207 204
                     </OverflowMenuProvider>
208 205
                 </PaperProvider>

+ 16
- 20
src/components/Tabbar/CustomTabBar.js View File

@@ -3,8 +3,6 @@ import {withTheme} from 'react-native-paper';
3 3
 import TabIcon from "./TabIcon";
4 4
 import TabHomeIcon from "./TabHomeIcon";
5 5
 import {Animated} from 'react-native';
6
-import {withSafeArea} from "../../utils/withSafeArea";
7
-import {EdgeInsets} from "react-native-safe-area-context";
8 6
 
9 7
 type Props = {
10 8
     state: Object,
@@ -12,7 +10,6 @@ type Props = {
12 10
     navigation: Object,
13 11
     theme: Object,
14 12
     collapsibleStack: Object,
15
-    safeArea: EdgeInsets
16 13
 }
17 14
 
18 15
 type State = {
@@ -130,24 +127,23 @@ class CustomTabBar extends React.Component<Props, State> {
130 127
     render() {
131 128
         this.props.navigation.addListener('state', this.onRouteChange);
132 129
         return (
133
-                <Animated.View
134
-                    useNativeDriver
135
-                    style={{
136
-                        flexDirection: 'row',
137
-                        height: CustomTabBar.TAB_BAR_HEIGHT + this.props.safeArea.bottom,
138
-                        width: '100%',
139
-                        position: 'absolute',
140
-                        bottom: 0,
141
-                        left: 0,
142
-                        backgroundColor: this.props.theme.colors.surface,
143
-                        transform: [{translateY: this.state.translateY}],
144
-                        paddingBottom: this.props.safeArea.bottom,
145
-                    }}
146
-                >
147
-                    {this.props.state.routes.map(this.renderIcon)}
148
-                </Animated.View>
130
+            <Animated.View
131
+                useNativeDriver
132
+                style={{
133
+                    flexDirection: 'row',
134
+                    height: CustomTabBar.TAB_BAR_HEIGHT,
135
+                    width: '100%',
136
+                    position: 'absolute',
137
+                    bottom: 0,
138
+                    left: 0,
139
+                    backgroundColor: this.props.theme.colors.surface,
140
+                    transform: [{translateY: this.state.translateY}],
141
+                }}
142
+            >
143
+                {this.props.state.routes.map(this.renderIcon)}
144
+            </Animated.View>
149 145
         );
150 146
     }
151 147
 }
152 148
 
153
-export default withSafeArea(withTheme(CustomTabBar));
149
+export default withTheme(CustomTabBar);

+ 0
- 14
src/utils/withSafeArea.js View File

@@ -1,14 +0,0 @@
1
-import React from 'react';
2
-import {useSafeArea} from 'react-native-safe-area-context';
3
-
4
-export const withSafeArea = (Component: any) => {
5
-    return React.forwardRef((props: any, ref: any) => {
6
-        let safeArea = useSafeArea();
7
-        // safeArea.bottom = 0;
8
-        return <Component
9
-            safeArea={safeArea}
10
-            ref={ref}
11
-            {...props}
12
-        />;
13
-    });
14
-};

Loading…
Cancel
Save