Merge branch 'main' into dev/Bahl-Aryan/staff_scan_page

declarations.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+    import React from "react";
+    import { SvgProps } from "react-native-svg";
+    const content: React.FC<SvgProps>;
+    export default content;
+  }

images.d.ts

@@ -0,0 +1,20 @@
+// images.d.ts
+declare module "*.png" {
+  const value: number;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: number;
+  export default value;
+}
+
+declare module "*.jpeg" {
+  const value: number;
+  export default value;
+}
+
+declare module "*.gif" {
+  const value: number;
+  export default value;
+}

metro.config.js

@@ -0,0 +1,19 @@
+const { getDefaultConfig } = require("expo/metro-config");
+
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
+
+  const { transformer, resolver } = config;
+
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve("react-native-svg-transformer"),
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
+    sourceExts: [...resolver.sourceExts, "svg"],
+  };
+
+  return config;
+})();

package.json

@@ -46,7 +46,7 @@
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "^15.3.0",
     "react-native-tab-view": "^3.5.2",
     "react-navigation": "^5.0.0",
     "react-redux": "^9.1.2"
@@ -60,7 +60,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6"
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "react-native-svg-transformer": "^1.4.0"
   },
   "private": true,
   "packageManager": "[email protected]"

screens/Login.tsx

@@ -1,77 +1,96 @@
-import React from "react";
-import { ImageBackground, StyleSheet, TouchableOpacity } from "react-native";
-import { StyledProvider } from "@gluestack-style/react";
-
-import { config } from "@gluestack-ui/config";
-import { Box, View } from "@gluestack-ui/themed";
-import { Images } from "../Components/Images";
-import { StyledButton } from "../Components/Buttons";
-import { StyledText } from "../Components/Text";
+import React, { useEffect } from "react";
+import {
+  Dimensions,
+  SafeAreaView,
+  StyleSheet,
+  View,
+  TouchableOpacity,
+} from "react-native";
 import * as Linking from "expo-linking";
-import * as WebBrowser from "expo-web-browser"
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import * as WebBrowser from "expo-web-browser";
+import { NavigationProp, ParamListBase } from "@react-navigation/native";
+import { useAppSelector } from "../redux/hooks";
 import { RootState } from "../redux/store";
+import Colors from "../constants/Colors";
+
+import ScreenImage from "../assets/LoginScreen.svg";
 
 const authUrl = "https://api.reflectionsprojections.org/auth/login/mobile/";
 const redirectURL = "reflectionsprojections://Main";
+
 interface LoginProps {
-    navigation: NavigationProp<ParamListBase>;
+  navigation: NavigationProp<ParamListBase>;
 }
-const Login: React.FC<LoginProps> = ({navigation}) => {
-    /* const token = useAppSelector((state: RootState) => state.token);
 
-    useEffect(() => {
-        if (token) {
-            console.log("using token");
-            navigation.navigate('Main');
+const { width, height } = Dimensions.get("window");
+
+const Login: React.FC<LoginProps> = ({ navigation }) => {
+  const token = useAppSelector((state: RootState) => state.token);
+
+  useEffect(() => {
+    if (token) {
+      navigation.navigate("Main");
+    }
+  }, [token, navigation]);
+
+  const handleLoginPress = () => {
+    WebBrowser.openAuthSessionAsync(
+      `${authUrl}?redirect_uri=${redirectURL}`,
+      redirectURL
+    )
+      .then((result) => {
+        if (result.type === "success") {
+          Linking.openURL(result.url);
         }
-    }, [token, navigation]); */
+      })
+      .catch((err) => {
+        console.error("Failed to open URL:", err.message);
+        alert("Failed to open URL");
+      });
+  };
 
   return (
-    <StyledProvider config={config}>
-      <Box width="100%" height="100%">
-        <ImageBackground
-          source={require("../assets/Login Screen.png")}
-          style={{ flex: 1, justifyContent: "flex-end", alignItems: "center" }}
-          resizeMode="cover"
-        >
-          <TouchableOpacity
-            style={styles.redBox}
-            isDisabled={false}
-            isFocusVisible={false} 
-            onPress={() => {
-              console.log("logged in!");
-              WebBrowser.openAuthSessionAsync(`${authUrl}?redirect_uri=${redirectURL}`, redirectURL)
-                            .then(result => {
-                                if (result.type === 'success') {
-                                    console.log(result.url);
-                                    console.log("handling redirection globally...");
-                                    Linking.openURL(result.url);
-                                }
-                            })
-                            .catch(err => {
-                                console.error("Failed to open URL:", err.message);
-                                alert("Failed to open URL");
-                            });
-            }}
-          >
-            {/* Content inside the red box */}
-          </TouchableOpacity>
-        </ImageBackground>
-      </Box>
-    </StyledProvider>
+    <SafeAreaView style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ScreenImage
+          width={width}
+          height={height}
+          style={styles.image}
+          preserveAspectRatio="none"
+        />
+        <TouchableOpacity
+          style={styles.button}
+          onPress={handleLoginPress}
+        ></TouchableOpacity>
+      </View>
+    </SafeAreaView>
   );
-}
+};
 
 const styles = StyleSheet.create({
-  redBox: {
-    width: "40%", // Adjust width as a percentage of the parent container
-    height: 65, // Adjust height as needed
-    borderRadius: 8, // Optional: Adjust border radius for rounded corners
-    marginBottom: 75, // Adjust margin from bottom as a percentage
-    marginLeft: 40,
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: Colors.DARK_BLUE,
+  },
+  imageContainer: {
+    width: "100%",
+    height: "100%",
+  },
+  image: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover",
+  },
+  button: {
+    position: "absolute",
+    width: "40%",
+    height: 100,
+    bottom: 0,
+    right: 90,
   },
 });
 
-export default Login;
+export default Login;