Hide webview header and tabs on landscape

components/BaseContainer.js

@@ -18,6 +18,7 @@ type Props = {
     hasTabs: boolean,
     hasBackButton: boolean,
     hasSideMenu: boolean,
+    isHeaderVisible: boolean
 }
 
 type State = {
@@ -34,6 +35,7 @@ export default class BaseContainer extends React.Component<Props, State> {
         hasTabs: false,
         hasBackButton: false,
         hasSideMenu: true,
+        isHeaderVisible: true,
     };
 
 
@@ -95,20 +97,33 @@ export default class BaseContainer extends React.Component<Props, State> {
 
 
     render() {
-        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>
-        );
+        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>
+            );
+        }
+
     }
 }

components/WebViewScreen.js

@@ -8,6 +8,8 @@ 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 = {
     navigation: Object,
@@ -23,10 +25,14 @@ 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,
@@ -34,7 +40,52 @@ export default class WebViewScreen extends React.Component<Props> {
         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));
@@ -138,7 +189,8 @@ export default class WebViewScreen extends React.Component<Props> {
                 headerTitle={this.props.headerTitle}
                 headerRightButton={this.getRefreshButton()}
                 hasBackButton={this.props.hasHeaderBackButton}
-                hasSideMenu={this.props.hasSideMenu}>
+                hasSideMenu={this.props.hasSideMenu}
+                isHeaderVisible={!this.state.isLandscape}>
                 {this.props.data.length === 1 ?
                     this.getWebview(this.props.data[0]) :
                     <Tabs

navigation/MainTabNavigator.js

@@ -24,14 +24,22 @@ function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string)
         Planning: {screen: PlanningScreen,},
         Proxiwash: {screen: ProxiwashScreen,},
         Proximo: {screen: ProximoMainScreen,},
-        Planex: {screen: PlanexScreen},
+        Planex: {
+            screen: PlanexScreen,
+            navigationOptions: ({ navigation }) => {
+                const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true;
+                return {
+                    tabBarVisible: showTabBar,
+                };
+            },},
     }, {
         defaultNavigationOptions: ({navigation}) => ({
             tabBarIcon: ({focused, horizontal, tintColor}) => {
                 let icon = TAB_ICONS[navigation.state.routeName];
 
                 return <CustomMaterialIcon icon={icon} color={tintColor}/>;
-            }
+            },
+            tabBarVisible: true,
         }),
         order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
         initialRouteName: initialRoute,

screens/AvailableRoomScreen.js

@@ -30,8 +30,8 @@ export default class AvailableRoomScreen extends React.Component<Props> {
             'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
             'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
             'let header = $(".table tbody tr:first");' +
-            '$("table").prepend("<thead></thead>");' +
-            '$("thead").append(header);';
+            '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
+            '$("thead").append(header);true;';
 
         this.customBibInjectedJS =
             'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +