From 3aad8491cfc9c36d686471d015498cebbad5a79c Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Sat, 21 Apr 2018 10:47:08 +0100 Subject: [PATCH 1/3] added single page header with back button and some styling --- app/src/component/AppNavigator.js | 13 ++++- 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, 149 insertions(+), 6 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..9504897f 100644 --- a/app/src/component/AppNavigator.js +++ b/app/src/component/AppNavigator.js @@ -77,11 +77,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)); 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, -- 2.45.3 From b2313f1766ed453817c14b07a4b0b484f8b1483d Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Sun, 22 Apr 2018 05:03:32 +0100 Subject: [PATCH 2/3] lock drawer mode state to closed for settings screen --- app/src/component/AppNavigator.js | 49 ++++++------------------------- 1 file changed, 9 insertions(+), 40 deletions(-) diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js index 9504897f..5bc9c2da 100644 --- a/app/src/component/AppNavigator.js +++ b/app/src/component/AppNavigator.js @@ -1,32 +1,23 @@ import React from 'react'; import DiscoverPage from '../page/discover'; import FilePage from '../page/file'; -import SearchPage from '../page/search'; import SettingsPage from '../page/settings'; import SplashScreen from '../page/splash'; -import SearchInput from '../component/searchInput'; -import { - addNavigationHelpers, - DrawerNavigator, - StackNavigator, - NavigationActions -} from 'react-navigation'; +import { addNavigationHelpers, DrawerNavigator, StackNavigator } from 'react-navigation'; import { connect } from 'react-redux'; import { addListener } from '../utils/redux'; -import { AppState, BackHandler, NativeModules, TextInput } from 'react-native'; +import { AppState, BackHandler, NativeModules } from 'react-native'; import { SETTINGS } from 'lbry-redux'; -import { makeSelectClientSetting } from '../redux/selectors/settings'; import Feather from 'react-native-vector-icons/Feather'; import discoverStyle from '../styles/discover'; -import searchStyle from '../styles/search'; +import { makeSelectClientSetting } from '../redux/selectors/settings'; const discoverStack = StackNavigator({ Discover: { screen: DiscoverPage, navigationOptions: ({ navigation }) => ({ title: 'Discover', - headerLeft: navigation.navigate('DrawerOpen')} />, - headerRight: navigation.navigate('Search')} /> + headerLeft: navigation.navigate('DrawerOpen')} /> }) }, File: { @@ -35,13 +26,6 @@ const discoverStack = StackNavigator({ header: null, drawerLockMode: 'locked-closed' } - }, - Search: { - screen: SearchPage, - navigationOptions: ({ navigation }) => ({ - headerTitle: , - headerRight: navigation.dispatch(NavigationActions.back())} /> - }) } }, { headerMode: 'screen', @@ -49,10 +33,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' @@ -60,10 +41,7 @@ const drawer = DrawerNavigator({ export const AppNavigator = new StackNavigator({ Splash: { - screen: SplashScreen, - navigationOptions: { - drawerLockMode: 'locked-closed' - } + screen: SplashScreen }, Main: { screen: drawer @@ -77,20 +55,11 @@ class AppWithNavigationState extends React.Component { AppState.addEventListener('change', this._handleAppStateChange); BackHandler.addEventListener('hardwareBackPress', function() { const { dispatch, navigation, nav } = this.props; - // 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) { + if (nav.routes.length === 2 && nav.routes[1].routeName === 'Main') { + if (nav.routes[1].routes[0].routes[0].index > 0) { 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)); @@ -108,7 +77,7 @@ class AppWithNavigationState extends React.Component { NativeModules.DaemonServiceControl) { if (!keepDaemonRunning) { // terminate the daemon background service when is suspended / inactive - NativeModules.DaemonServiceControl.stopService(); + // NativeModules.DaemonServiceControl.stopService(); // moved to onDestory in activity for better handling } } } -- 2.45.3 From e6dcd6d96d609ae98273a7eee49bd48157509c3b Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Sun, 22 Apr 2018 05:09:33 +0100 Subject: [PATCH 3/3] some tweaks to the AppNavigator code --- app/src/component/AppNavigator.js | 49 ++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 10 deletions(-) diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js index 5bc9c2da..d6d52470 100644 --- a/app/src/component/AppNavigator.js +++ b/app/src/component/AppNavigator.js @@ -1,23 +1,32 @@ import React from 'react'; import DiscoverPage from '../page/discover'; import FilePage from '../page/file'; +import SearchPage from '../page/search'; import SettingsPage from '../page/settings'; import SplashScreen from '../page/splash'; -import { addNavigationHelpers, DrawerNavigator, StackNavigator } from 'react-navigation'; +import SearchInput from '../component/searchInput'; +import { + addNavigationHelpers, + DrawerNavigator, + StackNavigator, + NavigationActions +} from 'react-navigation'; import { connect } from 'react-redux'; import { addListener } from '../utils/redux'; -import { AppState, BackHandler, NativeModules } from 'react-native'; +import { AppState, BackHandler, NativeModules, TextInput } from 'react-native'; import { SETTINGS } from 'lbry-redux'; +import { makeSelectClientSetting } from '../redux/selectors/settings'; import Feather from 'react-native-vector-icons/Feather'; import discoverStyle from '../styles/discover'; -import { makeSelectClientSetting } from '../redux/selectors/settings'; +import searchStyle from '../styles/search'; const discoverStack = StackNavigator({ Discover: { screen: DiscoverPage, navigationOptions: ({ navigation }) => ({ title: 'Discover', - headerLeft: navigation.navigate('DrawerOpen')} /> + headerLeft: navigation.navigate('DrawerOpen')} />, + headerRight: navigation.navigate('Search')} /> }) }, File: { @@ -26,6 +35,13 @@ const discoverStack = StackNavigator({ header: null, drawerLockMode: 'locked-closed' } + }, + Search: { + screen: SearchPage, + navigationOptions: ({ navigation }) => ({ + headerTitle: , + headerRight: navigation.dispatch(NavigationActions.back())} /> + }) } }, { headerMode: 'screen', @@ -41,7 +57,10 @@ const drawer = DrawerNavigator({ export const AppNavigator = new StackNavigator({ Splash: { - screen: SplashScreen + screen: SplashScreen, + navigationOptions: { + drawerLockMode: 'locked-closed' + } }, Main: { screen: drawer @@ -55,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)); @@ -71,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(); // moved to onDestory in activity for better handling + //NativeModules.DaemonServiceControl.stopService(); } - } + }*/ } render() { -- 2.45.3