From c892b51ff87d6aee9e7ffffd1b81d5d9ca1b848b Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Fri, 31 May 2019 05:41:44 +0100 Subject: [PATCH] add custom drawer content to navigate to the topmost item in nested stacks --- app/src/component/AppNavigator.js | 3 +- app/src/component/drawerContent/index.js | 4 +++ app/src/component/drawerContent/view.js | 38 ++++++++++++++++++++++++ app/src/page/transactionHistory/view.js | 1 + app/src/styles/discover.js | 3 ++ 5 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 app/src/component/drawerContent/index.js create mode 100644 app/src/component/drawerContent/view.js diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js index ef53473..9ca1c95 100644 --- a/app/src/component/AppNavigator.js +++ b/app/src/component/AppNavigator.js @@ -2,6 +2,7 @@ import React from 'react'; import AboutPage from 'page/about'; import DiscoverPage from 'page/discover'; import DownloadsPage from 'page/downloads'; +import DrawerContent from 'component/drawerContent'; import FilePage from 'page/file'; import FirstRunScreen from 'page/firstRun'; import RewardsPage from 'page/rewards'; @@ -13,7 +14,6 @@ import SubscriptionsPage from 'page/subscriptions'; import TransactionHistoryPage from 'page/transactionHistory'; import VerificationScreen from 'page/verification'; import WalletPage from 'page/wallet'; -import SearchInput from 'component/searchInput'; import { createDrawerNavigator, createStackNavigator, @@ -150,6 +150,7 @@ const drawer = createDrawerNavigator({ }, { drawerWidth: 300, headerMode: 'none', + contentComponent: DrawerContent, contentOptions: { activeTintColor: Colors.LbryGreen, labelStyle: discoverStyle.menuText diff --git a/app/src/component/drawerContent/index.js b/app/src/component/drawerContent/index.js new file mode 100644 index 0000000..3df7cec --- /dev/null +++ b/app/src/component/drawerContent/index.js @@ -0,0 +1,4 @@ +import { connect } from 'react-redux'; +import DrawerContent from './view'; + +export default connect()(DrawerContent); diff --git a/app/src/component/drawerContent/view.js b/app/src/component/drawerContent/view.js new file mode 100644 index 0000000..49fa8db --- /dev/null +++ b/app/src/component/drawerContent/view.js @@ -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 ( + + + { + 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); + }} + /> + + + ); + } +} + +export default DrawerContent; diff --git a/app/src/page/transactionHistory/view.js b/app/src/page/transactionHistory/view.js index 6ef1714..a2ef142 100644 --- a/app/src/page/transactionHistory/view.js +++ b/app/src/page/transactionHistory/view.js @@ -1,5 +1,6 @@ import React from 'react'; import { View, ScrollView, Text } from 'react-native'; +import Constants from 'constants'; import TransactionList from 'component/transactionList'; import UriBar from 'component/uriBar'; import walletStyle from 'styles/wallet'; diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js index a118302..46a295f 100644 --- a/app/src/styles/discover.js +++ b/app/src/styles/discover.js @@ -20,6 +20,9 @@ const discoverStyle = StyleSheet.create({ flex: 1, backgroundColor: Colors.PageBackground }, + drawerContentContainer: { + flex: 1 + }, scrollContainer: { flex: 1, paddingTop: 12,