From e157af57d109972ac0ea927d0e8f6ec7003578a1 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Sat, 18 Apr 2020 10:57:00 +0200 Subject: [PATCH] Improved status bar height fix --- src/components/Lists/WebSectionList.js | 14 ++++-------- src/components/Screens/WebViewScreen.js | 7 ++---- src/screens/Amicale/Clubs/ClubListScreen.js | 12 +++------- src/screens/GroupSelectionScreen.js | 1 - src/screens/Proximo/ProximoListScreen.js | 12 +++------- src/screens/Proxiwash/ProxiwashScreen.js | 7 ++---- src/screens/Websites/PlanexScreen.js | 7 ++---- src/utils/withCollapsible.js | 25 ++++++++++++++++++++- 8 files changed, 40 insertions(+), 45 deletions(-) diff --git a/src/components/Lists/WebSectionList.js b/src/components/Lists/WebSectionList.js index 9cbe515..a3990bf 100644 --- a/src/components/Lists/WebSectionList.js +++ b/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 { 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 ( {/*$FlowFixMe*/} @@ -219,7 +213,7 @@ class WebSectionList extends React.PureComponent { extraData={this.props.updateData} refreshControl={ @@ -241,10 +235,10 @@ class WebSectionList extends React.PureComponent { // Animations onScroll={onScrollWithListener(this.props.onScroll)} contentContainerStyle={{ - paddingTop: padding, + paddingTop: containerPaddingTop, minHeight: '100%' }} - scrollIndicatorInsets={{top: inset}} + scrollIndicatorInsets={{top: scrollIndicatorInsetTop}} /> { 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 ( { 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)} /> diff --git a/src/screens/Amicale/Clubs/ClubListScreen.js b/src/screens/Amicale/Clubs/ClubListScreen.js index 4bb5948..04a30fb 100644 --- a/src/screens/Amicale/Clubs/ClubListScreen.js +++ b/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 { 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 { getItemLayout={this.itemLayout} // Animations onScroll={onScroll} - contentContainerStyle={{paddingTop: padding}} - scrollIndicatorInsets={{top: inset}} + contentContainerStyle={{paddingTop: containerPaddingTop}} + scrollIndicatorInsets={{top: scrollIndicatorInsetTop}} /> ) }; diff --git a/src/screens/GroupSelectionScreen.js b/src/screens/GroupSelectionScreen.js index c934b66..34c1833 100644 --- a/src/screens/GroupSelectionScreen.js +++ b/src/screens/GroupSelectionScreen.js @@ -15,7 +15,6 @@ type Props = { navigation: Object, route: Object, theme: Object, - collapsibleStack: Object, } type State = { diff --git a/src/screens/Proximo/ProximoListScreen.js b/src/screens/Proximo/ProximoListScreen.js index 51bc568..8139cb9 100644 --- a/src/screens/Proximo/ProximoListScreen.js +++ b/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 { 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 ( { initialNumToRender={10} // Animations onScroll={onScroll} - contentContainerStyle={{paddingTop: padding}} - scrollIndicatorInsets={{top: inset}} + contentContainerStyle={{paddingTop: containerPaddingTop}} + scrollIndicatorInsets={{top: scrollIndicatorInsetTop}} /> ); diff --git a/src/screens/Proxiwash/ProxiwashScreen.js b/src/screens/Proxiwash/ProxiwashScreen.js index 8012d49..5118c62 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.js +++ b/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 { 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 ( { render() { const {containerPaddingTop} = this.props.collapsibleStack; - const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo - ? containerPaddingTop - StatusBar.currentHeight - : containerPaddingTop; return ( { return React.forwardRef((props: any, ref: any) => { - return ; + + const { + onScroll, + onScrollWithListener, + containerPaddingTop, + scrollIndicatorInsetTop, + translateY, + progress, + opacity, + } = useCollapsibleStack(); + return ; }); };