From ef55bd2719d2750a382523cb1e4acbd75958eb08 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 29 Aug 2018 21:19:49 +0100
Subject: [PATCH] create navigation button component and handle onPress events
 properly

---
 app/src/component/AppNavigator.js           | 17 ++++++++++++-----
 app/src/component/navigationButton/index.js |  4 ++++
 app/src/component/navigationButton/view.js  | 18 ++++++++++++++++++
 app/src/component/pageHeader/view.js        | 11 ++++++++---
 app/src/styles/discover.js                  |  7 ++++++-
 app/src/styles/pageHeader.js                |  4 +++-
 6 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 app/src/component/navigationButton/index.js
 create mode 100644 app/src/component/navigationButton/view.js

diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js
index 0619a65f..7f6c350e 100644
--- a/app/src/component/AppNavigator.js
+++ b/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),
     })
   }
 });
diff --git a/app/src/component/navigationButton/index.js b/app/src/component/navigationButton/index.js
new file mode 100644
index 00000000..25e931b6
--- /dev/null
+++ b/app/src/component/navigationButton/index.js
@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import NavigationButton from './view';
+
+export default connect()(NavigationButton);
diff --git a/app/src/component/navigationButton/view.js b/app/src/component/navigationButton/view.js
new file mode 100644
index 00000000..0bcac53b
--- /dev/null
+++ b/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;
diff --git a/app/src/component/pageHeader/view.js b/app/src/component/pageHeader/view.js
index 7dfcdc55..3a5fcbce 100644
--- a/app/src/component/pageHeader/view.js
+++ b/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}>
-              <Icon name="arrow-left" size={24} onPress={onBackPressed} style={pageHeaderStyle.backIcon} />
-            </TouchableOpacity>
+            <NavigationButton
+              name="arrow-left"
+              style={pageHeaderStyle.left}
+              size={24}
+              iconStyle={pageHeaderStyle.backIcon}
+              onPress={onBackPressed}
+            />
           </View>
         </View>
       </View>
diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js
index cdad2c57..a5f71bfc 100644
--- a/app/src/styles/discover.js
+++ b/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
diff --git a/app/src/styles/pageHeader.js b/app/src/styles/pageHeader.js
index d390c899..5a29ff63 100644
--- a/app/src/styles/pageHeader.js
+++ b/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',