Browse Source

Planex webview is no longer reloading on orientation change

Yohan Simard 2 years ago
parent
commit
57725b2eef
2 changed files with 46 additions and 32 deletions
  1. 45
    30
      components/BaseContainer.js
  2. 1
    2
      components/WebViewScreen.js

+ 45
- 30
components/BaseContainer.js View File

@@ -1,13 +1,14 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Container, Right} from "native-base";
4
+import {Container} from "native-base";
5 5
 import CustomHeader from "./CustomHeader";
6 6
 import CustomSideMenu from "./CustomSideMenu";
7 7
 import CustomMaterialIcon from "./CustomMaterialIcon";
8 8
 import {Platform, View} from "react-native";
9 9
 import ThemeManager from "../utils/ThemeManager";
10 10
 import Touchable from "react-native-platform-touchable";
11
+import {ScreenOrientation} from "expo";
11 12
 
12 13
 
13 14
 type Props = {
@@ -18,29 +19,30 @@ type Props = {
18 19
     hasTabs: boolean,
19 20
     hasBackButton: boolean,
20 21
     hasSideMenu: boolean,
21
-    isHeaderVisible: boolean
22 22
 }
23 23
 
24 24
 type State = {
25
-    isOpen: boolean
25
+    isOpen: boolean,
26
+    isHeaderVisible: boolean
26 27
 }
27 28
 
28 29
 
29 30
 export default class BaseContainer extends React.Component<Props, State> {
30 31
 
31 32
     willBlurSubscription: function;
33
+    willFocusSubscription: function;
32 34
 
33 35
     static defaultProps = {
34 36
         headerRightButton: <View/>,
35 37
         hasTabs: false,
36 38
         hasBackButton: false,
37 39
         hasSideMenu: true,
38
-        isHeaderVisible: true,
39 40
     };
40 41
 
41 42
 
42 43
     state = {
43 44
         isOpen: false,
45
+        isHeaderVisible: true,
44 46
     };
45 47
 
46 48
     toggle() {
@@ -57,6 +59,15 @@ export default class BaseContainer extends React.Component<Props, State> {
57 59
      * Register for blur event to close side menu on screen change
58 60
      */
59 61
     componentDidMount() {
62
+        this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
63
+            ScreenOrientation.unlockAsync();
64
+            ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
65
+                let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
66
+                    OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
67
+                    OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
68
+                this.setState({isHeaderVisible: !isLandscape});
69
+            });
70
+        });
60 71
         this.willBlurSubscription = this.props.navigation.addListener(
61 72
             'willBlur',
62 73
             payload => {
@@ -71,25 +82,29 @@ export default class BaseContainer extends React.Component<Props, State> {
71 82
     componentWillUnmount() {
72 83
         if (this.willBlurSubscription !== undefined)
73 84
             this.willBlurSubscription.remove();
85
+        if (this.willFocusSubscription !== undefined)
86
+            this.willFocusSubscription.remove();
74 87
     }
75 88
 
76 89
     getMainContainer() {
77 90
         return (
78 91
             <Container>
79
-                <CustomHeader
80
-                    navigation={this.props.navigation} title={this.props.headerTitle}
81
-                    leftButton={
82
-                        <Touchable
83
-                            style={{padding: 6}}
84
-                            onPress={() => this.toggle()}>
85
-                            <CustomMaterialIcon
86
-                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
87
-                                icon="menu"/>
88
-                        </Touchable>
89
-                    }
90
-                    rightButton={this.props.headerRightButton}
91
-                    hasTabs={this.props.hasTabs}
92
-                    hasBackButton={this.props.hasBackButton}/>
92
+                {this.state.isHeaderVisible ?
93
+                    <CustomHeader
94
+                        navigation={this.props.navigation} title={this.props.headerTitle}
95
+                        leftButton={
96
+                            <Touchable
97
+                                style={{padding: 6}}
98
+                                onPress={() => this.toggle()}>
99
+                                <CustomMaterialIcon
100
+                                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
101
+                                    icon="menu"/>
102
+                            </Touchable>
103
+                        }
104
+                        rightButton={this.props.headerRightButton}
105
+                        hasTabs={this.props.hasTabs}
106
+                        hasBackButton={this.props.hasBackButton}/>
107
+                    : null}
93 108
                 {this.props.children}
94 109
             </Container>
95 110
         );
@@ -97,7 +112,7 @@ export default class BaseContainer extends React.Component<Props, State> {
97 112
 
98 113
 
99 114
     render() {
100
-        if (this.props.isHeaderVisible) {
115
+        // if (this.state.isHeaderVisible) {
101 116
             return (
102 117
                 <View style={{
103 118
                     backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@@ -113,17 +128,17 @@ export default class BaseContainer extends React.Component<Props, State> {
113 128
                         this.getMainContainer()}
114 129
                 </View>
115 130
             );
116
-        } else {
117
-            return (
118
-                <View style={{
119
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
120
-                    width: '100%',
121
-                    height: '100%'
122
-                }}>
123
-                    {this.props.children}
124
-                </View>
125
-            );
126
-        }
131
+        // } else {
132
+        //     return (
133
+        //         <View style={{
134
+        //             backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
135
+        //             width: '100%',
136
+        //             height: '100%'
137
+        //         }}>
138
+        //             {this.props.children}
139
+        //         </View>
140
+        //     );
141
+        // }
127 142
 
128 143
     }
129 144
 }

+ 1
- 2
components/WebViewScreen.js View File

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

Loading…
Cancel
Save