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 0619a65..7f6c350 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 0000000..25e931b
--- /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 0000000..0bcac53
--- /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 7dfcdc5..3a5fcbc 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 cdad2c5..a5f71bf 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 d390c89..5a29ff6 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',