diff --git a/components/BaseContainer.js b/components/BaseContainer.js index 30d1889..e0935c9 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -9,6 +9,7 @@ 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 = { @@ -19,6 +20,8 @@ type Props = { hasTabs: boolean, hasBackButton: boolean, hasSideMenu: boolean, + enableRotation: boolean, + hideHeaderOnLandscape: boolean, } type State = { @@ -37,6 +40,8 @@ export default class BaseContainer extends React.Component { hasTabs: false, hasBackButton: false, hasSideMenu: true, + enableRotation: false, + hideHeaderOnLandscape: false, }; @@ -59,18 +64,31 @@ export default class BaseContainer extends React.Component { * 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({isHeaderVisible: !isLandscape}); + 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}); } ); @@ -104,7 +122,7 @@ export default class BaseContainer extends React.Component { rightButton={this.props.headerRightButton} hasTabs={this.props.hasTabs} hasBackButton={this.props.hasBackButton}/> - : null} + : } {this.props.children} ); @@ -112,33 +130,20 @@ export default class BaseContainer extends React.Component { render() { - // if (this.state.isHeaderVisible) { - return ( - - {this.props.hasSideMenu ? - this.updateMenuState(isOpen)}> - {this.getMainContainer()} - : - this.getMainContainer()} - - ); - // } else { - // return ( - // - // {this.props.children} - // - // ); - // } - + return ( + + {this.props.hasSideMenu ? + this.updateMenuState(isOpen)}> + {this.getMainContainer()} + : + this.getMainContainer()} + + ); } } diff --git a/components/Sidebar.js b/components/Sidebar.js index c7036dd..5756f55 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -78,50 +78,52 @@ export default class SideBar extends React.Component { render() { return ( - - - item.route} - renderItem={({item}) => - { - if (item.link !== undefined) - Linking.openURL(item.link).catch((err) => console.error('Error opening link', err)); - else - this.navigateToScreen(item.route); - }} - > - - - - {item.name} - - - {item.types && - - - {`${item.types} Types`} - - } - } - /> + + + item.route} + renderItem={({item}) => + { + if (item.link !== undefined) + Linking.openURL(item.link).catch((err) => console.error('Error opening link', err)); + else + this.navigateToScreen(item.route); + }} + > + + + + {item.name} + + + {item.types && + + + {`${item.types} Types`} + + } + } + /> ); } @@ -130,7 +132,7 @@ export default class SideBar extends React.Component { const styles = StyleSheet.create({ drawerCover: { height: deviceHeight / 5, - width: null, + width: deviceHeight / 2.5, position: "relative", marginBottom: 10, marginTop: 20 diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 59dd396..5ca209a 100644 --- a/components/WebViewScreen.js +++ b/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 { +export default class WebViewScreen extends React.Component { static defaultProps = { hasBackButton: false, hasSideMenu: true, hasFooter: true, }; - - state = { - isLandscape: false, - }; - webviewArray: Array = []; - 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)); @@ -189,7 +138,9 @@ export default class WebViewScreen extends React.Component { headerTitle={this.props.headerTitle} headerRightButton={this.getRefreshButton()} hasBackButton={this.props.hasHeaderBackButton} - hasSideMenu={this.props.hasSideMenu}> + hasSideMenu={this.props.hasSideMenu} + enableRotation={true} + hideHeaderOnLandscape={true}> {this.props.data.length === 1 ? this.getWebview(this.props.data[0]) : { }} locked={true} style = {{ - paddingTop: this.state.isLandscape ? 20 : 0, backgroundColor: Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().tabDefaultBg : ThemeManager.getCurrentThemeVariables().brandPrimary