Map lowered, header refactor, nav refactor

src/components/GeoMap.tsx

@@ -4,12 +4,24 @@ import React, {
 import MapView, { LatLng } from 'react-native-maps';
 import { useDispatch, useSelector } from 'react-redux';
 import { watchPositionAsync } from 'expo-location';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 import mapStyleDay from '../../map-styles/MapStyleDay.json';
 import { geoSearch } from '../store/caches/CachesActions';
 import { distanceBetweenCoordinates } from '../utils/Geography';
 import { getAuthToken } from '../store/auth/AuthSelectors';
 
+const styles = StyleSheet.create({
+  hideGoogleLogo: {
+    ...StyleSheet.absoluteFillObject,
+    bottom: -28,
+  },
+  lowCenter: {
+    ...StyleSheet.absoluteFillObject,
+    bottom: -100,
+  },
+});
+
+
 interface UserLocationContext {
   userLocation: LatLng;
 }
@@ -79,7 +91,7 @@ export const GeoMapSearch: React.FC = ({ children }) => {
   }, [userLocation, lastGeosearch, setLastGeosearch]);
 
   return (
-    <GeoMap location={userLocation}>
+    <GeoMap location={userLocation} style={styles.lowCenter}>
       {children}
     </GeoMap>
   );
@@ -101,6 +113,7 @@ interface GeoMapProps {
   location: LatLng;
   children?: any;
   rotationEnabled?: boolean;
+  style?: ViewStyle;
 }
 
 /**
@@ -112,6 +125,7 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
   children,
   location,
   rotationEnabled = true,
+  style,
 }, ref?) => {
   const mapRef = useRef<MapView>(null);
 
@@ -125,7 +139,7 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
     <MapView
       ref={ref ?? mapRef}
       provider={'google'}
-      style={StyleSheet.absoluteFillObject}
+      style={style ?? styles.hideGoogleLogo}
       customMapStyle={mapStyleDay}
       showsBuildings={false}
       showsIndoors={false}

src/components/ScreenHeader.tsx

-import React, { useCallback } from 'react';
-import { Header } from 'react-native-elements';
-import { useNavigation } from '@react-navigation/native';
-import theme from '../theme';
-import IconButton from './IconButton';
-
-const { colors, spacing } = theme;
-
-const RightComponent = () => {
-  const { navigate } = useNavigation();
-  const onSettingsPress = useCallback(() => navigate('Settings'), [navigate]);
-  return (
-    <IconButton icon={'cog'} size={20} color={'white'} onPress={onSettingsPress} />
-  );
-};
-
-interface Props {
-  title: string;
-}
-
-const ScreenHeader: React.FC<Props> = ({ title }) => (
-  <Header
-    leftContainerStyle={{ display: 'none' }}
-    centerComponent={{
-      text: title,
-      style: {
-        fontSize: 32,
-        color: colors.white,
-        width: '100%',
-      },
-    }}
-    rightComponent={<RightComponent />}
-    containerStyle={{
-      paddingHorizontal: spacing.screenPadding,
-      backgroundColor: colors.green,
-    }}
-  />
-);
-
-export default ScreenHeader;

src/navigation/AppNavigator.tsx

 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import CreateCacheNavigator, { BackButton } from './CreateCacheNavigator';
+import CreateCacheNavigator from './CreateCacheNavigator';
 import CameraModal from '../screens/create/CameraModal';
-import DevScreen from '../screens/DevScreen';
 import TagScreen from '../screens/TagScreen';
 import HomeNavigator from './HomeNavigator';
+import HeaderLeftButton from './HeaderLeftButton';
+import theme from '../theme';
 
 const Stack = createStackNavigator();
 const AppNavigator = () => (
   <Stack.Navigator
     mode={'modal'}
-    screenOptions={({ route, navigation }) => ({
-      headerShown: ['Settings', 'TagScreen'].includes(route.name),
-      headerLeft: () => (
-        <BackButton
-          isX
-          onPress={() => navigation.goBack()}
-        />
-      ),
-      headerTitleStyle: { fontSize: 24 },
-    })}
+    screenOptions={{headerShown: false}}
   >
     <Stack.Screen
       name={'Home'}
@@ -36,11 +28,14 @@ const AppNavigator = () => (
     <Stack.Screen
       name={'TagScreen'}
       component={TagScreen}
-      options={{ title: 'Tag' }}
-    />
-    <Stack.Screen
-      name={'DevScreen'}
-      component={DevScreen}
+      options={({ navigation }) => ({
+        headerShown: true,
+        headerLeft: () => <HeaderLeftButton type='close' onPress={() => navigation.goBack()} />,
+        headerStyle: {
+          backgroundColor: theme.colors.green,
+        },
+        headerTitleStyle: { fontSize: 24, color: theme.colors.white },
+      })}
     />
   </Stack.Navigator>
 );

src/navigation/CreateCacheNavigator.tsx

 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import { Icon } from 'react-native-elements';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 import CacheMessageScreen from '../screens/create/CacheMessageScreen';
 import CacheDurationScreen from '../screens/create/CacheDurationScreen';
 import CacheSubmitScreen from '../screens/create/CacheSubmitScreen';
@@ -9,36 +7,23 @@ import theme from '../theme';
 import CacheTypeScreen from '../screens/create/CacheTypeScreen';
 import GamesScreen from '../screens/create/GamesScreen';
 import OutdoorsScreen from '../screens/create/OutdoorsScreen';
-
-interface BackButtonProps {
-  isX: boolean;
-  onPress: () => void;
-}
-
-export const BackButton: React.FC<BackButtonProps> = ({ isX, onPress }) => (
-  <TouchableOpacity
-    onPress={onPress}
-    style={{ marginLeft: theme.spacing.screenPadding }}
-  >
-    <Icon
-      name={isX ? 'times' : 'chevron-left'}
-      type={'font-awesome-5'}
-    />
-  </TouchableOpacity>
-);
+import HeaderLeftButton from './HeaderLeftButton';
 
 const Stack = createStackNavigator();
 const CreateCacheNavigator = () => (
   <Stack.Navigator
     screenOptions={
       ({ navigation, route }) => ({
+        headerStyle: {
+          backgroundColor: theme.colors.green,
+        },
+        headerTitleStyle: { fontSize: 24, color: theme.colors.white },
         headerLeft: () => (
-          <BackButton
-            isX={route.name === 'CacheType'}
+          <HeaderLeftButton
+            type={route.name === 'CacheType' ? 'close' : 'back'}
             onPress={() => navigation.goBack()}
           />
         ),
-        headerTitleStyle: { fontSize: 24 },
       })
     }
   >

src/navigation/HeaderLeftButton.tsx

+import React from 'react';
+import { Icon } from 'react-native-elements';
+import theme from '../theme';
+
+interface Props {
+  type?: 'back' | 'close';
+  onPress: () => void;
+}
+
+const HeaderLeftButton: React.FC<Props> = ({ type = 'back', onPress }) => (
+  <Icon
+    name={type === 'back' ? 'chevron-left' : 'times'}
+    type={'font-awesome-5'}
+    color={theme.colors.white}
+    onPress={onPress}
+    style={{ paddingHorizontal: theme.spacing.screenPadding }}
+  />
+);
+
+export default HeaderLeftButton;

src/navigation/HomeNavigator.tsx

 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import DiscoverScreen from '../screens/DiscoverScreen';
-import SavedNavigator from './SavedNavigator';
 import SettingsScreen from '../screens/SettingsScreen';
+import HeaderLeftButton from './HeaderLeftButton';
+import theme from '../theme';
+import SavedListScreen from '../screens/SavedListScreen';
+import CacheDetailScreen, { NavParams } from '../screens/CacheDetailScreen';
+import RevisitCacheScreen from '../screens/RevisitCacheScreen';
+import DevScreen from '../screens/DevScreen';
 
 const Stack = createStackNavigator();
 const HomeNavigator = () => (
-  <Stack.Navigator screenOptions={{ headerShown: false }}>
+  <Stack.Navigator
+    screenOptions={({ navigation }) => ({
+      headerLeft: () => <HeaderLeftButton onPress={() => navigation.goBack()} />,
+      headerStyle: {
+        backgroundColor: theme.colors.green,
+      },
+      headerTitleStyle: { fontSize: 24, color: theme.colors.white },
+    })}
+  >
     <Stack.Screen
       name={'Discover'}
       component={DiscoverScreen}
+      options={{headerShown: false}}
     />
+
     <Stack.Screen
-      name={'Saved'}
-      component={SavedNavigator}
-      options={{ title: 'Settings' }}
+      name={'SavedList'}
+      component={SavedListScreen}
+      options={{ title: 'Saved' }}
+    />
+    <Stack.Screen
+      name={'CacheDetail'}
+      component={CacheDetailScreen}
+      options={({ route }) => ({ title: (route.params as NavParams).title })}
+    />
+    <Stack.Screen
+      name={'RevisitCache'}
+      component={RevisitCacheScreen}
+      options={({ route }) => ({ title: (route.params as NavParams).title })}
     />
+
     <Stack.Screen
       name={'Settings'}
       component={SettingsScreen}
       options={{ title: 'Settings' }}
     />
+
+    <Stack.Screen
+      name={'Dev'}
+      component={DevScreen}
+    />
   </Stack.Navigator>
 );
 

src/navigation/SavedNavigator.tsx

-import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
-import SavedListScreen from '../screens/SavedListScreen';
-import { BackButton } from './CreateCacheNavigator';
-import CacheDetailScreen, { NavParams } from '../screens/CacheDetailScreen';
-import RevisitCacheScreen from '../screens/RevisitCacheScreen';
-
-const Stack = createStackNavigator();
-const SavedNavigator = () => (
-  <Stack.Navigator
-    screenOptions={({ navigation }) => ({
-      headerLeft: () => (
-        <BackButton
-          isX={false}
-          onPress={() => navigation.goBack()}
-        />
-      ),
-      headerTitleStyle: { fontSize: 24 },
-    })}
-  >
-    <Stack.Screen
-      name={'SavedList'}
-      component={SavedListScreen}
-      options={{ title: 'Saved Caches' }}
-    />
-    <Stack.Screen
-      name={'CacheDetail'}
-      component={CacheDetailScreen}
-      options={({ route }) => ({ title: (route.params as NavParams).title })}
-    />
-    <Stack.Screen
-      name={'RevisitCache'}
-      component={RevisitCacheScreen}
-      options={({ route }) => ({ title: (route.params as NavParams).title })}
-    />
-  </Stack.Navigator>
-);
-
-export default SavedNavigator;

src/screens/DevScreen.tsx

 import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
-import { getAuthToken } from '../store/auth/AuthSelectors'
 import { reverseGeocodeAsync } from 'expo-location';
 import { useNavigation } from '@react-navigation/native';
+import { getAuthToken } from '../store/auth/AuthSelectors';
 import { geoSearch } from '../store/caches/CachesActions';
-import { signOutAsync } from '../store/auth/AuthActions';
 import GeoButton from '../components/GeoButton';
 import theme from '../theme';
-import { setUserLatLng, getCurrentPosition } from '../store/location/LocationActions';
+import { getCurrentPosition } from '../store/location/LocationActions';
 
 const styles = StyleSheet.create({
   fullscreen: {
@@ -26,22 +25,12 @@ const DevScreen: React.FC = () => {
   const dispatch = useDispatch();
   const idToken = useSelector(getAuthToken);
 
-  const onClose = useCallback(() => navigation.goBack(), [navigation]);
-
   const onGeosearch = useCallback(async () => {
     const userLocation = await getCurrentPosition();
     dispatch(geoSearch(userLocation, '1', idToken));
     navigation.navigate('Discover');
   }, [dispatch, navigation]);
 
-  const onTokyo = useCallback(() => {
-    dispatch(setUserLatLng({
-      latitude: 35.6679191,
-      longitude: 139.4606805,
-    }));
-    navigation.navigate('Discover');
-  }, [dispatch, navigation]);
-
   const onReverseGeocode = useCallback(async () => {
     const userLocation = await getCurrentPosition();
     const results = await reverseGeocodeAsync(userLocation);
@@ -55,10 +44,6 @@ const DevScreen: React.FC = () => {
     alert(`${name} ${street} ${city} ${region} ${country}`); // eslint-disable-line no-alert
   }, []);
 
-  const onSignout = useCallback(() => {
-    dispatch(signOutAsync());
-  }, [dispatch, onClose]);
-
   return (
     <View style={styles.fullscreen}>
       <GeoButton
@@ -66,26 +51,11 @@ const DevScreen: React.FC = () => {
         onPress={onGeosearch}
         style={styles.button}
       />
-      <GeoButton
-        title={'Tokyo'}
-        onPress={onTokyo}
-        style={styles.button}
-      />
       <GeoButton
         title={'Reverse Geocode'}
         onPress={onReverseGeocode}
         style={styles.button}
       />
-      <GeoButton
-        title={'Sign Out'}
-        onPress={onSignout}
-        style={styles.button}
-      />
-      <GeoButton
-        title={'Close'}
-        onPress={onClose}
-        style={styles.button}
-      />
     </View>
   );
 };

src/screens/DiscoverScreen.tsx

@@ -22,6 +22,15 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  buttonContainer: {
+    width: '100%',
+    paddingHorizontal: theme.spacing.screenPadding,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'absolute',
+    bottom: theme.spacing.large,
+  },
   iconButton: {
     shadowColor: theme.colors.black,
     shadowOffset: {
@@ -32,21 +41,6 @@ const styles = StyleSheet.create({
     shadowRadius: 3.84,
     elevation: 5,
   },
-  avatarButton: {
-    position: 'absolute',
-    left: theme.spacing.large,
-    top: theme.spacing.xlarge,
-  },
-  createButton: {
-    position: 'absolute',
-    alignSelf: 'center',
-    bottom: theme.spacing.large,
-  },
-  savedButton: {
-    position: 'absolute',
-    right: theme.spacing.large,
-    bottom: theme.spacing.large,
-  },
 });
 
 // utils to generate caches for quick testing
@@ -72,7 +66,7 @@ const DiscoverScreen: React.FC = () => {
 
 
   const onCreatePress = useCallback(() => navigate('Create'), [navigate]);
-  const onSavedPress = useCallback(() => navigate('Saved'), [navigate]);
+  const onSavedPress = useCallback(() => navigate('SavedList'), [navigate]);
 
   const onSave = useCallback((cache: Cache) => {
     dispatch(saveCache({ ...cache, found: new Date().valueOf() }));
@@ -85,7 +79,6 @@ const DiscoverScreen: React.FC = () => {
     navigate('CacheDetail', { id: cache.id, title: 'Cache' } as NavParams);
   }, [navigate]);
 
-  // const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const drawerRef = useRef(null);
   const onDrawerOpen = useCallback(() => drawerRef.current!.open(), [drawerRef]);
   const onDrawerClose = useCallback(() => drawerRef.current!.close(), [drawerRef]);
@@ -116,36 +109,38 @@ const DiscoverScreen: React.FC = () => {
             <UserLocationMarker />
           </GeoMapSearch>
         </UserLocationProvider>
-        <View style={[styles.avatarButton, styles.iconButton]}>
-          <Avatar
-            rounded
-            size={'medium'}
-            source={{ uri: userImageUrl }}
-            onPress={onDrawerOpen}
-          />
-        </View>
-        <View style={[styles.createButton, styles.iconButton]}>
-          <Icon
-            name={'feather-alt'}
-            type={'font-awesome-5'}
-            reverse
-            raised
-            onPress={onCreatePress}
-            color={theme.colors.green}
-            size={30}
-            containerStyle={{ margin: 0 }}
-          />
-        </View>
-        <View style={[styles.savedButton, styles.iconButton]}>
-          <Icon
-            name={'book'}
-            type={'font-awesome-5'}
-            raised
-            onPress={onSavedPress}
-            color={theme.colors.green}
-            size={30}
-            containerStyle={{ margin: 0 }}
-          />
+        <View style={styles.buttonContainer}>
+          <View style={styles.iconButton}>
+            <Avatar
+              rounded
+              size={64}
+              source={{ uri: userImageUrl }}
+              onPress={onDrawerOpen}
+            />
+          </View>
+          <View style={styles.iconButton}>
+            <Icon
+              name={'feather-alt'}
+              type={'font-awesome-5'}
+              reverse
+              raised
+              onPress={onCreatePress}
+              color={theme.colors.green}
+              size={36}
+              containerStyle={{ margin: 0 }}
+            />
+          </View>
+          <View style={styles.iconButton}>
+            <Icon
+              name={'book'}
+              type={'font-awesome-5'}
+              raised
+              onPress={onSavedPress}
+              color={theme.colors.green}
+              size={30}
+              containerStyle={{ margin: 0 }}
+            />
+          </View>
         </View>
       </View>
     </Drawer>

src/screens/MainDrawer.tsx

@@ -46,6 +46,11 @@ const MainDrawer: React.FC<Props> = ({ onClose }) => {
     navigate('Settings');
   }, [onClose, navigate]);
 
+  const onDevPress = useCallback(() => {
+    onClose();
+    navigate('Dev');
+  }, [onClose, navigate]);
+
   const onSignout = useCallback(() => {
     dispatch(signOutAsync());
   }, [dispatch, onClose]);
@@ -64,9 +69,9 @@ const MainDrawer: React.FC<Props> = ({ onClose }) => {
     {
       icon: 'wrench',
       title: 'Developer',
-      onPress: onSettingsPress,
+      onPress: onDevPress,
     },
-  ]), [onSettingsPress]);
+  ]), [onSettingsPress, onDevPress]);
 
   return (
     <View style={styles.drawer}>

src/screens/SettingsScreen.tsx

-import React, { useCallback } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { View, StyleSheet } from 'react-native';
 import { Avatar } from 'react-native-elements';
 import { useNavigation } from '@react-navigation/native';
 import GeoText from '../components/GeoText';
 import theme from '../theme';
-import GeoButton from '../components/GeoButton';
 
 import {
   getUserName,
@@ -20,11 +19,8 @@ const styles = StyleSheet.create({
 });
 
 const SettingsScreen = () => {
-  const { navigate } = useNavigation();
-  const onDevPress = useCallback(() => navigate('DevScreen'), [navigate]);
-
-  const userName: string = useSelector(getUserName);
-  const userImageUrl: string = useSelector(getUserImageUrl);
+  const userName = useSelector(getUserName);
+  const userImageUrl = useSelector(getUserImageUrl);
 
   return (
     <View style={{ flex: 1, justifyContent: 'space-between' }}>
@@ -36,16 +32,11 @@ const SettingsScreen = () => {
           size={'xlarge'}
         />
         <GeoText
-          text={userName}
+          text={userName!}
           variant={'formHeader'}
           style={{ marginTop: theme.spacing.small }}
         />
       </View>
-      <GeoButton
-        title={'Dev Screen'}
-        onPress={onDevPress}
-        style={{ marginBottom: theme.spacing.medium }}
-      />
     </View>
   );
 };