vergnet/application-amicale
5
5
Fork 5
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
import * as React from 'react';
import {Container, Right} from "native-base";
import {Container} from "native-base";
import CustomHeader from "./CustomHeader";
import CustomSideMenu from "./CustomSideMenu";
import CustomMaterialIcon from "./CustomMaterialIcon";
import {Platform, View} from "react-native";
import ThemeManager from "../utils/ThemeManager";
import Touchable from "react-native-platform-touchable";
import {ScreenOrientation} from "expo";
type Props = {
@ -18,29 +19,30 @@ type Props = {
hasTabs: boolean,
hasBackButton: boolean,
hasSideMenu: boolean,
isHeaderVisible: boolean
}
type State = {
isOpen: boolean
isOpen: boolean,
isHeaderVisible: boolean
}
export default class BaseContainer extends React.Component<Props, State> {
willBlurSubscription: function;
willFocusSubscription: function;
static defaultProps = {
headerRightButton: <View/>,
hasTabs: false,
hasBackButton: false,
hasSideMenu: true,
isHeaderVisible: true,
};
state = {
isOpen: false,
isHeaderVisible: true,
};
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
*/
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(
'willBlur',
payload => {
@ -71,25 +82,29 @@ export default class BaseContainer extends React.Component<Props, State> {
componentWillUnmount() {
if (this.willBlurSubscription !== undefined)
this.willBlurSubscription.remove();
if (this.willFocusSubscription !== undefined)
this.willFocusSubscription.remove();
}
getMainContainer() {
return (
<Container>
<CustomHeader
navigation={this.props.navigation} title={this.props.headerTitle}
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
{this.state.isHeaderVisible ?
<CustomHeader
navigation={this.props.navigation} title={this.props.headerTitle}
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
: null}
{this.props.children}
</Container>
);
@ -97,7 +112,7 @@ export default class BaseContainer extends React.Component<Props, State> {
render() {
if (this.props.isHeaderVisible) {
// if (this.state.isHeaderVisible) {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@ -113,17 +128,17 @@ export default class BaseContainer extends React.Component<Props, State> {
this.getMainContainer()}
</View>
);
} else {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%',
height: '100%'
}}>
{this.props.children}
</View>
);
}
// } else {
// return (
// <View style={{
// backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
// width: '100%',
// height: '100%'
// }}>
// {this.props.children}
// </View>
// );
// }
}
}

3
components/WebViewScreen.js
View file

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