Temporary fix for statusbar height and image modal jump

App.js

@@ -89,13 +89,15 @@ export default class App extends React.Component<Props, State> {
     };
 
     setupStatusBar() {
-        if (ThemeManager.getNightMode()) {
+        if (Platform.OS === 'ios') {
-            StatusBar.setBarStyle('light-content', true);
+            if (ThemeManager.getNightMode()) {
-        } else {
+                StatusBar.setBarStyle('light-content', true);
-            StatusBar.setBarStyle('dark-content', true);
+            } else {
+                StatusBar.setBarStyle('dark-content', true);
+            }
         }
-        StatusBar.setTranslucent(false);
+        // StatusBar.setTranslucent(false);
-        StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface);
+        // StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface);
     }
 
     /**

app.json

@@ -20,8 +20,8 @@
     "androidStatusBar": {
       "barStyle": "light-content",
       "hidden": false,
-      "translucent": true,
+      "translucent": false,
-      "backgroundColor": "#00000000"
+      "backgroundColor": "#000000"
     },
     "androidNavigationBar": {
       "barStyle": "light-content",

src/components/Home/FeedItem.js

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

src/components/Lists/WebSectionList.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {ERROR_TYPE, readData} from "../../utils/WebData";
 import i18n from "i18n-js";
 import {Snackbar} from 'react-native-paper';
-import {Animated, RefreshControl, View} from "react-native";
+import {Animated, Platform, RefreshControl, StatusBar, View} from "react-native";
 import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -205,6 +205,12 @@ class WebSectionList extends React.PureComponent<Props, State> {
             dataset = this.props.createDataset(this.state.fetchedData);
         const shouldRenderHeader = this.props.renderSectionHeader !== null;
         const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
+        const inset = Platform.OS === 'android'
+            ? scrollIndicatorInsetTop - StatusBar.currentHeight
+            : scrollIndicatorInsetTop;
         return (
             <View>
                 {/*$FlowFixMe*/}
@@ -213,7 +219,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     extraData={this.props.updateData}
                     refreshControl={
                         <RefreshControl
-                            progressViewOffset={containerPaddingTop}
+                            progressViewOffset={padding}
                             refreshing={this.state.refreshing}
                             onRefresh={this.onRefresh}
                         />
@@ -235,10 +241,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     // Animations
                     onScroll={onScrollWithListener(this.props.onScroll)}
                     contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
+                        paddingTop: padding,
                         minHeight: '100%'
                     }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                    scrollIndicatorInsets={{top: inset}}
                 />
                 <Snackbar
                     visible={this.state.snackbarVisible}

src/components/Screens/WebViewScreen.js

@@ -9,7 +9,7 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
 import {HiddenItem} from "react-navigation-header-buttons";
 import {Linking} from "expo";
 import i18n from 'i18n-js';
-import {Animated, BackHandler} from "react-native";
+import {Animated, BackHandler, Platform, StatusBar} from "react-native";
 import {withCollapsible} from "../../utils/withCollapsible";
 
 type Props = {
@@ -133,6 +133,9 @@ class WebViewScreen extends React.PureComponent<Props> {
 
     render() {
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android'  // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
         return (
             <AnimatedWebView
                 ref={this.webviewRef}
@@ -149,7 +152,7 @@ class WebViewScreen extends React.PureComponent<Props> {
                     this.canGoBack = navState.canGoBack;
                 }}
                 onMessage={this.props.onMessage}
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
                 // Animations
                 onScroll={onScrollWithListener(this.props.onScroll)}
             />

src/screens/Amicale/Clubs/ClubDisplayScreen.js

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

src/screens/Amicale/Clubs/ClubListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Platform} from "react-native";
+import {Animated, Platform, StatusBar} from "react-native";
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
@@ -97,6 +97,12 @@ class ClubListScreen extends React.Component<Props, State> {
     getScreen = (data: Object) => {
         this.categories = data[0].categories;
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
+        const inset = Platform.OS === 'android'
+            ? scrollIndicatorInsetTop - StatusBar.currentHeight
+            : scrollIndicatorInsetTop;
         return (
             //$FlowFixMe
             <Animated.FlatList
@@ -109,8 +115,8 @@ class ClubListScreen extends React.Component<Props, State> {
                 getItemLayout={this.itemLayout}
                 // Animations
                 onScroll={onScroll}
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
+                contentContainerStyle={{paddingTop: padding}}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                scrollIndicatorInsets={{top: inset}}
             />
         )
     };

src/screens/FeedItemScreen.js

@@ -67,7 +67,6 @@ class FeedItemScreen extends React.Component<Props> {
                 {hasImage ?
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
                         <ImageModal
-                            isTranslucent={Platform.OS === 'android'}
                             resizeMode="contain"
                             imageBackgroundColor={"#000"}
                             style={{

src/screens/HomeScreen.js

@@ -17,7 +17,6 @@ import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 import {AnimatedValue} from "react-native-reanimated";
 import AnimatedFAB from "../components/Custom/AnimatedFAB";
 import AnimatedFocusView from "../components/Custom/AnimatedFocusView";
-import {SafeAreaView} from "react-native-safe-area-context";
 // import DATA from "../dashboard_data.json";
 
 
@@ -472,7 +471,6 @@ class HomeScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         return (
-            <SafeAreaView style={{flex: 1,}}>
             <AnimatedFocusView
                 {...this.props}
             >
@@ -492,7 +490,6 @@ class HomeScreen extends React.Component<Props, State> {
                     onPress={this.openScanner}
                 />
             </AnimatedFocusView>
-            </SafeAreaView>
         );
     }
 }

src/screens/Planning/PlanningDisplayScreen.js

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

src/screens/Proximo/ProximoListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
+import {Animated, Image, Platform, ScrollView, StatusBar, View} from "react-native";
 import i18n from "i18n-js";
 import CustomModal from "../../components/Custom/CustomModal";
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
@@ -298,6 +298,12 @@ class ProximoListScreen extends React.Component<Props, State> {
 
     render() {
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
+        const inset = Platform.OS === 'android'
+            ? scrollIndicatorInsetTop - StatusBar.currentHeight
+            : scrollIndicatorInsetTop;
         return (
             <View style={{
                 height: '100%'
@@ -317,8 +323,8 @@ class ProximoListScreen extends React.Component<Props, State> {
                     initialNumToRender={10}
                     // Animations
                     onScroll={onScroll}
-                    contentContainerStyle={{paddingTop: containerPaddingTop}}
+                    contentContainerStyle={{paddingTop: padding}}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                    scrollIndicatorInsets={{top: inset}}
                 />
             </View>
         );

src/screens/Proxiwash/ProxiwashScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Alert, Platform, View} from 'react-native';
+import {Alert, Platform, StatusBar, View} from 'react-native';
 import i18n from "i18n-js";
 import WebSectionList from "../../components/Lists/WebSectionList";
 import * as Notifications from "../../utils/Notifications";
@@ -421,13 +421,16 @@ class ProxiwashScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         const {containerPaddingTop} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
         return (
             <AnimatedFocusView
                 {...this.props}
             >
                 <Banner
                     style={{
-                    marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
+                    marginTop: this.state.bannerVisible ? padding : 0,
                 }}
                     visible={this.state.bannerVisible}
                     actions={[

src/screens/Websites/PlanexScreen.js

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