increased version number

app.json

@@ -10,7 +10,7 @@
       "android",
       "web"
     ],
-    "version": "1.3.2",
+    "version": "1.3.3",
     "orientation": "portrait",
     "primaryColor": "#be1522",
     "icon": "./assets/android.icon.png",

components/BaseContainer.js

@@ -1,13 +1,15 @@
 // @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";
+import {NavigationActions} from "react-navigation";
 
 
 type Props = {
@@ -18,29 +20,34 @@ type Props = {
     hasTabs: boolean,
     hasBackButton: boolean,
     hasSideMenu: boolean,
-    isHeaderVisible: boolean
+    enableRotation: boolean,
+    hideHeaderOnLandscape: 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,
+        enableRotation: false,
+        hideHeaderOnLandscape: false,
     };
 
 
     state = {
         isOpen: false,
+        isHeaderVisible: true,
     };
 
     toggle() {
@@ -57,9 +64,31 @@ 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 => {
+                if (this.props.enableRotation) {
+                    ScreenOrientation.unlockAsync();
+                    ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
+                        if (this.props.hideHeaderOnLandscape) {
+                            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});
+                            const setParamsAction = NavigationActions.setParams({
+                                params: {showTabBar: !isLandscape},
+                                key: this.props.navigation.state.key,
+                            });
+                            this.props.navigation.dispatch(setParamsAction);
+                        }
+                    });
+                }
+            });
         this.willBlurSubscription = this.props.navigation.addListener(
             'willBlur',
             payload => {
+                if (this.props.enableRotation)
+                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
                 this.setState({isOpen: false});
             }
         );
@@ -71,11 +100,14 @@ 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>
+                {this.state.isHeaderVisible ?
                     <CustomHeader
                         navigation={this.props.navigation} title={this.props.headerTitle}
                         leftButton={
@@ -90,6 +122,7 @@ export default class BaseContainer extends React.Component<Props, State> {
                         rightButton={this.props.headerRightButton}
                         hasTabs={this.props.hasTabs}
                         hasBackButton={this.props.hasBackButton}/>
+                    : <View style={{paddingTop: 20}}/>}
                 {this.props.children}
             </Container>
         );
@@ -97,7 +130,6 @@ export default class BaseContainer extends React.Component<Props, State> {
 
 
     render() {
-        if (this.props.isHeaderVisible) {
         return (
             <View style={{
                 backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@@ -113,17 +145,5 @@ 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>
-            );
-        }
-
     }
 }

components/Sidebar.js

@@ -78,7 +78,9 @@ export default class SideBar extends React.Component<Props, State> {
 
     render() {
         return (
-            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
+            <Container style={{
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
+            }}>
                 <Image source={drawerCover} style={styles.drawerCover}/>
                 <FlatList
                     data={this.dataSet}
@@ -130,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
 const styles = StyleSheet.create({
     drawerCover: {
         height: deviceHeight / 5,
-        width: null,
+        width: deviceHeight / 2.5,
         position: "relative",
         marginBottom: 10,
         marginTop: 20

components/WebViewScreen.js

@@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
 import BaseContainer from "../components/BaseContainer";
-import {ScreenOrientation} from 'expo';
 import {NavigationActions} from 'react-navigation';
 
 type Props = {
@@ -25,67 +24,17 @@ type Props = {
     hasFooter: boolean,
 }
 
-type State = {
-    isLandscape: boolean,
-}
-
 /**
  * Class defining a webview screen.
  */
-export default class WebViewScreen extends React.Component<Props, State> {
+export default class WebViewScreen extends React.Component<Props> {
 
     static defaultProps = {
         hasBackButton: false,
         hasSideMenu: true,
         hasFooter: true,
     };
-
-    state = {
-        isLandscape: false,
-    };
-
     webviewArray: Array<WebView> = [];
-    willFocusSubscription: function;
-    willBlurSubscription: function;
-
-    /**
-     * 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({isLandscape: isLandscape});
-                    const setParamsAction = NavigationActions.setParams({
-                        params: {showTabBar: !isLandscape},
-                        key: this.props.navigation.state.key,
-                    });
-                    this.props.navigation.dispatch(setParamsAction);
-                });
-            }
-        );
-        this.willBlurSubscription = this.props.navigation.addListener(
-            'willBlur',
-            payload => {
-                ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-            }
-        );
-    }
-
-    /**
-     * Unregister from event when un-mounting components
-     */
-    componentWillUnmount() {
-        if (this.willBlurSubscription !== undefined)
-            this.willBlurSubscription.remove();
-        if (this.willFocusSubscription !== undefined)
-            this.willFocusSubscription.remove();
-    }
 
     openWebLink(url: string) {
         Linking.openURL(url).catch((err) => console.error('Error opening link', err));
@@ -190,7 +139,8 @@ export default class WebViewScreen extends React.Component<Props, State> {
                 headerRightButton={this.getRefreshButton()}
                 hasBackButton={this.props.hasHeaderBackButton}
                 hasSideMenu={this.props.hasSideMenu}
-                isHeaderVisible={!this.state.isLandscape}>
+                enableRotation={true}
+                hideHeaderOnLandscape={true}>
                 {this.props.data.length === 1 ?
                     this.getWebview(this.props.data[0]) :
                     <Tabs
@@ -199,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
                         }}
                         locked={true}
                         style = {{
-                            paddingTop: this.state.isLandscape ? 20 : 0,
                             backgroundColor: Platform.OS === 'ios' ?
                                 ThemeManager.getCurrentThemeVariables().tabDefaultBg :
                                 ThemeManager.getCurrentThemeVariables().brandPrimary