lineargradient add

package.json

@@ -21,6 +21,8 @@
     "react-native": "0.80.0",
     "react-native-chart-kit": "^6.12.0",
     "react-native-element-dropdown": "^2.12.4",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-otp-textinput": "^1.1.7",
     "react-native-safe-area-context": "^5.5.0",
     "react-native-screens": "^4.11.1",

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',

yarn.lock

@@ -5590,7 +5590,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5707,11 +5707,29 @@ react-native-element-dropdown@^2.12.4:
   dependencies:
     lodash "^4.17.21"
 
+react-native-iphone-x-helper@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
+
 react-native-is-edge-to-edge@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.1.7.tgz#28947688f9fafd584e73a4f935ea9603bd9b1939"
   integrity sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w==
 
+react-native-keyboard-aware-scroll-view@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz#e2e9665d320c188e6b1f22f151b94eb358bf9b71"
+  integrity sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-iphone-x-helper "^1.0.3"
+
+react-native-linear-gradient@^2.8.3:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz#9a116649f86d74747304ee13db325e20b21e564f"
+  integrity sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==
+
 react-native-otp-textinput@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/react-native-otp-textinput/-/react-native-otp-textinput-1.1.7.tgz#c7c3611c35701996777d117a1990c58ca94796da"