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,25 +100,29 @@ 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>
-                <CustomHeader
-                    navigation={this.props.navigation} title={this.props.headerTitle}
-                    leftButton={
-                        <Touchable
-                            style={{padding: 6}}
-                            onPress={() => this.toggle()}>
-                            <CustomMaterialIcon
-                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                                icon="menu"/>
-                        </Touchable>
-                    }
-                    rightButton={this.props.headerRightButton}
-                    hasTabs={this.props.hasTabs}
-                    hasBackButton={this.props.hasBackButton}/>
+                {this.state.isHeaderVisible ?
+                    <CustomHeader
+                        navigation={this.props.navigation} title={this.props.headerTitle}
+                        leftButton={
+                            <Touchable
+                                style={{padding: 6}}
+                                onPress={() => this.toggle()}>
+                                <CustomMaterialIcon
+                                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                    icon="menu"/>
+                            </Touchable>
+                        }
+                        rightButton={this.props.headerRightButton}
+                        hasTabs={this.props.hasTabs}
+                        hasBackButton={this.props.hasBackButton}/>
+                    : <View style={{paddingTop: 20}}/>}
                 {this.props.children}
             </Container>
         );
@@ -97,33 +130,20 @@ export default class BaseContainer extends React.Component<Props, State> {
 
 
     render() {
-        if (this.props.isHeaderVisible) {
-            return (
-                <View style={{
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
-                    width: '100%',
-                    height: '100%'
-                }}>
-                    {this.props.hasSideMenu ?
-                        <CustomSideMenu
-                            navigation={this.props.navigation} isOpen={this.state.isOpen}
-                            onChange={(isOpen) => this.updateMenuState(isOpen)}>
-                            {this.getMainContainer()}
-                        </CustomSideMenu> :
-                        this.getMainContainer()}
-                </View>
-            );
-        } else {
-            return (
-                <View style={{
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
-                    width: '100%',
-                    height: '100%'
-                }}>
-                    {this.props.children}
-                </View>
-            );
-        }
-
+        return (
+            <View style={{
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
+                width: '100%',
+                height: '100%'
+            }}>
+                {this.props.hasSideMenu ?
+                    <CustomSideMenu
+                        navigation={this.props.navigation} isOpen={this.state.isOpen}
+                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
+                        {this.getMainContainer()}
+                    </CustomSideMenu> :
+                    this.getMainContainer()}
+            </View>
+        );
     }
 }

components/Sidebar.js

@@ -78,50 +78,52 @@ export default class SideBar extends React.Component<Props, State> {
 
     render() {
         return (
-            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
-                    <Image source={drawerCover} style={styles.drawerCover}/>
-                    <FlatList
-                        data={this.dataSet}
-                        extraData={this.state}
-                        keyExtractor={(item) => item.route}
-                        renderItem={({item}) =>
-                            <ListItem
-                                button
-                                noBorder
-                                selected={this.state.active === item.route}
-                                onPress={() => {
-                                    if (item.link !== undefined)
-                                        Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
-                                    else
-                                        this.navigateToScreen(item.route);
-                                }}
-                            >
-                                <Left>
-                                    <CustomMaterialIcon
-                                        icon={item.icon}
-                                        active={this.state.active === item.route}
-                                    />
-                                    <Text style={styles.text}>
-                                        {item.name}
-                                    </Text>
-                                </Left>
-                                {item.types &&
-                                <Right style={{flex: 1}}>
-                                    <Badge
-                                        style={{
-                                            borderRadius: 3,
-                                            height: 25,
-                                            width: 72,
-                                            backgroundColor: item.bg
-                                        }}
-                                    >
-                                        <Text
-                                            style={styles.badgeText}
-                                        >{`${item.types} Types`}</Text>
-                                    </Badge>
-                                </Right>}
-                            </ListItem>}
-                    />
+            <Container style={{
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
+            }}>
+                <Image source={drawerCover} style={styles.drawerCover}/>
+                <FlatList
+                    data={this.dataSet}
+                    extraData={this.state}
+                    keyExtractor={(item) => item.route}
+                    renderItem={({item}) =>
+                        <ListItem
+                            button
+                            noBorder
+                            selected={this.state.active === item.route}
+                            onPress={() => {
+                                if (item.link !== undefined)
+                                    Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
+                                else
+                                    this.navigateToScreen(item.route);
+                            }}
+                        >
+                            <Left>
+                                <CustomMaterialIcon
+                                    icon={item.icon}
+                                    active={this.state.active === item.route}
+                                />
+                                <Text style={styles.text}>
+                                    {item.name}
+                                </Text>
+                            </Left>
+                            {item.types &&
+                            <Right style={{flex: 1}}>
+                                <Badge
+                                    style={{
+                                        borderRadius: 3,
+                                        height: 25,
+                                        width: 72,
+                                        backgroundColor: item.bg
+                                    }}
+                                >
+                                    <Text
+                                        style={styles.badgeText}
+                                    >{`${item.types} Types`}</Text>
+                                </Badge>
+                            </Right>}
+                        </ListItem>}
+                />
             </Container>
         );
     }
@@ -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