|
@@ -9,6 +9,7 @@ import {Platform, View} from "react-native";
|
9
|
9
|
import ThemeManager from "../utils/ThemeManager";
|
10
|
10
|
import Touchable from "react-native-platform-touchable";
|
11
|
11
|
import {ScreenOrientation} from "expo";
|
|
12
|
+import {NavigationActions} from "react-navigation";
|
12
|
13
|
|
13
|
14
|
|
14
|
15
|
type Props = {
|
|
@@ -19,6 +20,8 @@ type Props = {
|
19
|
20
|
hasTabs: boolean,
|
20
|
21
|
hasBackButton: boolean,
|
21
|
22
|
hasSideMenu: boolean,
|
|
23
|
+ enableRotation: boolean,
|
|
24
|
+ hideHeaderOnLandscape: boolean,
|
22
|
25
|
}
|
23
|
26
|
|
24
|
27
|
type State = {
|
|
@@ -37,6 +40,8 @@ export default class BaseContainer extends React.Component<Props, State> {
|
37
|
40
|
hasTabs: false,
|
38
|
41
|
hasBackButton: false,
|
39
|
42
|
hasSideMenu: true,
|
|
43
|
+ enableRotation: false,
|
|
44
|
+ hideHeaderOnLandscape: false,
|
40
|
45
|
};
|
41
|
46
|
|
42
|
47
|
|
|
@@ -59,18 +64,31 @@ export default class BaseContainer extends React.Component<Props, State> {
|
59
|
64
|
* Register for blur event to close side menu on screen change
|
60
|
65
|
*/
|
61
|
66
|
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});
|
|
67
|
+ this.willFocusSubscription = this.props.navigation.addListener(
|
|
68
|
+ 'willFocus',
|
|
69
|
+ payload => {
|
|
70
|
+ if (this.props.enableRotation) {
|
|
71
|
+ ScreenOrientation.unlockAsync();
|
|
72
|
+ ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
|
|
73
|
+ if (this.props.hideHeaderOnLandscape) {
|
|
74
|
+ let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
|
|
75
|
+ OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
|
76
|
+ OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
|
77
|
+ this.setState({isHeaderVisible: !isLandscape});
|
|
78
|
+ const setParamsAction = NavigationActions.setParams({
|
|
79
|
+ params: {showTabBar: !isLandscape},
|
|
80
|
+ key: this.props.navigation.state.key,
|
|
81
|
+ });
|
|
82
|
+ this.props.navigation.dispatch(setParamsAction);
|
|
83
|
+ }
|
|
84
|
+ });
|
|
85
|
+ }
|
69
|
86
|
});
|
70
|
|
- });
|
71
|
87
|
this.willBlurSubscription = this.props.navigation.addListener(
|
72
|
88
|
'willBlur',
|
73
|
89
|
payload => {
|
|
90
|
+ if (this.props.enableRotation)
|
|
91
|
+ ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
|
74
|
92
|
this.setState({isOpen: false});
|
75
|
93
|
}
|
76
|
94
|
);
|
|
@@ -104,7 +122,7 @@ export default class BaseContainer extends React.Component<Props, State> {
|
104
|
122
|
rightButton={this.props.headerRightButton}
|
105
|
123
|
hasTabs={this.props.hasTabs}
|
106
|
124
|
hasBackButton={this.props.hasBackButton}/>
|
107
|
|
- : null}
|
|
125
|
+ : <View style={{paddingTop: 20}}/>}
|
108
|
126
|
{this.props.children}
|
109
|
127
|
</Container>
|
110
|
128
|
);
|
|
@@ -112,33 +130,20 @@ export default class BaseContainer extends React.Component<Props, State> {
|
112
|
130
|
|
113
|
131
|
|
114
|
132
|
render() {
|
115
|
|
- // if (this.state.isHeaderVisible) {
|
116
|
|
- return (
|
117
|
|
- <View style={{
|
118
|
|
- backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
119
|
|
- width: '100%',
|
120
|
|
- height: '100%'
|
121
|
|
- }}>
|
122
|
|
- {this.props.hasSideMenu ?
|
123
|
|
- <CustomSideMenu
|
124
|
|
- navigation={this.props.navigation} isOpen={this.state.isOpen}
|
125
|
|
- onChange={(isOpen) => this.updateMenuState(isOpen)}>
|
126
|
|
- {this.getMainContainer()}
|
127
|
|
- </CustomSideMenu> :
|
128
|
|
- this.getMainContainer()}
|
129
|
|
- </View>
|
130
|
|
- );
|
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
|
|
- // }
|
142
|
|
-
|
|
133
|
+ return (
|
|
134
|
+ <View style={{
|
|
135
|
+ backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
|
136
|
+ width: '100%',
|
|
137
|
+ height: '100%'
|
|
138
|
+ }}>
|
|
139
|
+ {this.props.hasSideMenu ?
|
|
140
|
+ <CustomSideMenu
|
|
141
|
+ navigation={this.props.navigation} isOpen={this.state.isOpen}
|
|
142
|
+ onChange={(isOpen) => this.updateMenuState(isOpen)}>
|
|
143
|
+ {this.getMainContainer()}
|
|
144
|
+ </CustomSideMenu> :
|
|
145
|
+ this.getMainContainer()}
|
|
146
|
+ </View>
|
|
147
|
+ );
|
143
|
148
|
}
|
144
|
149
|
}
|