lineargradient add

src/components/Background.js

@@ -0,0 +1,28 @@
+// src/components/Background.js
+
+import React from 'react';
+import { StyleSheet, SafeAreaView, StatusBar } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Background = ({ children, barcolor = 'light-content', gradientColors = ['#4c669f', '#3b5998', '#192f6a'] }) => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle={barcolor} backgroundColor="transparent" translucent />
+      <LinearGradient colors={gradientColors} style={styles.gradient}>
+        {children}
+      </LinearGradient>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  gradient: {
+    flex: 1,
+    paddingHorizontal: 16, // optional padding
+  },
+});
+
+export default Background;

src/components/CustomButton.js

@@ -3,7 +3,7 @@ import { View, Text, Pressable } from 'react-native';
 const CustomButton = ({title,style,textstyle,onPress}) => {
     return (
         <Pressable onPress={onPress}>
-            <View style={{ paddingHorizontal: 20, paddingVertical: 12, ...style }}>
+            <View style={{ marginHorizontal: 10, paddingVertical: 12, ...style }}>
                 <Text style={{ textAlign: 'center', ...textstyle }}>{title}</Text>
             </View>
         </Pressable>

src/components/CustomTextInput.js

@@ -0,0 +1,86 @@
+import {View,Text,TextInput,StyleSheet,} from 'react-native';
+import React, {useState} from 'react';
+import {GlobalTheme} from '../theme';
+
+const CustomTextInput = ({
+  label,
+  value,
+  onChangeText,
+  keyboardType,
+  secureTextEntry,
+  right,
+  textstyle,
+  viewstyle,
+  maxLength
+}) => {
+  const [isFocused, setFocused] = useState(false);
+  const [hidepassword, setHidePassword] = useState(false);
+
+  const handleFocus = () => {
+    setFocused(true);
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+  };
+
+  const inputStyle = {
+    borderColor: isFocused ? '#2680EB' : 'transparent',
+    borderWidth: 2,
+    backgroundColor: isFocused ? '#FFF' : '#F1F1F1',
+    borderRadius: GlobalTheme.borderRadius.md,
+  };
+
+  return (
+    <View style={styles.inputContainer}>
+      <Text
+        style={{
+          color: GlobalTheme.colors.black,
+          fontSize: GlobalTheme.typography.fontSize.medium,
+          fontWeight: GlobalTheme.typography.fontWeight.medium,
+          marginTop: 10,
+          marginHorizontal: 10,
+          ...textstyle,
+        }}>
+        {label}
+      </Text>
+      <View
+        style={{
+          borderRadius: GlobalTheme.borderRadius.lgg,
+          borderWidth: 6,
+          borderColor: isFocused ? '#DFECFF' : 'transparent',
+          marginTop: 8,
+          ...viewstyle,
+        }}>
+        <TextInput
+          maxLength={maxLength}
+          style={[styles.input, inputStyle]}
+          value={value}
+          onChangeText={onChangeText}
+          keyboardType={keyboardType}
+          autoCapitalize="none"
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={`Enter your ${label.toLowerCase()}`}
+          placeholderTextColor={'#555555'}
+        />
+
+      </View>
+    </View>
+  );
+};
+
+export default CustomTextInput;
+
+const styles = StyleSheet.create({
+  input: {
+    height: 50,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 4,
+    color: GlobalTheme.colors.black,
+  },
+  inputContainer: {
+    marginBottom: 16,
+  },
+});

src/screens/AuthScreen/Login/index.js

@@ -1,12 +1,51 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import React, { useState } from 'react';
+import { View, Text, Image, Alert } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import IMAGES from '../../../constants/Images';
+import { styles } from './style';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useDispatch } from 'react-redux';
+import CustomTextInput from '../../../components/CustomTextInput';
+import CustomButton from '../../../components/CustomButton';
+import { GlobalTheme } from '../../../theme';
+import Background from '../../../components/Background';
 
-const Login = () => {
-    return (
-        <View>
-            <Text>Login</Text>
+const Login = ({ navigation }) => {
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  const [username, setUsername] = useState('');
+
+  return (
+    <Background
+      barcolor="light-content"
+      gradientColors={['#1a1a1a', '#333333', '#4d4d4d']} // optional custom colors
+    >
+      <KeyboardAwareScrollView style={styles.container}>
+        <View style={styles.logoContainer}>
+          <Image style={styles.appLogo} source={IMAGES.AppLogo} />
         </View>
-    )
-}
 
-export default Login
+        <View style={styles.titleContainer}>
+          <Text style={styles.titleText}>Log In</Text>
+        </View>
+
+        <View style={{ marginTop: 50 }}>
+          <CustomTextInput
+            viewstyle={{ marginHorizontal: 0 }}
+            label="Username"
+            value={username}
+            onChangeText={setUsername}
+          />
+        </View>
+
+        <View style={{ marginTop: 100 }}>
+          <CustomButton title={'Login'} style={{ backgroundColor: GlobalTheme.colors.secondary, borderRadius: GlobalTheme.borderRadius.md }} textstyle={{ color: GlobalTheme.colors.white, fontSize: GlobalTheme.typography.fontSize.medium }} />
+        </View>
+
+      </KeyboardAwareScrollView>
+    </Background>
+  );
+};
+
+export default Login;

src/screens/AuthScreen/Login/style.js

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+
+import { GlobalTheme , Screen } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  container: {
+    // flex: 1,
+    backgroundColor: GlobalTheme.colors.white,
+    paddingHorizontal: 10,
+  },
+  logoContainer: {
+    alignItems: 'center',
+    paddingTop: 40,
+  },
+  appLogo: {
+    height :200 ,
+    width :200,
+    resizeMode: 'contain',
+  },
+  appMaskLogo: {
+    resizeMode: 'stretch',
+    width: Screen.screenHeight * 0.9,
+    height: Screen.screenHeight * 0.33,
+  },
+  titleContainer: {
+    alignSelf: 'center',
+    // marginTop: 15,
+  },
+  titleText: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: GlobalTheme.colors.black,
+  },
+  subtitleText: {
+    fontSize: 15,
+    color: '#1F2128',
+    marginBottom: 14,
+    fontWeight: '600',
+    alignSelf: 'center',
+    width: '80%',
+    textAlign: 'center',
+  },
+  subtitleHighlight: {
+    color: '#2381E9',
+  },
+});

src/theme/index.js

@@ -1,3 +1,4 @@
 import GlobalTheme from './theme';
+import { shadow , Screen } from './theme';
 
-export {GlobalTheme, metrics};
+export {GlobalTheme, Screen , shadow};

src/theme/theme.js

@@ -1,8 +1,19 @@
+import { Dimensions, Platform } from 'react-native';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+export const Screen = {
+  screenWidth,
+  screenHeight,
+  isAndroid: Platform.OS === 'android',
+  isIOS: Platform.OS === 'ios',
+};
+
 const GlobalTheme = {
   colors: {
     // Primary Colors
     primary: '#113F8C', // Main color for buttons, headers
-    secondary: '#4472BE', 
+    secondary: '#2357C6', 
     text: '#333333', // Text color for most content
     lightblue:'#EAF1FF',
     lightblueborder:'#C6DBFF24',