From b9e0065aad464d22fee00251fac7b62c81e11263 Mon Sep 17 00:00:00 2001 From: akinwale Date: Mon, 23 Apr 2018 05:01:33 +0100 Subject: [PATCH] added single page header with back button and some styling (#75) * added single page header with back button and some styling * lock drawer mode state to closed for settings screen --- app/src/component/AppNavigator.js | 25 ++++++--- app/src/component/pageHeader/index.js | 6 ++ app/src/component/pageHeader/view.js | 47 ++++++++++++++++ app/src/page/settings/view.js | 4 +- app/src/styles/pageHeader.js | 81 +++++++++++++++++++++++++++ app/src/styles/settings.js | 4 +- 6 files changed, 154 insertions(+), 13 deletions(-) create mode 100644 app/src/component/pageHeader/index.js create mode 100644 app/src/component/pageHeader/view.js create mode 100644 app/src/styles/pageHeader.js diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js index f6fdf295..d6d52470 100644 --- a/app/src/component/AppNavigator.js +++ b/app/src/component/AppNavigator.js @@ -49,10 +49,7 @@ const discoverStack = StackNavigator({ const drawer = DrawerNavigator({ Discover: { screen: discoverStack }, - Settings: { - screen: SettingsPage, - headerMode: 'screen' - } + Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } } }, { drawerWidth: 300, headerMode: 'none' @@ -77,11 +74,20 @@ class AppWithNavigationState extends React.Component { AppState.addEventListener('change', this._handleAppStateChange); BackHandler.addEventListener('hardwareBackPress', function() { const { dispatch, navigation, nav } = this.props; - if (nav.routes.length === 2 && nav.routes[1].routeName === 'Main') { - if (nav.routes[1].routes[0].routes[0].index > 0) { + // There should be a better way to check this + if (nav.routes.length > 1) { + const subRoutes = nav.routes[1].routes[0].routes; + const lastRoute = subRoutes[subRoutes.length - 1]; + if (['Settings'].indexOf(lastRoute.key) > -1) { dispatch({ type: 'Navigation/BACK' }); return true; } + if (nav.routes[1].routeName === 'Main') { + if (nav.routes[1].routes[0].routes[0].index > 0) { + dispatch({ type: 'Navigation/BACK' }); + return true; + } + } } return false; }.bind(this)); @@ -93,15 +99,16 @@ class AppWithNavigationState extends React.Component { } _handleAppStateChange = (nextAppState) => { - const { keepDaemonRunning } = this.props; + // this is properly handled in native code at the moment + /*const { keepDaemonRunning } = this.props; if (AppState.currentState && AppState.currentState.match(/inactive|background/) && NativeModules.DaemonServiceControl) { if (!keepDaemonRunning) { // terminate the daemon background service when is suspended / inactive - NativeModules.DaemonServiceControl.stopService(); + //NativeModules.DaemonServiceControl.stopService(); } - } + }*/ } render() { diff --git a/app/src/component/pageHeader/index.js b/app/src/component/pageHeader/index.js new file mode 100644 index 00000000..078a90dc --- /dev/null +++ b/app/src/component/pageHeader/index.js @@ -0,0 +1,6 @@ +import { connect } from 'react-redux'; +import PageHeader from './view'; + +const perform = dispatch => ({}); + +export default connect(null, perform)(PageHeader); diff --git a/app/src/component/pageHeader/view.js b/app/src/component/pageHeader/view.js new file mode 100644 index 00000000..696b2174 --- /dev/null +++ b/app/src/component/pageHeader/view.js @@ -0,0 +1,47 @@ +// Based on https://github.com/react-navigation/react-navigation/blob/master/src/views/Header/Header.js +import React from 'react'; +import { + Animated, + Platform, + StyleSheet, + Text, + TouchableOpacity, + View +} from 'react-native'; +import Feather from 'react-native-vector-icons/Feather'; +import pageHeaderStyles from '../../styles/pageHeader'; + +const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; +const AnimatedText = Animated.Text; + +class PageHeader extends React.PureComponent { + render() { + const { title, onBackPressed } = this.props; + const containerStyles = [ + pageHeaderStyles.container, + { height: APPBAR_HEIGHT } + ]; + + return ( + + + + + + {title} + + + + + + + + + ); + } +} + +export default PageHeader; diff --git a/app/src/page/settings/view.js b/app/src/page/settings/view.js index 16821e9f..f651b335 100644 --- a/app/src/page/settings/view.js +++ b/app/src/page/settings/view.js @@ -1,6 +1,7 @@ import React from 'react'; import { SETTINGS } from 'lbry-redux'; import { Text, View, ScrollView, Switch } from 'react-native'; +import PageHeader from '../../component/pageHeader'; import settingsStyle from '../../styles/settings'; class SettingsPage extends React.PureComponent { @@ -17,7 +18,8 @@ class SettingsPage extends React.PureComponent { return ( - Settings + { this.props.navigation.goBack(); }} /> diff --git a/app/src/styles/pageHeader.js b/app/src/styles/pageHeader.js new file mode 100644 index 00000000..5e4df695 --- /dev/null +++ b/app/src/styles/pageHeader.js @@ -0,0 +1,81 @@ +import { Platform, StyleSheet } from 'react-native'; + +const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0; +const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56; + +let platformContainerStyles; +if (Platform.OS === 'ios') { + platformContainerStyles = { + borderBottomWidth: StyleSheet.hairlineWidth, + borderBottomColor: '#A7A7AA', + }; +} else { + platformContainerStyles = { + shadowColor: 'black', + shadowOpacity: 0.1, + shadowRadius: StyleSheet.hairlineWidth, + shadowOffset: { + height: StyleSheet.hairlineWidth, + }, + elevation: 4, + }; +} + +const pageHeaderStyles = StyleSheet.create({ + container: { + backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF', + ...platformContainerStyles, + }, + transparentContainer: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + ...platformContainerStyles, + }, + backIcon: { + marginLeft: 16 + }, + header: { + ...StyleSheet.absoluteFillObject, + flexDirection: 'row', + }, + titleText: { + fontSize: Platform.OS === 'ios' ? 17 : 20, + fontWeight: Platform.OS === 'ios' ? '700' : '500', + color: 'rgba(0, 0, 0, .9)', + textAlign: Platform.OS === 'ios' ? 'center' : 'left', + marginHorizontal: 16, + }, + title: { + bottom: 0, + top: 0, + left: TITLE_OFFSET, + right: TITLE_OFFSET, + position: 'absolute', + alignItems: 'center', + flexDirection: 'row', + justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start', + }, + left: { + left: 0, + bottom: 0, + top: 0, + position: 'absolute', + alignItems: 'center', + flexDirection: 'row', + }, + right: { + right: 0, + bottom: 0, + top: 0, + position: 'absolute', + flexDirection: 'row', + alignItems: 'center', + }, + flexOne: { + flex: 1, + } +}); + +export default pageHeaderStyles; diff --git a/app/src/styles/settings.js b/app/src/styles/settings.js index 701c2f69..68eec628 100644 --- a/app/src/styles/settings.js +++ b/app/src/styles/settings.js @@ -7,9 +7,7 @@ const settingsStyle = StyleSheet.create({ margin: 16 }, scrollContainer: { - paddingLeft: 16, - paddingRight: 16, - paddingBottom: 16 + padding: 16 }, row: { marginBottom: 24,