Browse Source

Planex webview is no longer reloading on orientation change

Yohan Simard 4 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
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Container, Right} from "native-base";
4
+import {Container} from "native-base";
5
 import CustomHeader from "./CustomHeader";
5
 import CustomHeader from "./CustomHeader";
6
 import CustomSideMenu from "./CustomSideMenu";
6
 import CustomSideMenu from "./CustomSideMenu";
7
 import CustomMaterialIcon from "./CustomMaterialIcon";
7
 import CustomMaterialIcon from "./CustomMaterialIcon";
8
 import {Platform, View} from "react-native";
8
 import {Platform, View} from "react-native";
9
 import ThemeManager from "../utils/ThemeManager";
9
 import ThemeManager from "../utils/ThemeManager";
10
 import Touchable from "react-native-platform-touchable";
10
 import Touchable from "react-native-platform-touchable";
11
+import {ScreenOrientation} from "expo";
11
 
12
 
12
 
13
 
13
 type Props = {
14
 type Props = {
18
     hasTabs: boolean,
19
     hasTabs: boolean,
19
     hasBackButton: boolean,
20
     hasBackButton: boolean,
20
     hasSideMenu: boolean,
21
     hasSideMenu: boolean,
21
-    isHeaderVisible: boolean
22
 }
22
 }
23
 
23
 
24
 type State = {
24
 type State = {
25
-    isOpen: boolean
25
+    isOpen: boolean,
26
+    isHeaderVisible: boolean
26
 }
27
 }
27
 
28
 
28
 
29
 
29
 export default class BaseContainer extends React.Component<Props, State> {
30
 export default class BaseContainer extends React.Component<Props, State> {
30
 
31
 
31
     willBlurSubscription: function;
32
     willBlurSubscription: function;
33
+    willFocusSubscription: function;
32
 
34
 
33
     static defaultProps = {
35
     static defaultProps = {
34
         headerRightButton: <View/>,
36
         headerRightButton: <View/>,
35
         hasTabs: false,
37
         hasTabs: false,
36
         hasBackButton: false,
38
         hasBackButton: false,
37
         hasSideMenu: true,
39
         hasSideMenu: true,
38
-        isHeaderVisible: true,
39
     };
40
     };
40
 
41
 
41
 
42
 
42
     state = {
43
     state = {
43
         isOpen: false,
44
         isOpen: false,
45
+        isHeaderVisible: true,
44
     };
46
     };
45
 
47
 
46
     toggle() {
48
     toggle() {
57
      * Register for blur event to close side menu on screen change
59
      * Register for blur event to close side menu on screen change
58
      */
60
      */
59
     componentDidMount() {
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
         this.willBlurSubscription = this.props.navigation.addListener(
71
         this.willBlurSubscription = this.props.navigation.addListener(
61
             'willBlur',
72
             'willBlur',
62
             payload => {
73
             payload => {
71
     componentWillUnmount() {
82
     componentWillUnmount() {
72
         if (this.willBlurSubscription !== undefined)
83
         if (this.willBlurSubscription !== undefined)
73
             this.willBlurSubscription.remove();
84
             this.willBlurSubscription.remove();
85
+        if (this.willFocusSubscription !== undefined)
86
+            this.willFocusSubscription.remove();
74
     }
87
     }
75
 
88
 
76
     getMainContainer() {
89
     getMainContainer() {
77
         return (
90
         return (
78
             <Container>
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
                 {this.props.children}
108
                 {this.props.children}
94
             </Container>
109
             </Container>
95
         );
110
         );
97
 
112
 
98
 
113
 
99
     render() {
114
     render() {
100
-        if (this.props.isHeaderVisible) {
115
+        // if (this.state.isHeaderVisible) {
101
             return (
116
             return (
102
                 <View style={{
117
                 <View style={{
103
                     backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
118
                     backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
113
                         this.getMainContainer()}
128
                         this.getMainContainer()}
114
                 </View>
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
                 headerTitle={this.props.headerTitle}
189
                 headerTitle={this.props.headerTitle}
190
                 headerRightButton={this.getRefreshButton()}
190
                 headerRightButton={this.getRefreshButton()}
191
                 hasBackButton={this.props.hasHeaderBackButton}
191
                 hasBackButton={this.props.hasHeaderBackButton}
192
-                hasSideMenu={this.props.hasSideMenu}
193
-                isHeaderVisible={!this.state.isLandscape}>
192
+                hasSideMenu={this.props.hasSideMenu}>
194
                 {this.props.data.length === 1 ?
193
                 {this.props.data.length === 1 ?
195
                     this.getWebview(this.props.data[0]) :
194
                     this.getWebview(this.props.data[0]) :
196
                     <Tabs
195
                     <Tabs

Loading…
Cancel
Save