saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Temporary fix for statusbar height and image modal jump

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-18 01:03:48 +02:00
parent 2a3f19e092
commit 41eaaac350
13 changed files with 53 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
App.js
View file

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

4
app.json
View file

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

1
src/components/Home/FeedItem.js
View file

@ -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={{

14
src/components/Lists/WebSectionList.js
View file

@ -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}

7
src/components/Screens/WebViewScreen.js
View file

@ -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)}
/>

1
src/screens/Amicale/Clubs/ClubDisplayScreen.js
View file

@ -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={{

12
src/screens/Amicale/Clubs/ClubListScreen.js
View file

@ -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}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
contentContainerStyle={{paddingTop: padding}}
scrollIndicatorInsets={{top: inset}}
/>
)
};

1
src/screens/FeedItemScreen.js
View file

@ -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={{

3
src/screens/HomeScreen.js
View file

@ -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>
);
}
}

1
src/screens/Planning/PlanningDisplayScreen.js
View file

@ -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={{

12
src/screens/Proximo/ProximoListScreen.js
View file

@ -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}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
contentContainerStyle={{paddingTop: padding}}
scrollIndicatorInsets={{top: inset}}
/>
</View>
);

7
src/screens/Proxiwash/ProxiwashScreen.js
View file

@ -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={[

7
src/screens/Websites/PlanexScreen.js
View file

@ -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={[