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

create navigation button component and handle onPress events properly
This commit is contained in:
Akinwale Ariwodola 2018-08-30 14:38:46 +01:00 committed by GitHub
commit 30682bf8f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 10 deletions

View file

@ -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),
})
}
});

View file

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

View file

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

View file

@ -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>

View file

@ -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

View file

@ -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',