lineargradient add

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',
+  },
+});