Browse Source

Improved status bar height fix

Arnaud Vergnet 4 years ago
parent
commit
e157af57d1

+ 4
- 10
src/components/Lists/WebSectionList.js View File

@@ -4,7 +4,7 @@ import * as React from 'react';
4 4
 import {ERROR_TYPE, readData} from "../../utils/WebData";
5 5
 import i18n from "i18n-js";
6 6
 import {Snackbar} from 'react-native-paper';
7
-import {Animated, Platform, RefreshControl, StatusBar, View} from "react-native";
7
+import {Animated, RefreshControl, View} from "react-native";
8 8
 import ErrorView from "../Custom/ErrorView";
9 9
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
10 10
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -205,12 +205,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
205 205
             dataset = this.props.createDataset(this.state.fetchedData);
206 206
         const shouldRenderHeader = this.props.renderSectionHeader !== null;
207 207
         const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
208
-        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
209
-            ? containerPaddingTop - StatusBar.currentHeight
210
-            : containerPaddingTop;
211
-        const inset = Platform.OS === 'android'
212
-            ? scrollIndicatorInsetTop - StatusBar.currentHeight
213
-            : scrollIndicatorInsetTop;
214 208
         return (
215 209
             <View>
216 210
                 {/*$FlowFixMe*/}
@@ -219,7 +213,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
219 213
                     extraData={this.props.updateData}
220 214
                     refreshControl={
221 215
                         <RefreshControl
222
-                            progressViewOffset={padding}
216
+                            progressViewOffset={containerPaddingTop}
223 217
                             refreshing={this.state.refreshing}
224 218
                             onRefresh={this.onRefresh}
225 219
                         />
@@ -241,10 +235,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
241 235
                     // Animations
242 236
                     onScroll={onScrollWithListener(this.props.onScroll)}
243 237
                     contentContainerStyle={{
244
-                        paddingTop: padding,
238
+                        paddingTop: containerPaddingTop,
245 239
                         minHeight: '100%'
246 240
                     }}
247
-                    scrollIndicatorInsets={{top: inset}}
241
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
248 242
                 />
249 243
                 <Snackbar
250 244
                     visible={this.state.snackbarVisible}

+ 2
- 5
src/components/Screens/WebViewScreen.js View File

@@ -9,7 +9,7 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
9 9
 import {HiddenItem} from "react-navigation-header-buttons";
10 10
 import {Linking} from "expo";
11 11
 import i18n from 'i18n-js';
12
-import {Animated, BackHandler, Platform, StatusBar} from "react-native";
12
+import {Animated, BackHandler} from "react-native";
13 13
 import {withCollapsible} from "../../utils/withCollapsible";
14 14
 
15 15
 type Props = {
@@ -133,9 +133,6 @@ class WebViewScreen extends React.PureComponent<Props> {
133 133
 
134 134
     render() {
135 135
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
136
-        const padding = Platform.OS === 'android'  // Fix for android non translucent bar on expo
137
-            ? containerPaddingTop - StatusBar.currentHeight
138
-            : containerPaddingTop;
139 136
         return (
140 137
             <AnimatedWebView
141 138
                 ref={this.webviewRef}
@@ -152,7 +149,7 @@ class WebViewScreen extends React.PureComponent<Props> {
152 149
                     this.canGoBack = navState.canGoBack;
153 150
                 }}
154 151
                 onMessage={this.props.onMessage}
155
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
152
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
156 153
                 // Animations
157 154
                 onScroll={onScrollWithListener(this.props.onScroll)}
158 155
             />

+ 3
- 9
src/screens/Amicale/Clubs/ClubListScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, Platform, StatusBar} from "react-native";
4
+import {Animated, Platform} from "react-native";
5 5
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7 7
 import i18n from "i18n-js";
@@ -97,12 +97,6 @@ class ClubListScreen extends React.Component<Props, State> {
97 97
     getScreen = (data: Object) => {
98 98
         this.categories = data[0].categories;
99 99
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
100
-        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
101
-            ? containerPaddingTop - StatusBar.currentHeight
102
-            : containerPaddingTop;
103
-        const inset = Platform.OS === 'android'
104
-            ? scrollIndicatorInsetTop - StatusBar.currentHeight
105
-            : scrollIndicatorInsetTop;
106 100
         return (
107 101
             //$FlowFixMe
108 102
             <Animated.FlatList
@@ -115,8 +109,8 @@ class ClubListScreen extends React.Component<Props, State> {
115 109
                 getItemLayout={this.itemLayout}
116 110
                 // Animations
117 111
                 onScroll={onScroll}
118
-                contentContainerStyle={{paddingTop: padding}}
119
-                scrollIndicatorInsets={{top: inset}}
112
+                contentContainerStyle={{paddingTop: containerPaddingTop}}
113
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
120 114
             />
121 115
         )
122 116
     };

+ 0
- 1
src/screens/GroupSelectionScreen.js View File

@@ -15,7 +15,6 @@ type Props = {
15 15
     navigation: Object,
16 16
     route: Object,
17 17
     theme: Object,
18
-    collapsibleStack: Object,
19 18
 }
20 19
 
21 20
 type State = {

+ 3
- 9
src/screens/Proximo/ProximoListScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, Image, Platform, ScrollView, StatusBar, View} from "react-native";
4
+import {Animated, Image, Platform, ScrollView, View} from "react-native";
5 5
 import i18n from "i18n-js";
6 6
 import CustomModal from "../../components/Custom/CustomModal";
7 7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
@@ -298,12 +298,6 @@ class ProximoListScreen extends React.Component<Props, State> {
298 298
 
299 299
     render() {
300 300
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
301
-        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
302
-            ? containerPaddingTop - StatusBar.currentHeight
303
-            : containerPaddingTop;
304
-        const inset = Platform.OS === 'android'
305
-            ? scrollIndicatorInsetTop - StatusBar.currentHeight
306
-            : scrollIndicatorInsetTop;
307 301
         return (
308 302
             <View style={{
309 303
                 height: '100%'
@@ -323,8 +317,8 @@ class ProximoListScreen extends React.Component<Props, State> {
323 317
                     initialNumToRender={10}
324 318
                     // Animations
325 319
                     onScroll={onScroll}
326
-                    contentContainerStyle={{paddingTop: padding}}
327
-                    scrollIndicatorInsets={{top: inset}}
320
+                    contentContainerStyle={{paddingTop: containerPaddingTop}}
321
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
328 322
                 />
329 323
             </View>
330 324
         );

+ 2
- 5
src/screens/Proxiwash/ProxiwashScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Alert, Platform, StatusBar, View} from 'react-native';
4
+import {Alert, Platform, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import WebSectionList from "../../components/Lists/WebSectionList";
7 7
 import * as Notifications from "../../utils/Notifications";
@@ -421,16 +421,13 @@ class ProxiwashScreen extends React.Component<Props, State> {
421 421
     render() {
422 422
         const nav = this.props.navigation;
423 423
         const {containerPaddingTop} = this.props.collapsibleStack;
424
-        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
425
-            ? containerPaddingTop - StatusBar.currentHeight
426
-            : containerPaddingTop;
427 424
         return (
428 425
             <AnimatedFocusView
429 426
                 {...this.props}
430 427
             >
431 428
                 <Banner
432 429
                     style={{
433
-                    marginTop: this.state.bannerVisible ? padding : 0,
430
+                    marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
434 431
                 }}
435 432
                     visible={this.state.bannerVisible}
436 433
                     actions={[

+ 2
- 5
src/screens/Websites/PlanexScreen.js View File

@@ -5,7 +5,7 @@ import ThemeManager from "../../managers/ThemeManager";
5 5
 import WebViewScreen from "../../components/Screens/WebViewScreen";
6 6
 import {Avatar, Banner, withTheme} from "react-native-paper";
7 7
 import i18n from "i18n-js";
8
-import {Platform, StatusBar, View} from "react-native";
8
+import {View} from "react-native";
9 9
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
10 10
 import AlertDialog from "../../components/Dialog/AlertDialog";
11 11
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -299,16 +299,13 @@ class PlanexScreen extends React.Component<Props, State> {
299 299
 
300 300
     render() {
301 301
         const {containerPaddingTop} = this.props.collapsibleStack;
302
-        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
303
-            ? containerPaddingTop - StatusBar.currentHeight
304
-            : containerPaddingTop;
305 302
         return (
306 303
             <AnimatedFocusView
307 304
                 {...this.props}
308 305
             >
309 306
                 <Banner
310 307
                     style={{
311
-                        marginTop: this.state.bannerVisible ? padding : 0,
308
+                        marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
312 309
                     }}
313 310
                     visible={this.state.bannerVisible}
314 311
                     actions={[

+ 24
- 1
src/utils/withCollapsible.js View File

@@ -1,8 +1,31 @@
1 1
 import React from 'react';
2
+import {StatusBar} from 'react-native';
2 3
 import {useCollapsibleStack} from "react-navigation-collapsible";
3 4
 
4 5
 export const withCollapsible = (Component: any) => {
5 6
     return React.forwardRef((props: any, ref: any) => {
6
-        return <Component collapsibleStack={useCollapsibleStack()} ref={ref} {...props} />;
7
+
8
+        const {
9
+            onScroll,
10
+            onScrollWithListener,
11
+            containerPaddingTop,
12
+            scrollIndicatorInsetTop,
13
+            translateY,
14
+            progress,
15
+            opacity,
16
+        } = useCollapsibleStack();
17
+        return <Component
18
+            collapsibleStack={{
19
+                onScroll,
20
+                onScrollWithListener,
21
+                containerPaddingTop: containerPaddingTop - StatusBar.currentHeight,
22
+                scrollIndicatorInsetTop: scrollIndicatorInsetTop - StatusBar.currentHeight,
23
+                translateY,
24
+                progress,
25
+                opacity,
26
+            }}
27
+            ref={ref}
28
+            {...props}
29
+        />;
7 30
     });
8 31
 };

Loading…
Cancel
Save