Browse Source

Added safe area for tab bar

Arnaud Vergnet 2 years ago
parent
commit
7658cbcb16
1 changed files with 28 additions and 25 deletions
  1. 28
    25
      src/components/Tabbar/CustomTabBar.js

+ 28
- 25
src/components/Tabbar/CustomTabBar.js View File

@@ -3,6 +3,7 @@ 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 7
 
7 8
 type Props = {
8 9
     state: Object,
@@ -67,13 +68,13 @@ class CustomTabBar extends React.Component<Props, State> {
67 68
     }
68 69
 
69 70
     tabBarIcon = (route, focused) => {
70
-    let icon = TAB_ICONS[route.name];
71
-    icon = focused ? icon : icon + ('-outline');
72
-    if (route.name !== "home")
73
-    return icon;
74
-    else
75
-    return null;
76
-};
71
+        let icon = TAB_ICONS[route.name];
72
+        icon = focused ? icon : icon + ('-outline');
73
+        if (route.name !== "home")
74
+            return icon;
75
+        else
76
+            return null;
77
+    };
77 78
 
78 79
 
79 80
     onRouteChange = () => {
@@ -134,24 +135,26 @@ class CustomTabBar extends React.Component<Props, State> {
134 135
     render() {
135 136
         this.props.navigation.addListener('state', this.onRouteChange);
136 137
         return (
137
-            <Animated.View
138
-                ref={this.tabRef}
139
-                // animation={"fadeInUp"}
140
-                // duration={500}
141
-                // useNativeDriver
142
-                style={{
143
-                    flexDirection: 'row',
144
-                    height: CustomTabBar.TAB_BAR_HEIGHT,
145
-                    width: '100%',
146
-                    position: 'absolute',
147
-                    bottom: 0,
148
-                    left: 0,
149
-                    backgroundColor: this.props.theme.colors.surface,
150
-                    transform: [{translateY: this.state.translateY}]
151
-                }}
152
-            >
153
-                {this.props.state.routes.map(this.renderIcon)}
154
-            </Animated.View>
138
+            <SafeAreaView>
139
+                <Animated.View
140
+                    ref={this.tabRef}
141
+                    // animation={"fadeInUp"}
142
+                    // duration={500}
143
+                    // useNativeDriver
144
+                    style={{
145
+                        flexDirection: 'row',
146
+                        height: CustomTabBar.TAB_BAR_HEIGHT,
147
+                        width: '100%',
148
+                        position: 'absolute',
149
+                        bottom: 0,
150
+                        left: 0,
151
+                        backgroundColor: this.props.theme.colors.surface,
152
+                        transform: [{translateY: this.state.translateY}]
153
+                    }}
154
+                >
155
+                    {this.props.state.routes.map(this.renderIcon)}
156
+                </Animated.View>
157
+            </SafeAreaView>
155 158
         );
156 159
     }
157 160
 }

Loading…
Cancel
Save