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

6
App.js
View file

@ -89,13 +89,15 @@ export default class App extends React.Component<Props, State> {
};
setupStatusBar() {
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={[