Browse Source

Improved tab hiding by following header animation

Arnaud Vergnet 4 years ago
parent
commit
7f5ade5999

+ 1
- 1
App.js View File

@@ -62,7 +62,7 @@ export default class App extends React.Component<Props, State> {
62 62
         this.defaultData = {};
63 63
         this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
64 64
         this.urlHandler.listen();
65
-        setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 0);
65
+        setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
66 66
     }
67 67
 
68 68
     onInitialURLParsed = ({route, data}: Object) => {

+ 5
- 9
src/components/Lists/WebSectionList.js View File

@@ -9,7 +9,6 @@ import ErrorView from "../Custom/ErrorView";
9 9
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
10 10
 import {withCollapsible} from "../../utils/withCollapsible";
11 11
 import * as Animatable from 'react-native-animatable';
12
-import AutoHideHandler from "../../utils/AutoHideHandler";
13 12
 import CustomTabBar from "../Tabbar/CustomTabBar";
14 13
 
15 14
 type Props = {
@@ -52,9 +51,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
52 51
         itemHeight: null,
53 52
     };
54 53
 
54
+    scrollRef: Object;
55 55
     refreshInterval: IntervalID;
56 56
     lastRefresh: Date;
57
-    hideHandler: AutoHideHandler;
58 57
 
59 58
     state = {
60 59
         refreshing: false,
@@ -75,8 +74,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
75 74
         this.onFetchSuccess = this.onFetchSuccess.bind(this);
76 75
         this.onFetchError = this.onFetchError.bind(this);
77 76
         this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this);
78
-        this.hideHandler = new AutoHideHandler(false);
79
-        this.hideHandler.addListener(this.onHideChange);
80 77
     }
81 78
 
82 79
     /**
@@ -88,6 +85,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
88 85
         const onScreenBlur = this.onScreenBlur.bind(this);
89 86
         this.props.navigation.addListener('focus', onScreenFocus);
90 87
         this.props.navigation.addListener('blur', onScreenBlur);
88
+        this.scrollRef = React.createRef();
91 89
         this.onRefresh();
92 90
     }
93 91
 
@@ -99,6 +97,8 @@ class WebSectionList extends React.PureComponent<Props, State> {
99 97
             this.onRefresh();
100 98
         if (this.props.autoRefreshTime > 0)
101 99
             this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime)
100
+        // if (this.scrollRef.current) // Reset scroll to top
101
+        //     this.scrollRef.current.getNode().scrollToLocation({animated:false, itemIndex:0, sectionIndex:0});
102 102
     }
103 103
 
104 104
     /**
@@ -205,15 +205,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
205 205
     }
206 206
 
207 207
     onScroll = (event: Object) => {
208
-        this.hideHandler.onScroll(event);
209 208
         if (this.props.onScroll)
210 209
             this.props.onScroll(event);
211 210
     }
212 211
 
213
-    onHideChange = (shouldHide: boolean) => {
214
-        this.props.navigation.setParams({hideTabBar: shouldHide});
215
-    }
216
-
217 212
     render() {
218 213
         let dataset = [];
219 214
         if (this.state.fetchedData !== undefined)
@@ -224,6 +219,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
224 219
             <View>
225 220
                 {/*$FlowFixMe*/}
226 221
                 <Animated.SectionList
222
+                    ref={this.scrollRef}
227 223
                     sections={dataset}
228 224
                     extraData={this.props.updateData}
229 225
                     refreshControl={

+ 0
- 9
src/components/Screens/WebViewScreen.js View File

@@ -11,7 +11,6 @@ import {Linking} from "expo";
11 11
 import i18n from 'i18n-js';
12 12
 import {Animated, BackHandler} from "react-native";
13 13
 import {withCollapsible} from "../../utils/withCollapsible";
14
-import AutoHideHandler from "../../utils/AutoHideHandler";
15 14
 
16 15
 type Props = {
17 16
     navigation: Object,
@@ -34,7 +33,6 @@ class WebViewScreen extends React.PureComponent<Props> {
34 33
     };
35 34
 
36 35
     webviewRef: Object;
37
-    hideHandler: AutoHideHandler;
38 36
 
39 37
     canGoBack: boolean;
40 38
 
@@ -42,8 +40,6 @@ class WebViewScreen extends React.PureComponent<Props> {
42 40
         super();
43 41
         this.webviewRef = React.createRef();
44 42
         this.canGoBack = false;
45
-        this.hideHandler = new AutoHideHandler(false);
46
-        this.hideHandler.addListener(this.onHideChange);
47 43
     }
48 44
 
49 45
     /**
@@ -136,15 +132,10 @@ class WebViewScreen extends React.PureComponent<Props> {
136 132
     }
137 133
 
138 134
     onScroll = (event: Object) => {
139
-        this.hideHandler.onScroll(event);
140 135
         if (this.props.onScroll)
141 136
             this.props.onScroll(event);
142 137
     }
143 138
 
144
-    onHideChange = (shouldHide: boolean) => {
145
-        this.props.navigation.setParams({hideTabBar: shouldHide});
146
-    }
147
-
148 139
     render() {
149 140
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
150 141
         return (

+ 34
- 19
src/components/Tabbar/CustomTabBar.js View File

@@ -2,33 +2,45 @@ import * as React from 'react';
2 2
 import {withTheme} from 'react-native-paper';
3 3
 import TabIcon from "./TabIcon";
4 4
 import TabHomeIcon from "./TabHomeIcon";
5
-import * as Animatable from 'react-native-animatable';
5
+import {AnimatedValue} from "react-native-reanimated";
6
+import {Animated} from 'react-native';
6 7
 
7 8
 type Props = {
8 9
     state: Object,
9 10
     descriptors: Object,
10 11
     navigation: Object,
11 12
     theme: Object,
13
+    collapsibleStack: Object,
14
+}
15
+
16
+type State = {
17
+    translateY: AnimatedValue,
12 18
 }
13 19
 
14 20
 /**
15 21
  * Abstraction layer for Agenda component, using custom configuration
16 22
  */
17
-class CustomTabBar extends React.Component<Props> {
23
+class CustomTabBar extends React.Component<Props, State> {
18 24
 
19 25
     static TAB_BAR_HEIGHT = 48;
20 26
 
27
+    barSynced: boolean; // Is the bar synced with the header for animations?
28
+
29
+    state = {
30
+        translateY: new Animated.Value(0),
31
+    }
32
+
21 33
     // shouldComponentUpdate(nextProps: Props): boolean {
22 34
     //     return (nextProps.theme.dark !== this.props.theme.dark)
23 35
     //         || (nextProps.state.index !== this.props.state.index);
24 36
     // }
25 37
 
26
-    isHidden: boolean;
27 38
     tabRef: Object;
28 39
 
29 40
     constructor() {
30 41
         super();
31 42
         this.tabRef = React.createRef();
43
+        this.barSynced = false;
32 44
     }
33 45
 
34 46
     onItemPress(route: Object, currentIndex: number, destIndex: number) {
@@ -38,6 +50,7 @@ class CustomTabBar extends React.Component<Props> {
38 50
             canPreventDefault: true,
39 51
         });
40 52
         if (currentIndex !== destIndex && !event.defaultPrevented) {
53
+            this.state.translateY = new Animated.Value(0);
41 54
             this.props.navigation.navigate(route.name, {
42 55
                 screen: 'index',
43 56
                 params: {animationDir: currentIndex < destIndex ? "right" : "left"}
@@ -45,16 +58,21 @@ class CustomTabBar extends React.Component<Props> {
45 58
         }
46 59
     }
47 60
 
61
+    onRouteChange = () => {
62
+        this.barSynced = false;
63
+    }
64
+
48 65
     render() {
49 66
         const state = this.props.state;
50 67
         const descriptors = this.props.descriptors;
51 68
         const navigation = this.props.navigation;
69
+        this.props.navigation.addListener('state', this.onRouteChange);
52 70
         return (
53
-            <Animatable.View
71
+            <Animated.View
54 72
                 ref={this.tabRef}
55
-                animation={"fadeInUp"}
56
-                duration={500}
57
-                useNativeDriver
73
+                // animation={"fadeInUp"}
74
+                // duration={500}
75
+                // useNativeDriver
58 76
                 style={{
59 77
                     flexDirection: 'row',
60 78
                     height: CustomTabBar.TAB_BAR_HEIGHT,
@@ -63,6 +81,7 @@ class CustomTabBar extends React.Component<Props> {
63 81
                     bottom: 0,
64 82
                     left: 0,
65 83
                     backgroundColor: this.props.theme.colors.surface,
84
+                    transform: [{translateY: this.state.translateY}]
66 85
                 }}
67 86
             >
68 87
                 {state.routes.map((route, index) => {
@@ -85,18 +104,14 @@ class CustomTabBar extends React.Component<Props> {
85 104
                         });
86 105
                     };
87 106
                     if (isFocused) {
88
-                        const tabVisible = options.tabBarVisible();
89
-                        console.log(tabVisible);
90
-                        if (this.tabRef.current) {
91
-                            if (this.isHidden && tabVisible) {
92
-                                this.isHidden = false;
93
-                                this.tabRef.current.slideInUp(300);
94
-                            } else if (!this.isHidden && !tabVisible){
95
-                                this.isHidden = true;
96
-                                this.tabRef.current.slideOutDown(300);
97
-                            }
107
+                        const stackState = route.state;
108
+                        const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;
109
+                        const params = stackRoute ? stackRoute.params : undefined;
110
+                        const collapsible = params ? params.collapsible : undefined;
111
+                        if (collapsible && !this.barSynced) {
112
+                            this.barSynced = true;
113
+                            this.setState({translateY: Animated.multiply(-1.5, collapsible.translateY)});
98 114
                         }
99
-
100 115
                     }
101 116
 
102 117
                     const color = isFocused ? options.activeColor : options.inactiveColor;
@@ -120,7 +135,7 @@ class CustomTabBar extends React.Component<Props> {
120 135
                             key={route.key}
121 136
                         />
122 137
                 })}
123
-            </Animatable.View>
138
+            </Animated.View>
124 139
         );
125 140
     }
126 141
 }

+ 0
- 9
src/navigation/MainTabNavigator.js View File

@@ -343,15 +343,6 @@ class TabNavigator extends React.Component<Props> {
343 343
                         else
344 344
                             return null;
345 345
                     },
346
-                    tabBarVisible: () => {
347
-                        const state = route.state;
348
-                        // Get the current route in the stack
349
-                        const screen = state ? state.routes[state.index] : undefined;
350
-                        const params = screen ? screen.params : undefined;
351
-                        const hideTabBar = params ? params.hideTabBar : undefined;
352
-                        return hideTabBar !== undefined ? !hideTabBar : true;
353
-                    },
354
-                    animationEnabled: true,
355 346
                     tabBarLabel: route.name !== 'home' ? undefined : '',
356 347
                     activeColor: this.props.theme.colors.primary,
357 348
                     inactiveColor: this.props.theme.colors.tabIcon,

Loading…
Cancel
Save