|
@@ -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
|
}
|