|
@@ -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));
|