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

@@ -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() {

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);

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 (
+      <View style={containerStyles}>
+        <View style={pageHeaderStyles.flexOne}>
+          <View style={pageHeaderStyles.header}>
+            <View style={pageHeaderStyles.title}>
+              <AnimatedText
+                numberOfLines={1}
+                style={pageHeaderStyles.titleText}
+                accessibilityTraits="header">
+                {title}
+              </AnimatedText>
+            </View>
+            <TouchableOpacity style={pageHeaderStyles.left}>
+              <Feather name="arrow-left" size={24} onPress={onBackPressed} style={pageHeaderStyles.backIcon} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default PageHeader;

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 (
       <View>
-      <Text style={settingsStyle.title}>Settings</Text>
+        <PageHeader title={"Settings"}
+          onBackPressed={() => { this.props.navigation.goBack(); }} />
         <ScrollView style={settingsStyle.scrollContainer}>
           <View style={settingsStyle.row}>
             <View style={settingsStyle.switchText}>

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;

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,