Update Expo 48 > 49

app.json

@@ -12,7 +12,9 @@
       "backgroundColor": "#000000"
     },
     "scheme": "myapp",
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true,
       "infoPlist": {
@@ -25,7 +27,9 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "permissions": ["android.permission.CAMERA"],
+      "permissions": [
+        "android.permission.CAMERA"
+      ],
       "package": "com.ajgeel.qrky"
     },
     "plugins": [
@@ -34,7 +38,8 @@
         {
           "cameraPermission": "Allow QRKY to access your camera."
         }
-      ]
+      ],
+      "expo-router"
     ],
     "extra": {
       "eas": {

app/_layout.tsx

@@ -2,55 +2,63 @@ import { Tabs, SplashScreen } from "expo-router";
 import { useFonts } from "expo-font";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { StatusBar } from "expo-status-bar";
+import { colors } from "../theme/colors";
+import { useEffect } from "react";
+
+SplashScreen.preventAutoHideAsync();
+
+const tabBarIcon = (focused: boolean, name: "qr-code" | "albums") => (
+  <Ionicons
+    name={name}
+    size={24}
+    color={focused ? "rgb(255,255,255)" : "rgba(255,255,255,.4)"}
+  />
+);
 
 const Layout = () => {
+  // TODO: Extract to useSystemAssets hook
   const [fontsLoaded] = useFonts({
     "DMSans-Regular": require("../assets/fonts/DMSans/DMSans-Regular.otf"),
     "DMSans-Medium": require("../assets/fonts/DMSans/DMSans-Medium.otf"),
     "DMSans-Bold": require("../assets/fonts/DMSans/DMSans-Bold.otf"),
   });
 
+  useEffect(() => {
+    if (fontsLoaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded]);
+
   if (!fontsLoaded) {
-    return <SplashScreen />;
+    return null;
   }
 
   return (
     <>
-      {!fontsLoaded && <SplashScreen />}
-      <StatusBar style="light" animated backgroundColor="rgba(0,0,0,0)" />
+      <StatusBar style="light" animated backgroundColor={colors.transparent} />
+      {/* TODO: Extract tabs to components/Navigation/Tabs */}
       <Tabs
         screenOptions={{
           headerShown: false,
           tabBarShowLabel: false,
           tabBarStyle: {
-            backgroundColor: "rgba(6,18,58,1)",
-            borderTopWidth: 1,
-            borderTopColor: "rgba(255,255,255,.2)",
+            backgroundColor: colors.blue.s900,
+            borderTopWidth: 2,
+            borderTopColor: "rgba(255,255,255,.1)",
+            height: 64,
           },
         }}
       >
         <Tabs.Screen
           name="index"
           options={{
-            tabBarIcon: ({ focused }) => (
-              <Ionicons
-                name="qr-code"
-                size={24}
-                color={focused ? "rgba(255,255,255,1)" : "rgba(255,255,255,.4)"}
-              />
-            ),
+            tabBarIcon: ({ focused }) => tabBarIcon(focused, "qr-code"),
           }}
         />
         <Tabs.Screen
           name="history"
           options={{
-            tabBarIcon: ({ focused }) => (
-              <Ionicons
-                name="albums"
-                size={24}
-                color={focused ? "rgba(255,255,255,1)" : "rgba(255,255,255,.4)"}
-              />
-            ),
+            tabBarIcon: ({ focused }) => tabBarIcon(focused, "albums"),
           }}
         />
       </Tabs>

app/history.tsx

@@ -1,50 +1,64 @@
+import HistoryItem from "../components/HistoryItem/HistoryItem";
+import { colors } from "../theme/colors";
 import { fonts } from "../theme/fonts";
 import { View, StyleSheet, Text, FlatList } from "react-native";
+import LoadingScreen from "../components/LoadingScreen/LoadingScreen";
+import { useScanHistory } from "../hooks/useScanHistory";
+import ClearHistory from "../components/HistoryItem/ClearHistory";
+import { useScanner } from "../hooks/useScanner";
+import ItemModal from "../components/ItemModal";
 
-const MOCK_DATA = [
-  {
-    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
-    title: "First Item",
-    date: new Date(),
-  },
-  {
-    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
-    title: "Second Item",
-    date: new Date(),
-  },
-  {
-    id: "58694a0f-3da1-471f-bd96-145571e29d72",
-    title: "Third Item",
-    date: new Date(),
-  },
-];
+const History = () => {
+  const {
+    scannedData,
+    setScannedData,
+    isModalVisible,
+    setIsModalVisible,
+    onCloseModal,
+  } = useScanner();
+  const { historyItems, isLoading } = useScanHistory();
 
-type ItemProps = { title: string; date: Date };
+  if (historyItems.length === 0 && isLoading) {
+    return <LoadingScreen />;
+  }
 
-const Item = ({ title, date }: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.text}>{title}</Text>
-    <Text style={styles.text}>{date.toString()}</Text>
-  </View>
-);
+  const sortedItems = historyItems.sort(
+    (a, b) => new Date(b.scannedAt).getTime() - new Date(a.scannedAt).getTime()
+  );
 
-const History = () => {
   return (
     <View style={styles.container}>
-      {MOCK_DATA.length > 0 ? (
-        <>
-          <Text style={styles.header}>Scanned Items</Text>
-          <FlatList
-            data={MOCK_DATA}
-            renderItem={({ item }) => (
-              <Item title={item.title} date={item.date} />
-            )}
-            keyExtractor={(item) => item.id}
-            ItemSeparatorComponent={() => <View style={styles.separator} />}
-          />
-        </>
+      <Text style={styles.header}>Scanned Items</Text>
+      <ItemModal
+        isVisible={isModalVisible}
+        onClose={onCloseModal}
+        data={scannedData}
+      />
+      {historyItems.length > 0 ? (
+        <FlatList
+          data={sortedItems}
+          renderItem={({ item }) => (
+            <HistoryItem
+              data={item.data}
+              scannedAt={item.scannedAt}
+              onPressBody={() => {
+                setScannedData(item.data);
+                setIsModalVisible(true);
+              }}
+            />
+          )}
+          keyExtractor={(item) => item.data}
+          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          ListFooterComponent={() => <ClearHistory />}
+          refreshing={false}
+          onRefresh={() => {
+            console.log("Todo: implement refreshing.");
+          }}
+        />
       ) : (
-        <></>
+        <Text style={styles.emptyState}>
+          You don't have any scanned items yet. Get out there and scan some QRs!
+        </Text>
       )}
     </View>
   );
@@ -53,27 +67,30 @@ const History = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "rgba(6,18,58,1)",
-    padding: 24,
+    backgroundColor: colors.blue.s900,
     paddingTop: 52,
   },
-  item: {
-    paddingVertical: 12,
-  },
-  text: {
-    color: "white",
-    fontFamily: fonts.regular,
-    fontSize: 16,
-  },
   separator: {
-    backgroundColor: "rgba(255,255,255,.4)",
+    backgroundColor: colors.white,
+    opacity: 0.4,
     height: 1,
+    marginHorizontal: 24,
   },
   header: {
-    color: "white",
+    color: colors.white,
     fontFamily: fonts.bold,
     fontSize: 20,
-    marginBottom: 12,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  emptyState: {
+    color: colors.white,
+    fontFamily: fonts.regular,
+    fontSize: 16,
+    lineHeight: 16 * 1.6,
+    padding: 24,
+    paddingTop: 12,
+    opacity: 0.6,
   },
 });
 

app/index.tsx

@@ -5,15 +5,16 @@ import ScannerOverlay from "../components/ScannerOverlay";
 import ItemModal from "../components/ItemModal";
 import { useScanner } from "../hooks/useScanner";
 import { useIsFocused } from "@react-navigation/native";
+import { colors } from "../theme/colors";
 
 const Index = () => {
   const {
     hasPermission,
-    scanned,
+    isScanned,
     scannedData,
     isModalVisible,
-    handleBarCodeScanned,
-    handleReset,
+    handleCodeScanned,
+    onCloseModal,
   } = useScanner();
   const isFocused = useIsFocused();
 
@@ -30,12 +31,12 @@ const Index = () => {
       <View style={styles.container}>
         <ItemModal
           isVisible={isModalVisible}
-          onClose={handleReset}
+          onClose={onCloseModal}
           data={scannedData}
         />
         {isFocused && (
           <BarCodeScanner
-            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+            onBarCodeScanned={isScanned ? undefined : handleCodeScanned}
             style={StyleSheet.absoluteFillObject}
           >
             <ScannerOverlay>
@@ -51,24 +52,24 @@ const Index = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "rgba(6,18,58,1)",
+    backgroundColor: colors.blue.s900,
   },
   noPermissionContainer: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
   },
   noPermissionText: {
-    color: "white",
+    color: colors.white,
     fontFamily: fonts.bold,
   },
   ctaText: {
-    color: "rgba(6,18,58,1)",
+    color: colors.blue.s900,
     textAlign: "center",
     paddingVertical: 8,
     paddingHorizontal: 4,
     fontFamily: fonts.bold,
-    backgroundColor: "white",
+    backgroundColor: colors.white,
     width: "101%",
   },
 });