Improved status bar height fix

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, Platform, RefreshControl, StatusBar, View} from "react-native";
+import {Animated, RefreshControl, View} from "react-native";
 import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -205,12 +205,6 @@ 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*/}
@@ -219,7 +213,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     extraData={this.props.updateData}
                     refreshControl={
                         <RefreshControl
-                            progressViewOffset={padding}
+                            progressViewOffset={containerPaddingTop}
                             refreshing={this.state.refreshing}
                             onRefresh={this.onRefresh}
                         />
@@ -241,10 +235,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     // Animations
                     onScroll={onScrollWithListener(this.props.onScroll)}
                     contentContainerStyle={{
-                        paddingTop: padding,
+                        paddingTop: containerPaddingTop,
                         minHeight: '100%'
                     }}
-                    scrollIndicatorInsets={{top: inset}}
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
                 <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, Platform, StatusBar} from "react-native";
+import {Animated, BackHandler} from "react-native";
 import {withCollapsible} from "../../utils/withCollapsible";
 
 type Props = {
@@ -133,9 +133,6 @@ 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}
@@ -152,7 +149,7 @@ class WebViewScreen extends React.PureComponent<Props> {
                     this.canGoBack = navState.canGoBack;
                 }}
                 onMessage={this.props.onMessage}
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
                 // Animations
                 onScroll={onScrollWithListener(this.props.onScroll)}
             />

src/screens/Amicale/Clubs/ClubListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Platform, StatusBar} from "react-native";
+import {Animated, Platform} from "react-native";
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
@@ -97,12 +97,6 @@ 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
@@ -115,8 +109,8 @@ class ClubListScreen extends React.Component<Props, State> {
                 getItemLayout={this.itemLayout}
                 // Animations
                 onScroll={onScroll}
-                contentContainerStyle={{paddingTop: padding}}
+                contentContainerStyle={{paddingTop: containerPaddingTop}}
-                scrollIndicatorInsets={{top: inset}}
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
             />
         )
     };

src/screens/GroupSelectionScreen.js

@@ -15,7 +15,6 @@ type Props = {
     navigation: Object,
     route: Object,
     theme: Object,
-    collapsibleStack: Object,
 }
 
 type State = {

src/screens/Proximo/ProximoListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image, Platform, ScrollView, StatusBar, View} from "react-native";
+import {Animated, Image, Platform, ScrollView, 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,12 +298,6 @@ 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%'
@@ -323,8 +317,8 @@ class ProximoListScreen extends React.Component<Props, State> {
                     initialNumToRender={10}
                     // Animations
                     onScroll={onScroll}
-                    contentContainerStyle={{paddingTop: padding}}
+                    contentContainerStyle={{paddingTop: containerPaddingTop}}
-                    scrollIndicatorInsets={{top: inset}}
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
             </View>
         );

src/screens/Proxiwash/ProxiwashScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Alert, Platform, StatusBar, View} from 'react-native';
+import {Alert, Platform, View} from 'react-native';
 import i18n from "i18n-js";
 import WebSectionList from "../../components/Lists/WebSectionList";
 import * as Notifications from "../../utils/Notifications";
@@ -421,16 +421,13 @@ 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 ? padding : 0,
+                    marginTop: this.state.bannerVisible ? containerPaddingTop : 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 {Platform, StatusBar, View} from "react-native";
+import {View} from "react-native";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import AlertDialog from "../../components/Dialog/AlertDialog";
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -299,16 +299,13 @@ 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 ? padding : 0,
+                        marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
                     }}
                     visible={this.state.bannerVisible}
                     actions={[

src/utils/withCollapsible.js

@@ -1,8 +1,31 @@
 import React from 'react';
+import {StatusBar} from 'react-native';
 import {useCollapsibleStack} from "react-navigation-collapsible";
 
 export const withCollapsible = (Component: any) => {
     return React.forwardRef((props: any, ref: any) => {
-        return <Component collapsibleStack={useCollapsibleStack()} ref={ref} {...props} />;
+
+        const {
+            onScroll,
+            onScrollWithListener,
+            containerPaddingTop,
+            scrollIndicatorInsetTop,
+            translateY,
+            progress,
+            opacity,
+        } = useCollapsibleStack();
+        return <Component
+            collapsibleStack={{
+                onScroll,
+                onScrollWithListener,
+                containerPaddingTop: containerPaddingTop - StatusBar.currentHeight,
+                scrollIndicatorInsetTop: scrollIndicatorInsetTop - StatusBar.currentHeight,
+                translateY,
+                progress,
+                opacity,
+            }}
+            ref={ref}
+            {...props}
+        />;
     });
 };