Merge pull request #566 from lbryio/custom-drawer-content

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

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

app/src/component/drawerContent/index.js

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

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 (
+      <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;

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

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,