Merge pull request #267 from lbryio/back-navigation-part-deux

create navigation button component and handle onPress events properly

app/src/component/AppNavigator.js

@@ -40,18 +40,25 @@ import {
 } from 'lbryinc';
 import { makeSelectClientSetting } from '../redux/selectors/settings';
 import { decode as atob } from 'base-64';
-import Icon from 'react-native-vector-icons/FontAwesome5';
+import NavigationButton from '../component/navigationButton';
 import Constants from '../constants';
 import discoverStyle from '../styles/discover';
 import searchStyle from '../styles/search';
 import SearchRightHeaderIcon from '../component/searchRightHeaderIcon';
 
+const menuNavigationButton = (navigation) => <NavigationButton
+                                               name="bars"
+                                               size={24}
+                                               style={discoverStyle.drawerMenuButton}
+                                               iconStyle={discoverStyle.drawerHamburger}
+                                               onPress={() => navigation.navigate('DrawerOpen')} />
+
 const discoverStack = StackNavigator({
   Discover: {
     screen: DiscoverPage,
     navigationOptions: ({ navigation }) => ({
       title: 'Discover',
-      headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
+      headerLeft: menuNavigationButton(navigation),
     })
   },
   File: {
@@ -76,7 +83,7 @@ const trendingStack = StackNavigator({
     screen: TrendingPage,
     navigationOptions: ({ navigation }) => ({
       title: 'Trending',
-      headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
+      headerLeft: menuNavigationButton(navigation),
     })
   }
 });
@@ -86,7 +93,7 @@ const walletStack = StackNavigator({
     screen: WalletPage,
     navigationOptions: ({ navigation }) => ({
       title: 'Wallet',
-      headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
+      headerLeft: menuNavigationButton(navigation),
     })
   },
   TransactionHistory: {
@@ -105,7 +112,7 @@ const rewardsStack = StackNavigator({
     screen: RewardsPage,
     navigationOptions: ({ navigation }) => ({
       title: 'Rewards',
-      headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
+      headerLeft: menuNavigationButton(navigation),
     })
   }
 });

app/src/component/navigationButton/index.js

@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import NavigationButton from './view';
+
+export default connect()(NavigationButton);

app/src/component/navigationButton/view.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { TouchableOpacity } from 'react-native';
+
+
+class NavigationButton extends React.PureComponent {
+  render() {
+    const { iconStyle, name, onPress, size, style } = this.props;
+
+    return (
+      <TouchableOpacity onPress={onPress} style={style}>
+        <Icon name={name} size={size} style={iconStyle} />
+      </TouchableOpacity>
+    );
+  }
+};
+
+export default NavigationButton;

app/src/component/pageHeader/view.js

@@ -9,6 +9,7 @@ import {
   View
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome5';
+import NavigationButton from '../navigationButton';
 import pageHeaderStyle from '../../styles/pageHeader';
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
@@ -34,9 +35,13 @@ class PageHeader extends React.PureComponent {
                 {title}
               </AnimatedText>
             </View>
-            <TouchableOpacity style={pageHeaderStyle.left}>
+            <NavigationButton
-              <Icon name="arrow-left" size={24} onPress={onBackPressed} style={pageHeaderStyle.backIcon} />
+              name="arrow-left"
-            </TouchableOpacity>
+              style={pageHeaderStyle.left}
+              size={24}
+              iconStyle={pageHeaderStyle.backIcon}
+              onPress={onBackPressed}
+            />
           </View>
         </View>
       </View>

app/src/styles/discover.js

@@ -80,8 +80,13 @@ const discoverStyle = StyleSheet.create({
     textAlign: 'center',
     color: '#0c604b'
   },
+  drawerMenuButton: {
+    height: '100%',
+    justifyContent: 'center'
+  },
   drawerHamburger: {
-    marginLeft: 16
+    marginLeft: 16,
+    marginRight: 16
   },
   rightHeaderIcon: {
     marginRight: 16

app/src/styles/pageHeader.js

@@ -34,7 +34,8 @@ const pageHeaderStyle = StyleSheet.create({
     ...platformContainerStyles,
   },
   backIcon: {
-    marginLeft: 16
+    marginLeft: 16,
+    marginRight: 16
   },
   header: {
     ...StyleSheet.absoluteFillObject,
@@ -61,6 +62,7 @@ const pageHeaderStyle = StyleSheet.create({
     left: 0,
     bottom: 0,
     top: 0,
+    height: '100%',
     position: 'absolute',
     alignItems: 'center',
     flexDirection: 'row',