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

Planex webview is no longer reloading on orientation change

Browse source
This commit is contained in:
Yohan Simard 2020-01-29 00:29:29 +01:00
parent 41f869952a
commit 57725b2eef
2 changed files with 46 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
components/BaseContainer.js
View file

@ -1,13 +1,14 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Container, Right} from "native-base"; import {Container} from "native-base";
import CustomHeader from "./CustomHeader"; import CustomHeader from "./CustomHeader";
import CustomSideMenu from "./CustomSideMenu"; import CustomSideMenu from "./CustomSideMenu";
import CustomMaterialIcon from "./CustomMaterialIcon"; import CustomMaterialIcon from "./CustomMaterialIcon";
import {Platform, View} from "react-native"; import {Platform, View} from "react-native";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
import {ScreenOrientation} from "expo";
type Props = { type Props = {
@ -18,29 +19,30 @@ type Props = {
hasTabs: boolean, hasTabs: boolean,
hasBackButton: boolean, hasBackButton: boolean,
hasSideMenu: boolean, hasSideMenu: boolean,
isHeaderVisible: boolean
} }
type State = { type State = {
isOpen: boolean isOpen: boolean,
isHeaderVisible: boolean
} }
export default class BaseContainer extends React.Component<Props, State> { export default class BaseContainer extends React.Component<Props, State> {
willBlurSubscription: function; willBlurSubscription: function;
willFocusSubscription: function;
static defaultProps = { static defaultProps = {
headerRightButton: <View/>, headerRightButton: <View/>,
hasTabs: false, hasTabs: false,
hasBackButton: false, hasBackButton: false,
hasSideMenu: true, hasSideMenu: true,
isHeaderVisible: true,
}; };
state = { state = {
isOpen: false, isOpen: false,
isHeaderVisible: true,
}; };
toggle() { toggle() {
@ -57,6 +59,15 @@ export default class BaseContainer extends React.Component<Props, State> {
* Register for blur event to close side menu on screen change * Register for blur event to close side menu on screen change
*/ */
componentDidMount() { componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
ScreenOrientation.unlockAsync();
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
this.setState({isHeaderVisible: !isLandscape});
});
});
this.willBlurSubscription = this.props.navigation.addListener( this.willBlurSubscription = this.props.navigation.addListener(
'willBlur', 'willBlur',
payload => { payload => {
@ -71,25 +82,29 @@ export default class BaseContainer extends React.Component<Props, State> {
componentWillUnmount() { componentWillUnmount() {
if (this.willBlurSubscription !== undefined) if (this.willBlurSubscription !== undefined)
this.willBlurSubscription.remove(); this.willBlurSubscription.remove();
if (this.willFocusSubscription !== undefined)
this.willFocusSubscription.remove();
} }
getMainContainer() { getMainContainer() {
return ( return (
<Container> <Container>
<CustomHeader {this.state.isHeaderVisible ?
navigation={this.props.navigation} title={this.props.headerTitle} <CustomHeader
leftButton={ navigation={this.props.navigation} title={this.props.headerTitle}
<Touchable leftButton={
style={{padding: 6}} <Touchable
onPress={() => this.toggle()}> style={{padding: 6}}
<CustomMaterialIcon onPress={() => this.toggle()}>
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} <CustomMaterialIcon
icon="menu"/> color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
</Touchable> icon="menu"/>
} </Touchable>
rightButton={this.props.headerRightButton} }
hasTabs={this.props.hasTabs} rightButton={this.props.headerRightButton}
hasBackButton={this.props.hasBackButton}/> hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
: null}
{this.props.children} {this.props.children}
</Container> </Container>
); );
@ -97,7 +112,7 @@ export default class BaseContainer extends React.Component<Props, State> {
render() { render() {
if (this.props.isHeaderVisible) { // if (this.state.isHeaderVisible) {
return ( return (
<View style={{ <View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor, backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@ -113,17 +128,17 @@ export default class BaseContainer extends React.Component<Props, State> {
this.getMainContainer()} this.getMainContainer()}
</View> </View>
); );
} else { // } else {
return ( // return (
<View style={{ // <View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor, // backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%', // width: '100%',
height: '100%' // height: '100%'
}}> // }}>
{this.props.children} // {this.props.children}
</View> // </View>
); // );
} // }
} }
} }

3
components/WebViewScreen.js
View file

@ -189,8 +189,7 @@ export default class WebViewScreen extends React.Component<Props, State> {
headerTitle={this.props.headerTitle} headerTitle={this.props.headerTitle}
headerRightButton={this.getRefreshButton()} headerRightButton={this.getRefreshButton()}
hasBackButton={this.props.hasHeaderBackButton} hasBackButton={this.props.hasHeaderBackButton}
hasSideMenu={this.props.hasSideMenu} hasSideMenu={this.props.hasSideMenu}>
isHeaderVisible={!this.state.isLandscape}>
{this.props.data.length === 1 ? {this.props.data.length === 1 ?
this.getWebview(this.props.data[0]) : this.getWebview(this.props.data[0]) :
<Tabs <Tabs