app.json

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

components/BaseContainer.js

@@ -1,15 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Container} from "native-base";
+import {Container, Right} 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 = {
@@ -20,34 +18,29 @@ type Props = {
     hasTabs: boolean,
     hasBackButton: boolean,
     hasSideMenu: boolean,
-    enableRotation: boolean,
-    hideHeaderOnLandscape: boolean,
+    isHeaderVisible: boolean
 }
 
 type State = {
-    isOpen: boolean,
-    isHeaderVisible: boolean
+    isOpen: boolean
 }
 
 
 export default class BaseContainer extends React.Component<Props, State> {
 
     willBlurSubscription: function;
-    willFocusSubscription: function;
 
     static defaultProps = {
         headerRightButton: <View/>,
         hasTabs: false,
         hasBackButton: false,
         hasSideMenu: true,
-        enableRotation: false,
-        hideHeaderOnLandscape: false,
+        isHeaderVisible: true,
     };
 
 
     state = {
         isOpen: false,
-        isHeaderVisible: true,
     };
 
     toggle() {
@@ -64,31 +57,9 @@ 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});
             }
         );
@@ -100,14 +71,11 @@ 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={
@@ -122,7 +90,6 @@ 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>
         );
@@ -130,6 +97,7 @@ export default class BaseContainer extends React.Component<Props, State> {
 
 
     render() {
+        if (this.props.isHeaderVisible) {
             return (
                 <View style={{
                     backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@@ -145,5 +113,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>
+            );
+        }
+
     }
 }

components/Sidebar.js

@@ -78,9 +78,7 @@ 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}
@@ -132,7 +130,7 @@ export default class SideBar extends React.Component<Props, State> {
 const styles = StyleSheet.create({
     drawerCover: {
         height: deviceHeight / 5,
-        width: deviceHeight / 2.5,
+        width: null,
         position: "relative",
         marginBottom: 10,
         marginTop: 20

components/WebViewScreen.js

@@ -8,6 +8,7 @@ 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 = {
@@ -24,17 +25,67 @@ type Props = {
     hasFooter: boolean,
 }
 
+type State = {
+    isLandscape: boolean,
+}
+
 /**
  * Class defining a webview screen.
  */
-export default class WebViewScreen extends React.Component<Props> {
+export default class WebViewScreen extends React.Component<Props, State> {
 
     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));
@@ -139,8 +190,7 @@ export default class WebViewScreen extends React.Component<Props> {
                 headerRightButton={this.getRefreshButton()}
                 hasBackButton={this.props.hasHeaderBackButton}
                 hasSideMenu={this.props.hasSideMenu}
-                enableRotation={true}
-                hideHeaderOnLandscape={true}>
+                isHeaderVisible={!this.state.isLandscape}>
                 {this.props.data.length === 1 ?
                     this.getWebview(this.props.data[0]) :
                     <Tabs
@@ -149,6 +199,7 @@ export default class WebViewScreen extends React.Component<Props> {
                         }}
                         locked={true}
                         style = {{
+                            paddingTop: this.state.isLandscape ? 20 : 0,
                             backgroundColor: Platform.OS === 'ios' ?
                                 ThemeManager.getCurrentThemeVariables().tabDefaultBg :
                                 ThemeManager.getCurrentThemeVariables().brandPrimary