Added map component and new map screen

navigation/BottomTabNavigator.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
 import TabOneScreen from '../screens/TabOneScreen';
+import LiveTrackingScreen from '../screens/LiveTrackingScreen';
 import TabTwoScreen from '../screens/TabTwoScreen';
 import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
 
@@ -32,6 +33,13 @@ export default function BottomTabNavigator() {
           tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
         }}
       />
+      <BottomTab.Screen
+        name="Map"
+        component={LiveTrackingScreen}
+        options={{
+          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+        }}
+      />
     </BottomTab.Navigator>
   );
 }

navigation/LinkingConfiguration.ts

@@ -16,6 +16,11 @@ export default {
               TabTwoScreen: 'two',
             },
           },
+          Map: {
+            screens: {
+              TabOneScreen: 'three',
+            },
+          },
         },
       },
       NotFound: '*',

package.json

@@ -30,6 +30,7 @@
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-gesture-handler": "~1.8.0",
+    "react-native-maps": "0.27.1",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.0",
     "react-native-web": "~0.13.12"

screens/LiveTrackingScreen.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { StyleSheet, Dimensions } from 'react-native';
+import { Text, View } from '../components/Themed';
+import MapView, { Marker } from 'react-native-maps';
+import { useState } from 'react';
+
+export default function LiveTrackingScreen() {
+  const [markers, setMarkers] = useState([
+    {
+      latlng: {
+        latitude: 55.6760968,
+        longitude: 12.5683371,
+      },
+      title: "marker1",
+      description: "marker1 description...",
+    },
+    {
+      latlng: {
+        latitude: 56.6760968,
+        longitude: 9.5683371,
+      },
+      title: "marker2",
+      description: "marker2 description...",
+    },
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Live tracking</Text>
+      <MapView style={styles.map} >
+        {markers.map((marker, i) => (
+          <Marker
+          key={i}
+          coordinate={marker.latlng}
+          title={marker.title}
+          description={marker.description}
+        />
+        ))}
+
+      </MapView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+  map: {
+    width: '100%',
+    height: '50%',
+    // width: Dimensions.get('window').width,
+    // height: Dimensions.get('window').height,
+  },
+});

types.tsx

@@ -6,6 +6,7 @@ export type RootStackParamList = {
 export type BottomTabParamList = {
   TabOne: undefined;
   TabTwo: undefined;
+  Map: undefined;
 };
 
 export type TabOneParamList = {