feat: add skeleton for maps

package.json

@@ -46,6 +46,7 @@
     "react-dom": "17.0.1",
     "react-firebase-hooks": "^5.0.3",
     "react-native": "0.64.3",
+    "react-native-maps": "0.29.4",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
     "react-native-web": "0.17.1",

src/navigation/index.tsx

@@ -16,6 +16,7 @@ import useColorScheme from '../hooks/useColorScheme';
 import useSettings from '../hooks/useSettings';
 import tw from '../lib/tailwind';
 import Loading from '../screens/Loading';
+import Map from '../screens/Map';
 import Onboarding from '../screens/Onboarding';
 import SignIn from '../screens/SignIn';
 import SignUp from '../screens/SignUp';
@@ -90,13 +91,12 @@ function HomeTabNavigator() {
 
   return (
     <BottomTab.Navigator
-      initialRouteName="TabOne"
+      initialRouteName="Map"
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme].tint,
         tabBarStyle: tw`bg-white dark:bg-zinc-800`,
         headerStyle: tw`bg-white dark:bg-zinc-800`,
         headerTitleStyle: tw`dark:text-gray-100`,
-        headerShown: false,
       }}
     >
       <BottomTab.Screen
@@ -123,6 +123,14 @@ function HomeTabNavigator() {
           ),
         })}
       />
+      <BottomTab.Screen
+        name="Map"
+        component={Map}
+        options={{
+          headerShown: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="map" color={color} />,
+        }}
+      />
       <BottomTab.Screen
         name="TabTwo"
         component={TabTwoScreen}
@@ -142,5 +150,5 @@ function TabBarIcon(props: {
   name: React.ComponentProps<typeof FontAwesome>['name'];
   color: string;
 }) {
-  return <FontAwesome size={30} style={tw`-mb-1`} {...props} />;
+  return <FontAwesome size={25} {...props} />;
 }

src/navigation/types.ts

@@ -29,6 +29,9 @@ export type RootStackScreenProps<Screen extends keyof RootStackParamList> = Nati
 >;
 
 export type RootTabParamList = {
+  Map: undefined;
+  BusStops: undefined;
+  BusLines: undefined;
   TabOne: undefined;
   TabTwo: undefined;
 };

src/screens/Map.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import MapView from 'react-native-maps';
+import tw from '../lib/tailwind';
+
+// latitude = y-axis
+// longitude = x-axis
+// latitude, longitude
+const southWestCoordinates = [-20.525305, 57.307921];
+const northEastCoordinates = [-19.982901, 57.806426];
+const centreCoordinates = [-20.254103, 57.5571735];
+
+export default function Map() {
+  return (
+    <View style={tw`h-full`}>
+      <MapView
+        style={tw`flex-1`}
+        provider="google"
+        initialRegion={{
+          latitude: centreCoordinates[0],
+          longitude: centreCoordinates[1],
+          latitudeDelta: 0.7,
+          longitudeDelta: 0.7,
+        }}
+      >
+        <View style={tw`h-10 w-10 bg-red-500`}></View>
+      </MapView>
+    </View>
+  );
+}

src/screens/TabOneScreen.tsx

@@ -9,12 +9,10 @@ export default function TabOneScreen() {
   useDeviceContext(tw);
 
   return (
-    <SafeAreaView style={tw`h-full`}>
-      <View style={tw`flex items-center justify-center flex-1 bg-white dark:bg-zinc-900`}>
-        <Text style={tw`text-xl font-bold dark:text-gray-100`}>Tab One</Text>
-        <View style={tw`w-4/5 h-px my-8 bg-gray-300 dark:bg-gray-100`} />
-        <EditScreenInfo path="/src/screens/TabOneScreen.tsx" />
-      </View>
+    <SafeAreaView style={tw`flex items-center justify-center flex-1 bg-white dark:bg-zinc-900`}>
+      <Text style={tw`text-xl font-bold dark:text-gray-100`}>Tab One</Text>
+      <View style={tw`w-4/5 h-px my-8 bg-gray-300 dark:bg-gray-100`} />
+      <EditScreenInfo path="/src/screens/TabOneScreen.tsx" />
     </SafeAreaView>
   );
 }

src/screens/TabTwoScreen.tsx

@@ -9,12 +9,10 @@ export default function TabTwoScreen() {
   useDeviceContext(tw);
 
   return (
-    <SafeAreaView style={tw`h-full`}>
-      <View style={tw`flex items-center justify-center flex-1 bg-white dark:bg-zinc-900`}>
-        <Text style={tw`text-xl font-bold dark:text-gray-100`}>Tab Two</Text>
-        <View style={tw`w-4/5 h-px my-8 bg-gray-300 dark:bg-gray-50`} />
-        <EditScreenInfo path="/src/screens/TabTwoScreen.tsx" />
-      </View>
+    <SafeAreaView style={tw`flex items-center justify-center flex-1 bg-white dark:bg-zinc-900`}>
+      <Text style={tw`text-xl font-bold dark:text-gray-100`}>Tab Two</Text>
+      <View style={tw`w-4/5 h-px my-8 bg-gray-300 dark:bg-gray-50`} />
+      <EditScreenInfo path="/src/screens/TabTwoScreen.tsx" />
     </SafeAreaView>
   );
 }

yarn.lock

@@ -2198,6 +2198,11 @@
   resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
+"@types/geojson@^7946.0.7":
+  version "7946.0.8"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
+  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -6568,6 +6573,13 @@ react-native-codegen@^0.0.6:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
+react-native-maps@0.29.4:
+  version "0.29.4"
+  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.29.4.tgz#eb4a446104ed2aca5361422d06712f26d4c0d562"
+  integrity sha512-Td2KE8+KODcHOxfB1GBNnzFo4/89rlLiC7yTvqQZh0tGVrEzIcgSleUZRrjtq/WvSWSR4rql4AS+0VsBgDkYrw==
+  dependencies:
+    "@types/geojson" "^7946.0.7"
+
 react-native-safe-area-context@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed"