added map view component and button

.expo/packager-info.json

@@ -1 +1,10 @@
-{}
+{
+  "packagerPort": 19001,
+  "packagerPid": 4392,
+  "expoServerPort": 19000,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
+  "webpackServerPort": null,
+  "devToolsPort": 19002
+}

App.tsx

@@ -12,6 +12,7 @@ import JuniorDash from './components/JuniorDash';
 import LoginPage from './components/LoginPage';
 import NewTicket from './components/NewTicket';
 import NewTicketDesc from './components/NewTicketDesc';
+import Map from './components/MapView';
 
 const client = new ApolloClient({
   uri: 'http://localhost:3000/graphql',
@@ -50,6 +51,7 @@ export default function App() {
           <Stack.Screen name="LoginPage" component={LoginPage} />
           <Stack.Screen name="NewTicket" component={NewTicket} />
           <Stack.Screen name="NewTicketDesc" component={NewTicketDesc} />
+          <Stack.Screen name="Map" component={Map} />
         </Stack.Navigator>
         {/* </AuthContext.Provider> */}
       </NavigationContainer>

components/MapView.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import MapView from 'react-native-maps';
+import {StyleSheet, Text, View, Dimensions} from 'react-native';
+
+function Map() {
+  const availableLocations = [
+    {
+      latitude: 37.78825,
+      longitude: -122.4324,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+    {
+      latitude: 34.04544,
+      longitude: -118.445848,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+    {
+      latitude: 34.136254,
+      longitude: -118.026447,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+    {
+      latitude: 40.682294,
+      longitude: -73.978018,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+    {
+      latitude: 42.35052,
+      longitude: -71.058802,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+    {
+      latitude: 47.610903,
+      longitude: -122.336229,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+    {
+      latitude: 34.419007,
+      longitude: -119.709215,
+      latitudeDelta: 0.0922,
+      longitudeDelta: 0.0421,
+    },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <MapView
+        style={styles.mapStyle}
+        initialRegion={
+          availableLocations[
+            Math.floor(Math.random() * availableLocations.length)
+          ]
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mapStyle: {
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+  },
+});
+
+export default Map;

components/Splash.tsx

@@ -15,6 +15,11 @@ const Splash = ({navigation}) => {
         onPress={() => navigation.navigate('LoginPage')}>
         <Text style={styles.buttonText}>Log In</Text>
       </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate('Map')}>
+        <Text style={styles.buttonText}>See Location</Text>
+      </TouchableOpacity>
       <StatusBar style="auto" />
     </View>
   );

components/Ticket.tsx

@@ -15,7 +15,7 @@ const Ticket = props => {
   const [addHelperToTask, {data, error}] = useMutation(ADD_HELPER_TO_TASK);
 
   // destucturing the props
-  const {task, authID} = props;
+  const {task, authID, navigation} = props;
   const {seniorname, type, description, id} = task;
   // handle claim submit button
   const handleClaim = async () => {
@@ -35,6 +35,7 @@ const Ticket = props => {
       console.log('error', error);
     }
   };
+
   return (
     <View style={styles.container}>
       <Text style={styles.text}>Who: {seniorname}</Text>
@@ -44,6 +45,11 @@ const Ticket = props => {
       <TouchableOpacity style={styles.button} onPress={handleClaim}>
         <Text style={styles.buttonText}>Claim</Text>
       </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate('Map')}>
+        <Text style={styles.buttonText}>See Location</Text>
+      </TouchableOpacity>
     </View>
   );
 };

package.json

@@ -26,6 +26,7 @@
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
+    "react-native-maps": "^0.27.1",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",