Merge pull request #716 from Jonak-Adipta-Kalita/responsive

Updates

.editorconfig

@@ -1,10 +1,10 @@
-root = true
-
-[*]
-
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true
+root = true
+
+[*]
+
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true

.env.example

@@ -1,5 +1,8 @@
 PACKAGE_NAME=<YOUR_PACKAGE_NAME>
 PROJECT_ID=<YOUR_PROJECT_ID>
+PROJECT_SLUG=<YOUR_PROJECT_SLUG>
+PROJECT_OWNER=<YOUR_PROJECT_OWNER>
+PROJECT_VERSION=<YOUR_PROJECT_VERSION>
 
 # Firebase
 FIREBASE_API_KEY=<YOUR_FIREBASE_API_KEY>

@types/data.d.ts

@@ -1,7 +1,7 @@
+import { FieldValue } from "firebase/firestore";
 import { AlertButton } from "react-native";
 
 export type User = {
-    photoURL?: string;
     todos: Todo[];
     qrcodes: QRCode[];
 };

@types/navigation.d.ts

@@ -4,20 +4,20 @@ import type { StackNavigationProp } from "@react-navigation/stack";
 
 export type StackScreenParamList = {
     GetStarted: undefined;
-    NoNetwork: undefined;
-    Home: undefined;
-    Settings: undefined;
     Login: undefined;
     Register: undefined;
 
+    Home: undefined;
     Todo: undefined;
     QRCode: undefined;
-    UnitConvertor: undefined;
+
+    NoNetwork: undefined;
+
+    Settings: undefined;
 };
 
 export type BottomTabScreensParamList = {
     HomeTab: undefined;
-    AuthTab: undefined;
     ProfileTab: undefined;
 };
 

App.tsx

@@ -1,8 +1,7 @@
 import "expo-dev-client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { useColorScheme, LogBox } from "react-native";
-import { useFonts } from "expo-font";
 import LightTheme from "@themes/LightTheme";
 import DarkTheme from "@themes/DarkTheme";
 import LoadingIndicator from "@components/Loading";
@@ -11,46 +10,45 @@ import { useAuthState } from "react-firebase-hooks/auth";
 import errorAlertShower from "@utils/alertShowers/errorAlertShower";
 import BottomTabNavigator from "@navigation/BottomTabNavigator";
 import { NetworkState, getNetworkStateAsync } from "expo-network";
-import { NoNetworkStack } from "@navigation/StackNavigator";
+import { FirstLaunchStack, NoNetworkStack } from "@navigation/StackNavigator";
 import { decode } from "base-64";
-import { RecoilRoot } from "recoil";
+import { Provider as JotaiProvider } from "jotai";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import RecoilNexus from "recoil-nexus";
+import JotaiNexus from "jotai-nexus";
 import Alert from "@components/Alert";
+import { User } from "firebase/auth";
+import * as SplashScreen from "expo-splash-screen";
 
 LogBox.ignoreLogs([
     'Debugger and device times have drifted by more than 60s. Please correct this by running adb shell "date `date +%m%d%H%M%Y.%S`" on your debugger machine.',
     "Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window)",
     "AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage",
-    '[Expectation Violation: Duplicate atom key "tabBarHideState". This is a FATAL ERROR in production. But it is safe to ignore this warning if occurred because of hot module replacement.]',
 ]);
 
+SplashScreen.preventAutoHideAsync();
+
 global.atob = global.atob || decode;
 
-const AppChildren = () => {
+const AppChildren = ({ user }: { user: User | null | undefined }) => {
     const scheme = useColorScheme();
     const [networkState, setNetworkState] = useState<NetworkState | null>(null);
 
     useEffect(() => {
         getNetworkStateAsync().then((state) => setNetworkState(state));
     }, []);
 
-    if (networkState === null)
-        return (
-            <LoadingIndicator
-                dimensions={{ width: 70, height: 70 }}
-                containerStyle={{ flex: 1 }}
-            />
-        );
+    if (networkState === null) return <LoadingIndicator />;
 
     return (
         <>
             <Alert />
             <NavigationContainer
                 theme={scheme === "dark" ? DarkTheme : LightTheme}
             >
-                {networkState.isConnected &&
-                networkState.isInternetReachable ? (
+                {!user ? (
+                    <FirstLaunchStack />
+                ) : networkState.isConnected &&
+                  networkState.isInternetReachable ? (
                     <BottomTabNavigator />
                 ) : (
                     <NoNetworkStack />
@@ -61,28 +59,24 @@ const AppChildren = () => {
 };
 
 const App = () => {
-    const [, userLoading, userError] = useAuthState(auth);
-    const [fontsLoaded, fontsError] = useFonts({
-        Regular: require("./assets/fonts/Regular.ttf"),
-        Medium: require("./assets/fonts/Medium.ttf"),
-        Bold: require("./assets/fonts/Bold.ttf"),
-    });
+    const [user, userLoading, userError] = useAuthState(auth);
+
+    const onLayoutRootView = useCallback(async () => {
+        if (!userLoading) await SplashScreen.hideAsync();
+    }, [userLoading]);
+
+    if (userError) errorAlertShower(userError);
 
-    if (fontsError || userError) errorAlertShower(fontsError || userError);
+    if (userLoading) {
+        return null;
+    }
 
     return (
-        <GestureHandlerRootView style={{ flex: 1 }}>
-            {!fontsLoaded || userLoading ? (
-                <LoadingIndicator
-                    dimensions={{ width: 70, height: 70 }}
-                    containerStyle={{ flex: 1 }}
-                />
-            ) : (
-                <RecoilRoot>
-                    <RecoilNexus />
-                    <AppChildren />
-                </RecoilRoot>
-            )}
+        <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
+            <JotaiProvider>
+                <JotaiNexus />
+                <AppChildren user={user} />
+            </JotaiProvider>
         </GestureHandlerRootView>
     );
 };

app.config.js

@@ -4,34 +4,43 @@ require("dotenv").config();
 
 const PACKAGE_NAME = process.env.PACKAGE_NAME;
 const PROJECT_ID = process.env.PROJECT_ID;
-const VERSION = "v2.0.0";
-const THEME = "dark";
+const PROJECT_SLUG = process.env.PROJECT_SLUG;
+const PROJECT_OWNER = process.env.PROJECT_OWNER;
+const PROJECT_VERSION = process.env.PROJECT_VERSION;
+
+const splash = {
+    image: "./assets/images/splash.png",
+    resizeMode: "cover",
+    backgroundColor: "#ffffff",
+    dark: {
+        image: "./assets/images/splash.png",
+        resizeMode: "cover",
+        backgroundColor: "#413f44",
+    },
+};
 
 export default {
     name: "StreamlineX",
-    slug: "JAK-Mobile-App",
-    owner: "xxjonakadiptaxx",
-    version: VERSION,
+    slug: PROJECT_SLUG,
+    owner: PROJECT_OWNER,
+    version: PROJECT_VERSION,
     orientation: "portrait",
     icon: "./assets/images/icon.png",
     scheme: PACKAGE_NAME,
     userInterfaceStyle: "automatic",
-    splash: {
-        image: "./assets/images/splash.png",
-        resizeMode: "contain",
-        backgroundColor: THEME == "dark" ? "#413f44" : "#ffffff",
-    },
     privacy: "public",
     githubUrl: "https://github.com/Jonak-Adipta-Kalita/JAK-Mobile-App",
     assetBundlePatterns: ["**/*"],
     ios: {
+        splash,
         usesAppleSignIn: true,
         supportsTablet: true,
         bundleIdentifier: PACKAGE_NAME,
-        buildNumber: VERSION,
+        buildNumber: PROJECT_VERSION,
         googleServicesFile: "./google_services_ios.plist",
     },
     android: {
+        splash,
         permissions: [],
         adaptiveIcon: {
             foregroundImage: "./assets/images/adaptive-icon.png",
@@ -42,7 +51,7 @@ export default {
     },
     plugins: [
         [
-            "expo-barcode-scanner",
+            "expo-camera",
             {
                 cameraPermission: "Allow $(PRODUCT_NAME) to access camera.",
             },

firestore.rules

@@ -2,8 +2,7 @@ rules_version = '2';
 service cloud.firestore {
 	match /databases/{database}/documents {
 		match /users/{uid}/{document=**} {
-			allow read;
-			allow write: if request.auth.uid == uid;
+			allow read, write: if request.auth.uid == uid;
 		}
 	}
 }

package.json

@@ -7,29 +7,12 @@
     "scripts": {
         "start": "expo start",
         "dev": "expo start --dev-client",
-        "test": "jest --passWithNoTests",
-        "start:android": "expo start --android",
-        "start:ios": "expo start --ios",
+        "test": "echo No test specified && exit 0",
         "eject": "expo eject",
-        "lint": "eslint .",
-        "lint:fix": "eslint --fix .",
-        "prettier": "prettier **/*.{js,jsx,tsx,ts,md,json}",
-        "prettier:fix": "prettier --write **/*.{js,jsx,tsx,ts,md,json}",
         "format": "eslint --fix . && prettier --write **/*.{js,jsx,tsx,ts,md,json}",
-        "build": "eas build -p android && eas build -p ios",
-        "build:android": "eas build -p android",
-        "build:ios": "eas build -p ios",
-        "publish": "firebase deploy && eas update",
-        "publish:firebase": "firebase deploy",
-        "publish:expo": "eas build",
-        "check:version": "ncu",
-        "prepare": "husky install"
-    },
-    "jest": {
-        "preset": "jest-expo",
-        "transformIgnorePatterns": [
-            "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
-        ]
+        "prepare": "husky install",
+        "android": "expo run:android",
+        "ios": "expo run:ios"
     },
     "bugs": {
         "url": "https://github.com/Jonak-Adipta-Kalita/JAK-Mobile-App/issues"
@@ -38,69 +21,62 @@
     "dependencies": {
         "@dicebear/collection": "^6.0.4",
         "@dicebear/core": "^6.0.4",
-        "@react-native-async-storage/async-storage": "1.18.2",
-        "@react-native-masked-view/masked-view": "0.2.9",
+        "@react-native-async-storage/async-storage": "1.21.0",
+        "@react-native-masked-view/masked-view": "0.3.0",
         "@react-navigation/bottom-tabs": "^6.5.8",
         "@react-navigation/native": "^6.1.7",
         "@react-navigation/stack": "^6.3.17",
         "base-64": "^1.0.0",
-        "convert-units": "^2.3.4",
-        "expo": "^49.0.0",
-        "expo-asset": "~8.10.1",
-        "expo-barcode-scanner": "~12.5.3",
-        "expo-dev-client": "~2.4.11",
-        "expo-file-system": "~15.4.4",
-        "expo-font": "~11.4.0",
-        "expo-image": "~1.3.4",
-        "expo-media-library": "~15.4.1",
-        "expo-network": "~5.4.0",
-        "expo-status-bar": "~1.6.0",
-        "expo-updates": "~0.18.16",
-        "firebase": "^9.21.0",
+        "expo": "^50.0.17",
+        "expo-asset": "~9.0.2",
+        "expo-camera": "~14.1.3",
+        "expo-dev-client": "~3.3.11",
+        "expo-file-system": "~16.0.9",
+        "expo-image": "~1.10.6",
+        "expo-media-library": "~15.9.2",
+        "expo-network": "~5.8.0",
+        "expo-splash-screen": "~0.26.5",
+        "expo-status-bar": "~1.11.1",
+        "expo-system-ui": "~2.9.4",
+        "expo-updates": "~0.24.12",
+        "firebase": "^10.5.2",
+        "jotai": "^2.8.0",
+        "jotai-nexus": "^1.0.7",
         "nativewind": "^2.0.11",
         "react": "18.2.0",
         "react-firebase-hooks": "^5.1.1",
-        "react-native": "0.72.5",
+        "react-native": "0.73.6",
         "react-native-awesome-alerts": "^2.0.0",
         "react-native-barcode-mask": "^1.2.4",
         "react-native-dotenv": "^3.4.9",
-        "react-native-dropdown-picker": "5.4.7-beta.1",
-        "react-native-gesture-handler": "~2.12.0",
-        "react-native-pager-view": "6.2.0",
+        "react-native-gesture-handler": "~2.14.0",
+        "react-native-pager-view": "6.2.3",
         "react-native-qrcode-svg": "^6.2.0",
-        "react-native-reanimated": "~3.3.0",
-        "react-native-safe-area-context": "4.6.3",
-        "react-native-screens": "~3.22.0",
-        "react-native-svg": "13.9.0",
-        "react-native-tab-view": "^3.5.2",
-        "recoil": "^0.7.7",
-        "recoil-nexus": "^0.5.0"
+        "react-native-reanimated": "~3.6.2",
+        "react-native-safe-area-context": "4.8.2",
+        "react-native-screens": "~3.29.0",
+        "react-native-svg": "14.1.0",
+        "react-native-tab-view": "^3.5.2"
     },
     "devDependencies": {
         "@babel/core": "^7.20.0",
         "@types/base-64": "^1.0.0",
-        "@types/convert-units": "^2.3.6",
-        "@types/jest": "^29.5.4",
         "@types/react": "~18.2.14",
         "@types/react-native": "^0.72.2",
         "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^6.4.1",
         "@typescript-eslint/parser": "^6.4.1",
         "babel-plugin-module-resolver": "^5.0.0",
         "dotenv": "^16.3.1",
-        "eas-cli": "^5.1.0",
         "eslint": "^8.48.0",
         "eslint-plugin-bacon": "^0.0.3",
         "eslint-plugin-react": "^7.33.2",
-        "firebase-tools": "^12.5.2",
         "husky": "^8.0.3",
-        "jest": "^29.2.1",
-        "jest-expo": "^49.0.0",
-        "npm-check-updates": "^16.13.1",
         "prettier": "^3.0.2",
         "prettier-plugin-tailwindcss": "^0.5.3",
         "tailwindcss": "3.3.2",
         "typescript": "^5.1.3"
     },
-    "private": true
+    "private": true,
+    "version": "1.0.0"
 }

src/atoms/alertAtom.ts

@@ -1,10 +1,7 @@
 import { AlertData } from "@/@types/data";
-import { atom } from "recoil";
+import { atom } from "jotai";
 
 export const alertDataState = atom<AlertData>({
-    key: "alertDataState",
-    default: {
-        show: false,
-        data: null,
-    },
+    show: false,
+    data: null,
 });