Hamburger menu updates (#151)

* styling fixes in drawer, added rewards back, moved feedback to first section of tab links

* refactored rewards stack, changed name of stores tab to map

navigation/AppNavigator.js

@@ -8,6 +8,7 @@ import AuthLoadingScreen from '../screens/auth/AuthLoadingScreen';
 import DrawerContent from './DrawerContent';
 import AuthStackNavigator from './stack_navigators/AuthStack';
 import ResourcesStackNavigator from './stack_navigators/ResourcesStack';
+import RewardsStackNavigator from './stack_navigators/RewardsStack';
 import StoresStackNavigator from './stack_navigators/StoresStack';
 
 const Drawer = createDrawerNavigator();
@@ -42,13 +43,16 @@ function DrawerNavigator() {
       <Drawer.Screen
         name="Stores"
         component={StoresStackNavigator}
-        options={{ title: 'Stores', swipeEnabled: false }}
+        options={{ title: 'Map', swipeEnabled: false }}
       />
-      {/* <Drawer.Screen
+      <Drawer.Screen
         name="Rewards"
-        options={{ title: 'Points History', drawerLockMode: 'locked-closed' }}>
-        {props => <RewardsScreen {...props} tab={1} />}
-      </Drawer.Screen> */}
+        component={RewardsStackNavigator}
+        options={{
+          title: 'Rewards',
+          drawerLockMode: 'locked-closed',
+        }}
+      />
       <Drawer.Screen
         name="Resources"
         component={ResourcesStackNavigator}

navigation/DrawerContent.js

@@ -108,18 +108,18 @@ function DrawerContent(props) {
         <Title style={{ color: 'white' }}>{customer.name}</Title>
       </View>
       <DrawerItemList {...props} />
+      <TouchableOpacity
+        style={{ padding: 8, height: 114 }}
+        onPress={() => Linking.openURL(link)}>
+        <Title>Feedback</Title>
+      </TouchableOpacity>
       <View
         style={{
           flex: 1,
           flexDirection: 'column',
           justifyContent: 'flex-end',
           verticalAlign: 'bottom',
         }}>
-        <TouchableOpacity
-          style={{ padding: 16 }}
-          onPress={() => Linking.openURL(link)}>
-          <Title>Report Issue</Title>
-        </TouchableOpacity>
         <TouchableOpacity
           style={{ paddingLeft: 16, paddingBottom: 21 }}
           onPress={() => logout()}>

navigation/stack_navigators/ResourcesStack.js

@@ -17,7 +17,7 @@ export default function ResourcesStackNavigator() {
   return (
     <ResourcesStack.Navigator
       screenOptions={{
-        drawerLabel: 'Rewards',
+        drawerLabel: 'Resources',
         headerShown: false,
         cardStyle: { backgroundColor: Colors.lightest },
         config,

navigation/stack_navigators/RewardsStack.js

@@ -0,0 +1,44 @@
+import {
+  CardStyleInterpolators,
+  createStackNavigator,
+} from '@react-navigation/stack';
+import React from 'react';
+import { Platform } from 'react-native';
+import { useSafeArea } from 'react-native-safe-area-context';
+import Colors from '../../constants/Colors';
+import RewardsScreen from '../../screens/rewards/RewardsScreen';
+
+const config = Platform.select({
+  web: { headerMode: 'screen' },
+  default: {
+    headerMode: 'none',
+  },
+});
+
+const RewardsStack = createStackNavigator();
+
+export default function RewardsStackNavigator() {
+  return (
+    <RewardsStack.Navigator
+      screenOptions={{
+        cardOverlayEnabled: true,
+        drawerLabel: 'Rewards',
+        gestureEnabled: true,
+        headerShown: false,
+        cardStyle: { backgroundColor: Colors.lightest },
+        config,
+      }}>
+      <RewardsStack.Screen
+        name="RewardsOverlay"
+        component={RewardsScreen}
+        options={{
+          cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
+          gestureDirection: 'vertical',
+          gestureResponseDistance: {
+            vertical: 162 + useSafeArea().top,
+          },
+        }}
+      />
+    </RewardsStack.Navigator>
+  );
+}