Browse Source

Temporary fix for statusbar height and image modal jump

Arnaud Vergnet 4 years ago
parent
commit
41eaaac350

+ 8
- 6
App.js View File

89
     };
89
     };
90
 
90
 
91
     setupStatusBar() {
91
     setupStatusBar() {
92
-        if (ThemeManager.getNightMode()) {
93
-            StatusBar.setBarStyle('light-content', true);
94
-        } else {
95
-            StatusBar.setBarStyle('dark-content', true);
92
+        if (Platform.OS === 'ios') {
93
+            if (ThemeManager.getNightMode()) {
94
+                StatusBar.setBarStyle('light-content', true);
95
+            } else {
96
+                StatusBar.setBarStyle('dark-content', true);
97
+            }
96
         }
98
         }
97
-        StatusBar.setTranslucent(false);
98
-        StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface);
99
+        // StatusBar.setTranslucent(false);
100
+        // StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface);
99
     }
101
     }
100
 
102
 
101
     /**
103
     /**

+ 2
- 2
app.json View File

20
     "androidStatusBar": {
20
     "androidStatusBar": {
21
       "barStyle": "light-content",
21
       "barStyle": "light-content",
22
       "hidden": false,
22
       "hidden": false,
23
-      "translucent": true,
24
-      "backgroundColor": "#00000000"
23
+      "translucent": false,
24
+      "backgroundColor": "#000000"
25
     },
25
     },
26
     "androidNavigationBar": {
26
     "androidNavigationBar": {
27
       "barStyle": "light-content",
27
       "barStyle": "light-content",

+ 0
- 1
src/components/Home/FeedItem.js View File

74
                 {hasImage ?
74
                 {hasImage ?
75
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
75
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
76
                         <ImageModal
76
                         <ImageModal
77
-                            isTranslucent={Platform.OS === 'android'}
78
                             resizeMode="contain"
77
                             resizeMode="contain"
79
                             imageBackgroundColor={"#000"}
78
                             imageBackgroundColor={"#000"}
80
                             style={{
79
                             style={{

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

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

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

9
 import {HiddenItem} from "react-navigation-header-buttons";
9
 import {HiddenItem} from "react-navigation-header-buttons";
10
 import {Linking} from "expo";
10
 import {Linking} from "expo";
11
 import i18n from 'i18n-js';
11
 import i18n from 'i18n-js';
12
-import {Animated, BackHandler} from "react-native";
12
+import {Animated, BackHandler, Platform, StatusBar} from "react-native";
13
 import {withCollapsible} from "../../utils/withCollapsible";
13
 import {withCollapsible} from "../../utils/withCollapsible";
14
 
14
 
15
 type Props = {
15
 type Props = {
133
 
133
 
134
     render() {
134
     render() {
135
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
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;
136
         return (
139
         return (
137
             <AnimatedWebView
140
             <AnimatedWebView
138
                 ref={this.webviewRef}
141
                 ref={this.webviewRef}
149
                     this.canGoBack = navState.canGoBack;
152
                     this.canGoBack = navState.canGoBack;
150
                 }}
153
                 }}
151
                 onMessage={this.props.onMessage}
154
                 onMessage={this.props.onMessage}
152
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
155
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
153
                 // Animations
156
                 // Animations
154
                 onScroll={onScrollWithListener(this.props.onScroll)}
157
                 onScroll={onScrollWithListener(this.props.onScroll)}
155
             />
158
             />

+ 0
- 1
src/screens/Amicale/Clubs/ClubDisplayScreen.js View File

126
                         marginBottom: 10,
126
                         marginBottom: 10,
127
                     }}>
127
                     }}>
128
                         <ImageModal
128
                         <ImageModal
129
-                            isTranslucent={Platform.OS === 'android'}
130
                             resizeMode="contain"
129
                             resizeMode="contain"
131
                             imageBackgroundColor={this.colors.background}
130
                             imageBackgroundColor={this.colors.background}
132
                             style={{
131
                             style={{

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

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, Platform} from "react-native";
4
+import {Animated, Platform, StatusBar} from "react-native";
5
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
5
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7
 import i18n from "i18n-js";
7
 import i18n from "i18n-js";
97
     getScreen = (data: Object) => {
97
     getScreen = (data: Object) => {
98
         this.categories = data[0].categories;
98
         this.categories = data[0].categories;
99
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
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;
100
         return (
106
         return (
101
             //$FlowFixMe
107
             //$FlowFixMe
102
             <Animated.FlatList
108
             <Animated.FlatList
109
                 getItemLayout={this.itemLayout}
115
                 getItemLayout={this.itemLayout}
110
                 // Animations
116
                 // Animations
111
                 onScroll={onScroll}
117
                 onScroll={onScroll}
112
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
113
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
118
+                contentContainerStyle={{paddingTop: padding}}
119
+                scrollIndicatorInsets={{top: inset}}
114
             />
120
             />
115
         )
121
         )
116
     };
122
     };

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

67
                 {hasImage ?
67
                 {hasImage ?
68
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
68
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
69
                         <ImageModal
69
                         <ImageModal
70
-                            isTranslucent={Platform.OS === 'android'}
71
                             resizeMode="contain"
70
                             resizeMode="contain"
72
                             imageBackgroundColor={"#000"}
71
                             imageBackgroundColor={"#000"}
73
                             style={{
72
                             style={{

+ 0
- 3
src/screens/HomeScreen.js View File

17
 import {AnimatedValue} from "react-native-reanimated";
17
 import {AnimatedValue} from "react-native-reanimated";
18
 import AnimatedFAB from "../components/Custom/AnimatedFAB";
18
 import AnimatedFAB from "../components/Custom/AnimatedFAB";
19
 import AnimatedFocusView from "../components/Custom/AnimatedFocusView";
19
 import AnimatedFocusView from "../components/Custom/AnimatedFocusView";
20
-import {SafeAreaView} from "react-native-safe-area-context";
21
 // import DATA from "../dashboard_data.json";
20
 // import DATA from "../dashboard_data.json";
22
 
21
 
23
 
22
 
472
     render() {
471
     render() {
473
         const nav = this.props.navigation;
472
         const nav = this.props.navigation;
474
         return (
473
         return (
475
-            <SafeAreaView style={{flex: 1,}}>
476
             <AnimatedFocusView
474
             <AnimatedFocusView
477
                 {...this.props}
475
                 {...this.props}
478
             >
476
             >
492
                     onPress={this.openScanner}
490
                     onPress={this.openScanner}
493
                 />
491
                 />
494
             </AnimatedFocusView>
492
             </AnimatedFocusView>
495
-            </SafeAreaView>
496
         );
493
         );
497
     }
494
     }
498
 }
495
 }

+ 0
- 1
src/screens/Planning/PlanningDisplayScreen.js View File

91
                 {this.displayData.logo !== null ?
91
                 {this.displayData.logo !== null ?
92
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
92
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
93
                         <ImageModal
93
                         <ImageModal
94
-                            isTranslucent={Platform.OS === 'android'}
95
                             resizeMode="contain"
94
                             resizeMode="contain"
96
                             imageBackgroundColor={this.colors.background}
95
                             imageBackgroundColor={this.colors.background}
97
                             style={{
96
                             style={{

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

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
4
+import {Animated, Image, Platform, ScrollView, StatusBar, View} from "react-native";
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import CustomModal from "../../components/Custom/CustomModal";
6
 import CustomModal from "../../components/Custom/CustomModal";
7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
298
 
298
 
299
     render() {
299
     render() {
300
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
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;
301
         return (
307
         return (
302
             <View style={{
308
             <View style={{
303
                 height: '100%'
309
                 height: '100%'
317
                     initialNumToRender={10}
323
                     initialNumToRender={10}
318
                     // Animations
324
                     // Animations
319
                     onScroll={onScroll}
325
                     onScroll={onScroll}
320
-                    contentContainerStyle={{paddingTop: containerPaddingTop}}
321
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
326
+                    contentContainerStyle={{paddingTop: padding}}
327
+                    scrollIndicatorInsets={{top: inset}}
322
                 />
328
                 />
323
             </View>
329
             </View>
324
         );
330
         );

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

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Alert, Platform, View} from 'react-native';
4
+import {Alert, Platform, StatusBar, View} from 'react-native';
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import WebSectionList from "../../components/Lists/WebSectionList";
6
 import WebSectionList from "../../components/Lists/WebSectionList";
7
 import * as Notifications from "../../utils/Notifications";
7
 import * as Notifications from "../../utils/Notifications";
421
     render() {
421
     render() {
422
         const nav = this.props.navigation;
422
         const nav = this.props.navigation;
423
         const {containerPaddingTop} = this.props.collapsibleStack;
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;
424
         return (
427
         return (
425
             <AnimatedFocusView
428
             <AnimatedFocusView
426
                 {...this.props}
429
                 {...this.props}
427
             >
430
             >
428
                 <Banner
431
                 <Banner
429
                     style={{
432
                     style={{
430
-                    marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
433
+                    marginTop: this.state.bannerVisible ? padding : 0,
431
                 }}
434
                 }}
432
                     visible={this.state.bannerVisible}
435
                     visible={this.state.bannerVisible}
433
                     actions={[
436
                     actions={[

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

5
 import WebViewScreen from "../../components/Screens/WebViewScreen";
5
 import WebViewScreen from "../../components/Screens/WebViewScreen";
6
 import {Avatar, Banner, withTheme} from "react-native-paper";
6
 import {Avatar, Banner, withTheme} from "react-native-paper";
7
 import i18n from "i18n-js";
7
 import i18n from "i18n-js";
8
-import {View} from "react-native";
8
+import {Platform, StatusBar, View} from "react-native";
9
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
9
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
10
 import AlertDialog from "../../components/Dialog/AlertDialog";
10
 import AlertDialog from "../../components/Dialog/AlertDialog";
11
 import {withCollapsible} from "../../utils/withCollapsible";
11
 import {withCollapsible} from "../../utils/withCollapsible";
299
 
299
 
300
     render() {
300
     render() {
301
         const {containerPaddingTop} = this.props.collapsibleStack;
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;
302
         return (
305
         return (
303
             <AnimatedFocusView
306
             <AnimatedFocusView
304
                 {...this.props}
307
                 {...this.props}
305
             >
308
             >
306
                 <Banner
309
                 <Banner
307
                     style={{
310
                     style={{
308
-                        marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
311
+                        marginTop: this.state.bannerVisible ? padding : 0,
309
                     }}
312
                     }}
310
                     visible={this.state.bannerVisible}
313
                     visible={this.state.bannerVisible}
311
                     actions={[
314
                     actions={[

Loading…
Cancel
Save