fixed login screen for different phone sizes

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

@@ -42,7 +42,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"
@@ -56,7 +56,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,72 +1,92 @@
 import React, { useEffect } from "react";
-import { StyledProvider } from "@gluestack-style/react"
-import { config } from "@gluestack-ui/config";
-import { GluestackUIProvider, Text, Box, View } from "@gluestack-ui/themed";
-import { ButtonText } from "@gluestack-ui/themed";
-import { Images } from "../Components/Images";
-import { StyledButton } from "../Components/Buttons";
-import { StyledText } from "../Components/Text";
+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');
-        }
-    }, [token, navigation]); */
+const { width, height } = Dimensions.get("window");
+
+const Login: React.FC<LoginProps> = ({ navigation }) => {
+  const token = useAppSelector((state: RootState) => state.token);
+
+  useEffect(() => {
+    if (token) {
+      console.log("using token");
+      navigation.navigate("Main");
+    }
+  }, [token, navigation]);
 
-    return (
-        <StyledProvider config={config}>
-
-            <Box width="100%" height="100%" justifyContent="space-between" alignItems="center" paddingVertical={100} flex={1}>
-                <Images
-                    variant="loginLogo" 
-                    source={{uri: "https://i.pinimg.com/originals/2e/60/07/2e60079f1e36b5c7681f0996a79e8af4.jpg"}}
-                    alt="RP Logo"
-                />
-                <StyledText variant='bigText' >Welcome to</StyledText>
-                <StyledText variant='bigbold' marginTop={-30}>R|P 2024!</StyledText>
-                <StyledText variant='basic' marginTop={100} marginBottom={-10}>Powered by SPONSOR!!!</StyledText>
-                <StyledButton
-                    styleVariant="login"
-                    action="primary"
-                    isDisabled={false}
-                    isFocusVisible={false}
-                    onPress={() => {
-                        console.log("logged in!");
-                        //navigation.navigate('Main');
-                        //console.log({token});
-                        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");
-                            });
-                    }}
-                >
-                    <ButtonText color={"$black"}>LOGIN</ButtonText>
-                </StyledButton>
-            </Box>
-        </StyledProvider>    
+  const handleLoginPress = () => {
+    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");
+      });
+  };
+
+  return (
+    <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({
+  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;