forked from vergnet/application-amicale
Temporary fix for statusbar height and image modal jump
This commit is contained in:
parent
2a3f19e092
commit
41eaaac350
13 changed files with 53 additions and 31 deletions
14
App.js
14
App.js
|
@ -89,13 +89,15 @@ export default class App extends React.Component<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
setupStatusBar() {
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
4
app.json
4
app.json
|
@ -20,8 +20,8 @@
|
||||||
"androidStatusBar": {
|
"androidStatusBar": {
|
||||||
"barStyle": "light-content",
|
"barStyle": "light-content",
|
||||||
"hidden": false,
|
"hidden": false,
|
||||||
"translucent": true,
|
"translucent": false,
|
||||||
"backgroundColor": "#00000000"
|
"backgroundColor": "#000000"
|
||||||
},
|
},
|
||||||
"androidNavigationBar": {
|
"androidNavigationBar": {
|
||||||
"barStyle": "light-content",
|
"barStyle": "light-content",
|
||||||
|
|
|
@ -74,7 +74,6 @@ class FeedItem extends React.Component<Props> {
|
||||||
{hasImage ?
|
{hasImage ?
|
||||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||||
<ImageModal
|
<ImageModal
|
||||||
isTranslucent={Platform.OS === 'android'}
|
|
||||||
resizeMode="contain"
|
resizeMode="contain"
|
||||||
imageBackgroundColor={"#000"}
|
imageBackgroundColor={"#000"}
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||||
import {ERROR_TYPE, readData} from "../../utils/WebData";
|
import {ERROR_TYPE, readData} from "../../utils/WebData";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import {Snackbar} from 'react-native-paper';
|
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 ErrorView from "../Custom/ErrorView";
|
||||||
import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
|
import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
|
||||||
import {withCollapsible} from "../../utils/withCollapsible";
|
import {withCollapsible} from "../../utils/withCollapsible";
|
||||||
|
@ -205,6 +205,12 @@ class WebSectionList extends React.PureComponent<Props, State> {
|
||||||
dataset = this.props.createDataset(this.state.fetchedData);
|
dataset = this.props.createDataset(this.state.fetchedData);
|
||||||
const shouldRenderHeader = this.props.renderSectionHeader !== null;
|
const shouldRenderHeader = this.props.renderSectionHeader !== null;
|
||||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
|
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 (
|
return (
|
||||||
<View>
|
<View>
|
||||||
{/*$FlowFixMe*/}
|
{/*$FlowFixMe*/}
|
||||||
|
@ -213,7 +219,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
|
||||||
extraData={this.props.updateData}
|
extraData={this.props.updateData}
|
||||||
refreshControl={
|
refreshControl={
|
||||||
<RefreshControl
|
<RefreshControl
|
||||||
progressViewOffset={containerPaddingTop}
|
progressViewOffset={padding}
|
||||||
refreshing={this.state.refreshing}
|
refreshing={this.state.refreshing}
|
||||||
onRefresh={this.onRefresh}
|
onRefresh={this.onRefresh}
|
||||||
/>
|
/>
|
||||||
|
@ -235,10 +241,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
|
||||||
// Animations
|
// Animations
|
||||||
onScroll={onScrollWithListener(this.props.onScroll)}
|
onScroll={onScrollWithListener(this.props.onScroll)}
|
||||||
contentContainerStyle={{
|
contentContainerStyle={{
|
||||||
paddingTop: containerPaddingTop,
|
paddingTop: padding,
|
||||||
minHeight: '100%'
|
minHeight: '100%'
|
||||||
}}
|
}}
|
||||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
scrollIndicatorInsets={{top: inset}}
|
||||||
/>
|
/>
|
||||||
<Snackbar
|
<Snackbar
|
||||||
visible={this.state.snackbarVisible}
|
visible={this.state.snackbarVisible}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
|
||||||
import {HiddenItem} from "react-navigation-header-buttons";
|
import {HiddenItem} from "react-navigation-header-buttons";
|
||||||
import {Linking} from "expo";
|
import {Linking} from "expo";
|
||||||
import i18n from 'i18n-js';
|
import i18n from 'i18n-js';
|
||||||
import {Animated, BackHandler} from "react-native";
|
import {Animated, BackHandler, Platform, StatusBar} from "react-native";
|
||||||
import {withCollapsible} from "../../utils/withCollapsible";
|
import {withCollapsible} from "../../utils/withCollapsible";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -133,6 +133,9 @@ class WebViewScreen extends React.PureComponent<Props> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
|
const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
|
||||||
|
const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
|
||||||
|
? containerPaddingTop - StatusBar.currentHeight
|
||||||
|
: containerPaddingTop;
|
||||||
return (
|
return (
|
||||||
<AnimatedWebView
|
<AnimatedWebView
|
||||||
ref={this.webviewRef}
|
ref={this.webviewRef}
|
||||||
|
@ -149,7 +152,7 @@ class WebViewScreen extends React.PureComponent<Props> {
|
||||||
this.canGoBack = navState.canGoBack;
|
this.canGoBack = navState.canGoBack;
|
||||||
}}
|
}}
|
||||||
onMessage={this.props.onMessage}
|
onMessage={this.props.onMessage}
|
||||||
onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
|
onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
|
||||||
// Animations
|
// Animations
|
||||||
onScroll={onScrollWithListener(this.props.onScroll)}
|
onScroll={onScrollWithListener(this.props.onScroll)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -126,7 +126,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
}}>
|
}}>
|
||||||
<ImageModal
|
<ImageModal
|
||||||
isTranslucent={Platform.OS === 'android'}
|
|
||||||
resizeMode="contain"
|
resizeMode="contain"
|
||||||
imageBackgroundColor={this.colors.background}
|
imageBackgroundColor={this.colors.background}
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
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 {Chip, Searchbar, withTheme} from 'react-native-paper';
|
||||||
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
|
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
|
@ -97,6 +97,12 @@ class ClubListScreen extends React.Component<Props, State> {
|
||||||
getScreen = (data: Object) => {
|
getScreen = (data: Object) => {
|
||||||
this.categories = data[0].categories;
|
this.categories = data[0].categories;
|
||||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
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 (
|
return (
|
||||||
//$FlowFixMe
|
//$FlowFixMe
|
||||||
<Animated.FlatList
|
<Animated.FlatList
|
||||||
|
@ -109,8 +115,8 @@ class ClubListScreen extends React.Component<Props, State> {
|
||||||
getItemLayout={this.itemLayout}
|
getItemLayout={this.itemLayout}
|
||||||
// Animations
|
// Animations
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
contentContainerStyle={{paddingTop: containerPaddingTop}}
|
contentContainerStyle={{paddingTop: padding}}
|
||||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
scrollIndicatorInsets={{top: inset}}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
|
@ -67,7 +67,6 @@ class FeedItemScreen extends React.Component<Props> {
|
||||||
{hasImage ?
|
{hasImage ?
|
||||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||||
<ImageModal
|
<ImageModal
|
||||||
isTranslucent={Platform.OS === 'android'}
|
|
||||||
resizeMode="contain"
|
resizeMode="contain"
|
||||||
imageBackgroundColor={"#000"}
|
imageBackgroundColor={"#000"}
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -17,7 +17,6 @@ import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
|
||||||
import {AnimatedValue} from "react-native-reanimated";
|
import {AnimatedValue} from "react-native-reanimated";
|
||||||
import AnimatedFAB from "../components/Custom/AnimatedFAB";
|
import AnimatedFAB from "../components/Custom/AnimatedFAB";
|
||||||
import AnimatedFocusView from "../components/Custom/AnimatedFocusView";
|
import AnimatedFocusView from "../components/Custom/AnimatedFocusView";
|
||||||
import {SafeAreaView} from "react-native-safe-area-context";
|
|
||||||
// import DATA from "../dashboard_data.json";
|
// import DATA from "../dashboard_data.json";
|
||||||
|
|
||||||
|
|
||||||
|
@ -472,7 +471,6 @@ class HomeScreen extends React.Component<Props, State> {
|
||||||
render() {
|
render() {
|
||||||
const nav = this.props.navigation;
|
const nav = this.props.navigation;
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={{flex: 1,}}>
|
|
||||||
<AnimatedFocusView
|
<AnimatedFocusView
|
||||||
{...this.props}
|
{...this.props}
|
||||||
>
|
>
|
||||||
|
@ -492,7 +490,6 @@ class HomeScreen extends React.Component<Props, State> {
|
||||||
onPress={this.openScanner}
|
onPress={this.openScanner}
|
||||||
/>
|
/>
|
||||||
</AnimatedFocusView>
|
</AnimatedFocusView>
|
||||||
</SafeAreaView>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,7 +91,6 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
||||||
{this.displayData.logo !== null ?
|
{this.displayData.logo !== null ?
|
||||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||||
<ImageModal
|
<ImageModal
|
||||||
isTranslucent={Platform.OS === 'android'}
|
|
||||||
resizeMode="contain"
|
resizeMode="contain"
|
||||||
imageBackgroundColor={this.colors.background}
|
imageBackgroundColor={this.colors.background}
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
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 i18n from "i18n-js";
|
||||||
import CustomModal from "../../components/Custom/CustomModal";
|
import CustomModal from "../../components/Custom/CustomModal";
|
||||||
import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
||||||
|
@ -298,6 +298,12 @@ class ProximoListScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
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 (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
height: '100%'
|
height: '100%'
|
||||||
|
@ -317,8 +323,8 @@ class ProximoListScreen extends React.Component<Props, State> {
|
||||||
initialNumToRender={10}
|
initialNumToRender={10}
|
||||||
// Animations
|
// Animations
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
contentContainerStyle={{paddingTop: containerPaddingTop}}
|
contentContainerStyle={{paddingTop: padding}}
|
||||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
scrollIndicatorInsets={{top: inset}}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
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 i18n from "i18n-js";
|
||||||
import WebSectionList from "../../components/Lists/WebSectionList";
|
import WebSectionList from "../../components/Lists/WebSectionList";
|
||||||
import * as Notifications from "../../utils/Notifications";
|
import * as Notifications from "../../utils/Notifications";
|
||||||
|
@ -421,13 +421,16 @@ class ProxiwashScreen extends React.Component<Props, State> {
|
||||||
render() {
|
render() {
|
||||||
const nav = this.props.navigation;
|
const nav = this.props.navigation;
|
||||||
const {containerPaddingTop} = this.props.collapsibleStack;
|
const {containerPaddingTop} = this.props.collapsibleStack;
|
||||||
|
const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
|
||||||
|
? containerPaddingTop - StatusBar.currentHeight
|
||||||
|
: containerPaddingTop;
|
||||||
return (
|
return (
|
||||||
<AnimatedFocusView
|
<AnimatedFocusView
|
||||||
{...this.props}
|
{...this.props}
|
||||||
>
|
>
|
||||||
<Banner
|
<Banner
|
||||||
style={{
|
style={{
|
||||||
marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
|
marginTop: this.state.bannerVisible ? padding : 0,
|
||||||
}}
|
}}
|
||||||
visible={this.state.bannerVisible}
|
visible={this.state.bannerVisible}
|
||||||
actions={[
|
actions={[
|
||||||
|
|
|
@ -5,7 +5,7 @@ import ThemeManager from "../../managers/ThemeManager";
|
||||||
import WebViewScreen from "../../components/Screens/WebViewScreen";
|
import WebViewScreen from "../../components/Screens/WebViewScreen";
|
||||||
import {Avatar, Banner, withTheme} from "react-native-paper";
|
import {Avatar, Banner, withTheme} from "react-native-paper";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import {View} from "react-native";
|
import {Platform, StatusBar, View} from "react-native";
|
||||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||||
import AlertDialog from "../../components/Dialog/AlertDialog";
|
import AlertDialog from "../../components/Dialog/AlertDialog";
|
||||||
import {withCollapsible} from "../../utils/withCollapsible";
|
import {withCollapsible} from "../../utils/withCollapsible";
|
||||||
|
@ -299,13 +299,16 @@ class PlanexScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {containerPaddingTop} = this.props.collapsibleStack;
|
const {containerPaddingTop} = this.props.collapsibleStack;
|
||||||
|
const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
|
||||||
|
? containerPaddingTop - StatusBar.currentHeight
|
||||||
|
: containerPaddingTop;
|
||||||
return (
|
return (
|
||||||
<AnimatedFocusView
|
<AnimatedFocusView
|
||||||
{...this.props}
|
{...this.props}
|
||||||
>
|
>
|
||||||
<Banner
|
<Banner
|
||||||
style={{
|
style={{
|
||||||
marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
|
marginTop: this.state.bannerVisible ? padding : 0,
|
||||||
}}
|
}}
|
||||||
visible={this.state.bannerVisible}
|
visible={this.state.bannerVisible}
|
||||||
actions={[
|
actions={[
|
||||||
|
|
Loading…
Reference in a new issue