|
@@ -14,6 +14,7 @@ type Props = {
|
14
|
14
|
|
15
|
15
|
type State = {
|
16
|
16
|
translateY: AnimatedValue,
|
|
17
|
+ barSynced: boolean,
|
17
|
18
|
}
|
18
|
19
|
|
19
|
20
|
const TAB_ICONS = {
|
|
@@ -30,12 +31,12 @@ class CustomTabBar extends React.Component<Props, State> {
|
30
|
31
|
|
31
|
32
|
static TAB_BAR_HEIGHT = 48;
|
32
|
33
|
|
33
|
|
- barSynced: boolean; // Is the bar synced with the header for animations?
|
34
|
34
|
activeColor: string;
|
35
|
35
|
inactiveColor: string;
|
36
|
36
|
|
37
|
37
|
state = {
|
38
|
38
|
translateY: new Animated.Value(0),
|
|
39
|
+ barSynced: false,// Is the bar synced with the header for animations?
|
39
|
40
|
}
|
40
|
41
|
|
41
|
42
|
// shouldComponentUpdate(nextProps: Props): boolean {
|
|
@@ -48,7 +49,6 @@ class CustomTabBar extends React.Component<Props, State> {
|
48
|
49
|
constructor(props) {
|
49
|
50
|
super(props);
|
50
|
51
|
this.tabRef = React.createRef();
|
51
|
|
- this.barSynced = false;
|
52
|
52
|
this.activeColor = props.theme.colors.primary;
|
53
|
53
|
this.inactiveColor = props.theme.colors.tabIcon;
|
54
|
54
|
}
|
|
@@ -79,7 +79,7 @@ class CustomTabBar extends React.Component<Props, State> {
|
79
|
79
|
|
80
|
80
|
|
81
|
81
|
onRouteChange = () => {
|
82
|
|
- this.barSynced = false;
|
|
82
|
+ this.setState({barSynced: false});
|
83
|
83
|
}
|
84
|
84
|
|
85
|
85
|
renderIcon = (route, index) => {
|
|
@@ -107,9 +107,11 @@ class CustomTabBar extends React.Component<Props, State> {
|
107
|
107
|
const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;
|
108
|
108
|
const params = stackRoute ? stackRoute.params : undefined;
|
109
|
109
|
const collapsible = params ? params.collapsible : undefined;
|
110
|
|
- if (collapsible && !this.barSynced) {
|
111
|
|
- this.barSynced = true;
|
112
|
|
- this.setState({translateY: Animated.multiply(-1.5, collapsible.translateY)});
|
|
110
|
+ if (collapsible && !this.state.barSynced) {
|
|
111
|
+ this.setState({
|
|
112
|
+ translateY: Animated.multiply(-1.5, collapsible.translateY),
|
|
113
|
+ barSynced: true,
|
|
114
|
+ });
|
113
|
115
|
}
|
114
|
116
|
}
|
115
|
117
|
|