add custom drawer content to navigate to the topmost item in nested stacks

This commit is contained in:
Akinwale Ariwodola 2019-05-31 05:41:44 +01:00
parent 8b3a0d22be
commit c892b51ff8
5 changed files with 48 additions and 1 deletions

View file

@ -2,6 +2,7 @@ import React from 'react';
import AboutPage from 'page/about'; import AboutPage from 'page/about';
import DiscoverPage from 'page/discover'; import DiscoverPage from 'page/discover';
import DownloadsPage from 'page/downloads'; import DownloadsPage from 'page/downloads';
import DrawerContent from 'component/drawerContent';
import FilePage from 'page/file'; import FilePage from 'page/file';
import FirstRunScreen from 'page/firstRun'; import FirstRunScreen from 'page/firstRun';
import RewardsPage from 'page/rewards'; import RewardsPage from 'page/rewards';
@ -13,7 +14,6 @@ import SubscriptionsPage from 'page/subscriptions';
import TransactionHistoryPage from 'page/transactionHistory'; import TransactionHistoryPage from 'page/transactionHistory';
import VerificationScreen from 'page/verification'; import VerificationScreen from 'page/verification';
import WalletPage from 'page/wallet'; import WalletPage from 'page/wallet';
import SearchInput from 'component/searchInput';
import { import {
createDrawerNavigator, createDrawerNavigator,
createStackNavigator, createStackNavigator,
@ -150,6 +150,7 @@ const drawer = createDrawerNavigator({
}, { }, {
drawerWidth: 300, drawerWidth: 300,
headerMode: 'none', headerMode: 'none',
contentComponent: DrawerContent,
contentOptions: { contentOptions: {
activeTintColor: Colors.LbryGreen, activeTintColor: Colors.LbryGreen,
labelStyle: discoverStyle.menuText labelStyle: discoverStyle.menuText

View file

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

View file

@ -0,0 +1,38 @@
import React from 'react';
import { DrawerItems, SafeAreaView } from 'react-navigation';
import { ScrollView } from 'react-native';
import Constants from 'constants';
import discoverStyle from 'styles/discover';
class DrawerContent extends React.PureComponent {
render() {
const props = this.props;
const { navigation, onItemPress } = props;
return (
<ScrollView>
<SafeAreaView style={discoverStyle.drawerContentContainer} forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems
{...props}
onItemPress={(route) => {
const { routeName } = route.route;
if (Constants.FULL_ROUTE_NAME_DISCOVER === routeName) {
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_DISCOVER });
return;
}
if (Constants.FULL_ROUTE_NAME_WALLET === routeName) {
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_WALLET });
return;
}
onItemPress(route);
}}
/>
</SafeAreaView>
</ScrollView>
);
}
}
export default DrawerContent;

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { View, ScrollView, Text } from 'react-native'; import { View, ScrollView, Text } from 'react-native';
import Constants from 'constants';
import TransactionList from 'component/transactionList'; import TransactionList from 'component/transactionList';
import UriBar from 'component/uriBar'; import UriBar from 'component/uriBar';
import walletStyle from 'styles/wallet'; import walletStyle from 'styles/wallet';

View file

@ -20,6 +20,9 @@ const discoverStyle = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: Colors.PageBackground backgroundColor: Colors.PageBackground
}, },
drawerContentContainer: {
flex: 1
},
scrollContainer: { scrollContainer: {
flex: 1, flex: 1,
paddingTop: 12, paddingTop: 12,