Browse Source

Added padding to tab bar bottom for iPhoneX devices

Arnaud Vergnet 3 years ago
parent
commit
e2cdc26442
3 changed files with 33 additions and 23 deletions
  1. 11
    6
      App.js
  2. 8
    17
      src/components/Tabbar/CustomTabBar.js
  3. 14
    0
      src/utils/withSafeArea.js

+ 11
- 6
App.js View File

@@ -17,6 +17,7 @@ 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";
20 21
 
21 22
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
22 23
 // Crashes app when navigating away from webview on android 9+
@@ -192,12 +193,16 @@ export default class App extends React.Component<Props, State> {
192 193
                 <PaperProvider theme={this.state.currentTheme}>
193 194
                     <OverflowMenuProvider>
194 195
                         <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
195
-                            <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
196
-                                <MainNavigator
197
-                                    defaultHomeRoute={this.defaultHomeRoute}
198
-                                    defaultHomeData={this.defaultHomeData}
199
-                                />
200
-                            </NavigationContainer>
196
+                            <SafeAreaProvider
197
+                                edges={['bottom']}
198
+                            >
199
+                                <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
200
+                                    <MainNavigator
201
+                                        defaultHomeRoute={this.defaultHomeRoute}
202
+                                        defaultHomeData={this.defaultHomeData}
203
+                                    />
204
+                                </NavigationContainer>
205
+                            </SafeAreaProvider>
201 206
                         </View>
202 207
                     </OverflowMenuProvider>
203 208
                 </PaperProvider>

+ 8
- 17
src/components/Tabbar/CustomTabBar.js View File

@@ -3,7 +3,8 @@ 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 {SafeAreaView} from 'react-native-safe-area-context';
6
+import {withSafeArea} from "../../utils/withSafeArea";
7
+import {EdgeInsets} from "react-native-safe-area-context";
7 8
 
8 9
 type Props = {
9 10
     state: Object,
@@ -11,6 +12,7 @@ type Props = {
11 12
     navigation: Object,
12 13
     theme: Object,
13 14
     collapsibleStack: Object,
15
+    safeArea: EdgeInsets
14 16
 }
15 17
 
16 18
 type State = {
@@ -37,13 +39,6 @@ class CustomTabBar extends React.Component<Props, State> {
37 39
         barSynced: false,// Is the bar synced with the header for animations?
38 40
     }
39 41
 
40
-    tabRef: Object;
41
-
42
-    constructor(props) {
43
-        super(props);
44
-        this.tabRef = React.createRef();
45
-    }
46
-
47 42
     onItemPress(route: Object, currentIndex: number, destIndex: number) {
48 43
         const event = this.props.navigation.emit({
49 44
             type: 'tabPress',
@@ -135,28 +130,24 @@ class CustomTabBar extends React.Component<Props, State> {
135 130
     render() {
136 131
         this.props.navigation.addListener('state', this.onRouteChange);
137 132
         return (
138
-            <SafeAreaView>
139 133
                 <Animated.View
140
-                    ref={this.tabRef}
141
-                    // animation={"fadeInUp"}
142
-                    // duration={500}
143
-                    // useNativeDriver
134
+                    useNativeDriver
144 135
                     style={{
145 136
                         flexDirection: 'row',
146
-                        height: CustomTabBar.TAB_BAR_HEIGHT,
137
+                        height: CustomTabBar.TAB_BAR_HEIGHT + this.props.safeArea.bottom,
147 138
                         width: '100%',
148 139
                         position: 'absolute',
149 140
                         bottom: 0,
150 141
                         left: 0,
151 142
                         backgroundColor: this.props.theme.colors.surface,
152
-                        transform: [{translateY: this.state.translateY}]
143
+                        transform: [{translateY: this.state.translateY}],
144
+                        paddingBottom: this.props.safeArea.bottom,
153 145
                     }}
154 146
                 >
155 147
                     {this.props.state.routes.map(this.renderIcon)}
156 148
                 </Animated.View>
157
-            </SafeAreaView>
158 149
         );
159 150
     }
160 151
 }
161 152
 
162
-export default withTheme(CustomTabBar);
153
+export default withSafeArea(withTheme(CustomTabBar));

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

@@ -0,0 +1,14 @@
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