Browse Source

Temporary fix for statusbar height and image modal jump

Arnaud Vergnet 1 year ago
parent
commit
41eaaac350

+ 8
- 6
App.js View File

@@ -89,13 +89,15 @@ export default class App extends React.Component<Props, State> {
89 89
     };
90 90
 
91 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,8 +20,8 @@
20 20
     "androidStatusBar": {
21 21
       "barStyle": "light-content",
22 22
       "hidden": false,
23
-      "translucent": true,
24
-      "backgroundColor": "#00000000"
23
+      "translucent": false,
24
+      "backgroundColor": "#000000"
25 25
     },
26 26
     "androidNavigationBar": {
27 27
       "barStyle": "light-content",

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

@@ -74,7 +74,6 @@ class FeedItem extends React.Component<Props> {
74 74
                 {hasImage ?
75 75
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
76 76
                         <ImageModal
77
-                            isTranslucent={Platform.OS === 'android'}
78 77
                             resizeMode="contain"
79 78
                             imageBackgroundColor={"#000"}
80 79
                             style={{

+ 10
- 4
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, RefreshControl, View} from "react-native";
7
+import {Animated, Platform, RefreshControl, StatusBar, 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,6 +205,12 @@ 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;
208 214
         return (
209 215
             <View>
210 216
                 {/*$FlowFixMe*/}
@@ -213,7 +219,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
213 219
                     extraData={this.props.updateData}
214 220
                     refreshControl={
215 221
                         <RefreshControl
216
-                            progressViewOffset={containerPaddingTop}
222
+                            progressViewOffset={padding}
217 223
                             refreshing={this.state.refreshing}
218 224
                             onRefresh={this.onRefresh}
219 225
                         />
@@ -235,10 +241,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
235 241
                     // Animations
236 242
                     onScroll={onScrollWithListener(this.props.onScroll)}
237 243
                     contentContainerStyle={{
238
-                        paddingTop: containerPaddingTop,
244
+                        paddingTop: padding,
239 245
                         minHeight: '100%'
240 246
                     }}
241
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
247
+                    scrollIndicatorInsets={{top: inset}}
242 248
                 />
243 249
                 <Snackbar
244 250
                     visible={this.state.snackbarVisible}

+ 5
- 2
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} from "react-native";
12
+import {Animated, BackHandler, Platform, StatusBar} from "react-native";
13 13
 import {withCollapsible} from "../../utils/withCollapsible";
14 14
 
15 15
 type Props = {
@@ -133,6 +133,9 @@ 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;
136 139
         return (
137 140
             <AnimatedWebView
138 141
                 ref={this.webviewRef}
@@ -149,7 +152,7 @@ class WebViewScreen extends React.PureComponent<Props> {
149 152
                     this.canGoBack = navState.canGoBack;
150 153
                 }}
151 154
                 onMessage={this.props.onMessage}
152
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
155
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
153 156
                 // Animations
154 157
                 onScroll={onScrollWithListener(this.props.onScroll)}
155 158
             />

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

@@ -126,7 +126,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
126 126
                         marginBottom: 10,
127 127
                     }}>
128 128
                         <ImageModal
129
-                            isTranslucent={Platform.OS === 'android'}
130 129
                             resizeMode="contain"
131 130
                             imageBackgroundColor={this.colors.background}
132 131
                             style={{

+ 9
- 3
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} from "react-native";
4
+import {Animated, Platform, StatusBar} 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,6 +97,12 @@ 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;
100 106
         return (
101 107
             //$FlowFixMe
102 108
             <Animated.FlatList
@@ -109,8 +115,8 @@ class ClubListScreen extends React.Component<Props, State> {
109 115
                 getItemLayout={this.itemLayout}
110 116
                 // Animations
111 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,7 +67,6 @@ class FeedItemScreen extends React.Component<Props> {
67 67
                 {hasImage ?
68 68
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
69 69
                         <ImageModal
70
-                            isTranslucent={Platform.OS === 'android'}
71 70
                             resizeMode="contain"
72 71
                             imageBackgroundColor={"#000"}
73 72
                             style={{

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

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

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

@@ -91,7 +91,6 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
91 91
                 {this.displayData.logo !== null ?
92 92
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
93 93
                         <ImageModal
94
-                            isTranslucent={Platform.OS === 'android'}
95 94
                             resizeMode="contain"
96 95
                             imageBackgroundColor={this.colors.background}
97 96
                             style={{

+ 9
- 3
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, View} from "react-native";
4
+import {Animated, Image, Platform, ScrollView, StatusBar, 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,6 +298,12 @@ 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;
301 307
         return (
302 308
             <View style={{
303 309
                 height: '100%'
@@ -317,8 +323,8 @@ class ProximoListScreen extends React.Component<Props, State> {
317 323
                     initialNumToRender={10}
318 324
                     // Animations
319 325
                     onScroll={onScroll}
320
-                    contentContainerStyle={{paddingTop: containerPaddingTop}}
321
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
326
+                    contentContainerStyle={{paddingTop: padding}}
327
+                    scrollIndicatorInsets={{top: inset}}
322 328
                 />
323 329
             </View>
324 330
         );

+ 5
- 2
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, View} from 'react-native';
4
+import {Alert, Platform, StatusBar, 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,13 +421,16 @@ 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;
424 427
         return (
425 428
             <AnimatedFocusView
426 429
                 {...this.props}
427 430
             >
428 431
                 <Banner
429 432
                     style={{
430
-                    marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
433
+                    marginTop: this.state.bannerVisible ? padding : 0,
431 434
                 }}
432 435
                     visible={this.state.bannerVisible}
433 436
                     actions={[

+ 5
- 2
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 {View} from "react-native";
8
+import {Platform, StatusBar, 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,13 +299,16 @@ 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;
302 305
         return (
303 306
             <AnimatedFocusView
304 307
                 {...this.props}
305 308
             >
306 309
                 <Banner
307 310
                     style={{
308
-                        marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
311
+                        marginTop: this.state.bannerVisible ? padding : 0,
309 312
                     }}
310 313
                     visible={this.state.bannerVisible}
311 314
                     actions={[

Loading…
Cancel
Save