Seperate firebase init to seperate file & change name of TrackingMap …

…props

App.tsx

@@ -7,6 +7,7 @@ import useCachedResources from './hooks/useCachedResources';
 import { createAppContainer } from 'react-navigation'
 import { createStackNavigator } from 'react-navigation-stack'
 import LiveTrackingScreen from './screens/LiveTrackingScreen';
+import { initializeFirebase } from './utils/initializeFirebase';
 
 const navigator = createStackNavigator({
   map: LiveTrackingScreen
@@ -17,21 +18,7 @@ const navigator = createStackNavigator({
   }
 });
 
-var firebaseConfig = {
-  apiKey: "AIzaSyCjWvauKhB-7i36JvK-roJ3WckHtoH9SGs",
-  authDomain: "sg-fotex-hd-dev.firebaseapp.com",
-  projectId: "sg-fotex-hd-dev",
-  storageBucket: "sg-fotex-hd-dev.appspot.com",
-  messagingSenderId: "166090563833",
-  appId: "1:166090563833:web:1a9e9edba78df8ac258228"
-};
-
-if (!firebase.apps.length) {
-  firebase.initializeApp(firebaseConfig);
-} else {
-  firebase.app(); // if already initialized, use that one
-};
-
+initializeFirebase();
 
 const App = createAppContainer(navigator);
 

components/TrackingMap.tsx

@@ -1,71 +1,66 @@
 import * as React from "react";
 import { useEffect, useRef } from "react";
-import { Image, Platform, StyleSheet } from "react-native";
+import { Image, Platform, StyleSheet, Text } from "react-native";
 import MapView, { AnimatedRegion, MapViewAnimated, MarkerAnimated } from "react-native-maps";
-import { Text } from "../components/Themed";
-
-export interface IMarker {
-  latlng: {
+export interface TrackingMapProps {
+  courierPosition: {
     latitude: number;
     longitude: number;
   };
-  title: string;
-  description: string;
+  expectedArrivalTime: string | null;
 }
 
-export interface TrackingMapProps {
-  courier: IMarker;
-}
 
-const TrackingMap: React.FC<TrackingMapProps> = ({ courier }) => {
+const TrackingMap: React.FC<TrackingMapProps> = ({ courierPosition, expectedArrivalTime }) => {
 
   // Animate the movement of the courier position
   const animatedRegion = useRef<AnimatedRegion>(new AnimatedRegion({
-    latitude: courier.latlng.latitude,
-    longitude: courier.latlng.longitude,
+    latitude: courierPosition.latitude,
+    longitude: courierPosition.longitude,
     latitudeDelta: 0.04,
     longitudeDelta: 0.04,
   }));
   const marker = useRef<MarkerAnimated>(null);
   useEffect(() => {
      const DURATION = 800
 
-      if (Number(animatedRegion.current.latitude) !== courier.latlng.latitude) {
+      if (Number(animatedRegion.current.latitude) !== courierPosition.latitude) {
         if (Platform.OS === 'android') {
           if (marker.current) {
             marker.current.animateMarkerToCoordinate(
-              courier.latlng,
+              courierPosition,
               DURATION
               );
             }
           } else {
           animatedRegion.current.timing({
             useNativeDriver: false,
-            latitude: courier.latlng.latitude,
-            longitude: courier.latlng.longitude,
+            latitude: courierPosition.latitude,
+            longitude: courierPosition.longitude,
             duration: DURATION
           }).start();
         }
       }
 
-  }, [courier.latlng]);
+  }, [courierPosition]);
 
   return (
     <>
-      <Text style={styles.title}>Live tracking</Text>
+      <Text style={styles.title} >Your Order Location</Text>
+      <Text style={styles.subTitle} >{`Expected Arrival: ${expectedArrivalTime}`}</Text>
       <MapView
         style={styles.map}
         initialRegion={{
-          latitude: courier.latlng.latitude,
-          longitude: courier.latlng.longitude,
+          latitude: courierPosition.latitude,
+          longitude: courierPosition.longitude,
           latitudeDelta: 0.04,
           longitudeDelta: 0.04,
         }}
       >
         <MarkerAnimated
           coordinate={animatedRegion.current}
-          title={courier.title}
-          description={courier.description}
+          title="Your order"
+          description={"Expected arrival: "+expectedArrivalTime}
           ref={marker}
         >
           <Image
@@ -85,8 +80,21 @@ const styles = StyleSheet.create({
     height: "100%",
   },
   title: {
+    marginHorizontal: 10,
+    textAlign: "left",
+    alignSelf: "stretch",
     fontSize: 20,
     fontWeight: "bold",
+    color: "rgb(92, 105, 131)"
+  },
+  subTitle: {
+    marginHorizontal: 10,
+    marginBottom: 10,
+    color: "rgb(92, 105, 131)",
+    textAlign: "left",
+    alignSelf: "stretch",
+    fontSize: 14,
+    fontWeight: "bold",
   },
   map: {
     width: "100%",

package.json

@@ -39,7 +39,8 @@
     "react-native-screens": "~2.15.0",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.3",
-    "react-navigation-stack": "^2.10.2"
+    "react-navigation-stack": "^2.10.2",
+    "tailwind": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",

screens/LiveTrackingScreen.tsx

@@ -7,13 +7,16 @@ import { View } from '../components/Themed';
 import TrackingMap from '../components/TrackingMap';
 
 export default function LiveTrackingScreen() {
-  // Subscribe to database tracking data
-  useEffect(() => {
-    let unmounted = false;
+  const [courierPosition, setCourierPosition] = useState(
+    {
+        latitude: 0,
+        longitude: 0,
+    });
+    const [expectedArrivalTime, setExpectedArrivalTime] = useState<string | null>(null);
     const COLLECTION = "tracking";
     const ORDER_ID = "9003"
+    let unmounted = false;
     const getGeoData = () => {
-
       firebase
         .firestore()
         .collection(COLLECTION)
@@ -26,36 +29,25 @@ export default function LiveTrackingScreen() {
             const date = new Date(data?.expectedArrival?.seconds* 1000);
             const formattedDate = format(date, "MMMM do, yyyy H:mma");
             const newExpectedArrival = formattedDate;
-
             console.log("New coords: ",newLatitude, newLongitude);
-            setCourier({
-              latlng: {
+            setExpectedArrivalTime(newExpectedArrival);
+            setCourierPosition({
                 latitude: newLatitude,
                 longitude: newLongitude,
-              },
-              title: "Your order",
-              description: `Expected arrival: ${newExpectedArrival }`,
             })
           }
         });
     };
+  // Subscribe to database tracking data
+  useEffect(() => {
     getGeoData();
     return () => {unmounted = true}
   }, [])
 
-  const [courier, setCourier] = useState(
-    {
-      latlng: {
-        latitude: 55.6760968,
-        longitude: 12.5683371,
-      },
-      title: "",
-      description: "...",
-    });
 
   return (
     <View style={styles.container}>
-      <TrackingMap courier={courier} />
+      <TrackingMap courierPosition={courierPosition} expectedArrivalTime={expectedArrivalTime} />
     </View>
   );
 }

utils/initializeFirebase.ts

@@ -0,0 +1,18 @@
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+
+export const initializeFirebase = () => {
+    if (!firebase.apps.length) {
+      // Initialize Cloud Firestore through Firebase
+      firebase.initializeApp({
+        apiKey: 'AIzaSyCjWvauKhB-7i36JvK-roJ3WckHtoH9SGs',
+        authDomain: 'sg-fotex-hd-dev.firebaseapp.com',
+        projectId: 'sg-fotex-hd-dev',
+        storageBucket: 'sg-fotex-hd-dev.appspot.com',
+        messagingSenderId: '166090563833',
+        appId: '1:166090563833:web:1a9e9edba78df8ac258228',
+      });
+    } else {
+      firebase.app(); // if already initialized, use that one
+    }
+  };