use react-navigation-stack module

package-lock.json

@@ -8125,9 +8125,9 @@
             }
         },
         "react-native-gesture-handler": {
-            "version": "1.1.0",
+            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
-            "integrity": "sha512-E9IKHpmL+sz/iCYkUriTUjBaQBORWV+oheYPQleADkxjo2sYsQfnlyTz4EQYFONkUwJ6WmfTNkYt2/yc5U4Ziw==",
+            "integrity": "sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==",
             "requires": {
                 "hoist-non-react-statics": "^2.3.1",
                 "invariant": "^2.2.2",
@@ -8390,6 +8390,14 @@
                     "requires": {
                         "react-native-tab-view": "^1.2.0"
                     }
+                },
+                "react-navigation-stack": {
+                    "version": "1.5.5",
+                    "resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.5.5.tgz",
+                    "integrity": "sha512-qMhOhmUmyPNfFGWMbwv5flrNVsFU4JZSBWnONSgVGK4KWGW8DbobXBi4i4sBAC9Kg8EqJK0qyWcxnkMJJtfMWA==",
+                    "requires": {
+                        "prop-types": "^15.7.2"
+                    }
                 }
             }
         },
@@ -8407,9 +8415,9 @@
             }
         },
         "react-navigation-stack": {
-            "version": "1.5.0",
+            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.5.0.tgz",
+            "resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.8.1.tgz",
-            "integrity": "sha512-XwgdQY8c7PguPw/cx6GCRMnYMe6P/izzOpeOfE8g6sWrWW2vs/vwodRb9a820QePhX0I7dkgxdnTSq+o7/R49Q==",
+            "integrity": "sha512-XOkHuYlQjZKnD4jTU0Ml847sKjpwsJpQ6JX4ZfOq8D0e6fPWXbpYNhvUnzHMHMm+tnbhTqkqP1Umu40Hmx748Q==",
             "requires": {
                 "prop-types": "^15.7.2"
             }

package.json

@@ -25,7 +25,7 @@
         "react-native-exception-handler": "2.9.0",
         "react-native-fast-image": "^6.1.1",
         "react-native-fs": "^2.13.3",
-        "react-native-gesture-handler": "1.1.0",
+        "react-native-gesture-handler": "1.3.0",
         "react-native-image-zoom-viewer": "^2.2.5",
         "react-native-password-strength-meter": "^0.0.2",
         "react-native-phone-input": "lbryio/react-native-phone-input",
@@ -36,6 +36,7 @@
         "react-navigation": "^3.11.0",
         "react-navigation-drawer": "^2.2.2",
         "react-navigation-redux-helpers": "^3.0.2",
+        "react-navigation-stack": "^1.8.1",
         "react-redux": "^5.0.3",
         "redux": "^4.0.4",
         "redux-persist": "^5.10.0",

src/component/AppNavigator.js

@@ -18,8 +18,9 @@ import SubscriptionsPage from 'page/subscriptions';
 import TransactionHistoryPage from 'page/transactionHistory';
 import VerificationScreen from 'page/verification';
 import WalletPage from 'page/wallet';
-import { createStackNavigator, NavigationActions } from 'react-navigation';
+import { NavigationActions } from 'react-navigation';
 import { createDrawerNavigator } from 'react-navigation-drawer';
+import { createStackNavigator } from 'react-navigation-stack';
 import {
   createReduxContainer,
   createReactNavigationReduxMiddleware,
@@ -210,6 +211,7 @@ const drawer = createDrawerNavigator(
   },
   {
     drawerWidth: 300,
+    drawerBackgroundColor: 'transparent',
     headerMode: 'none',
     backBehavior: 'none',
     unmountInactiveRoutes: true,

src/component/drawerContent/view.js

@@ -37,8 +37,12 @@ class DrawerContent extends React.PureComponent {
     const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
 
     return (
+      <View style={discoverStyle.drawerContentArea}>
         <ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
-        <SafeAreaView style={discoverStyle.drawerContentContainer} forceInset={{ top: 'always', horizontal: 'never' }}>
+          <SafeAreaView
+            style={discoverStyle.drawerContentContainer}
+            forceInset={{ top: 'always', horizontal: 'never' }}
+          >
             {groupNames.map(groupName => {
               const menuItems = groupedMenuItems[groupName];
 
@@ -60,13 +64,21 @@ class DrawerContent extends React.PureComponent {
                       <TouchableOpacity
                         accessible
                         accessibilityLabel={item.label}
-                      style={[discoverStyle.menuItemTouchArea, focused ? discoverStyle.menuItemTouchAreaFocused : null]}
+                        style={[
+                          discoverStyle.menuItemTouchArea,
+                          focused ? discoverStyle.menuItemTouchAreaFocused : null,
+                        ]}
                         key={item.label}
                         onPress={() => navigation.navigate({ routeName: item.route })}
                         delayPressIn={0}
                       >
                         <View style={discoverStyle.menuItemIcon}>
-                        <Icon name={item.icon} size={16} solid={item.solid} color={focused ? activeTintColor : null} />
+                          <Icon
+                            name={item.icon}
+                            size={16}
+                            solid={item.solid}
+                            color={focused ? activeTintColor : null}
+                          />
                         </View>
                         <Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
                           {item.label}
@@ -79,6 +91,7 @@ class DrawerContent extends React.PureComponent {
             })}
           </SafeAreaView>
         </ScrollView>
+      </View>
     );
   }
 }

src/styles/discover.js

@@ -22,6 +22,10 @@ const discoverStyle = StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.PageBackground,
   },
+  drawerContentArea: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
   drawerContentContainer: {
     flex: 1,
   },