login screen done
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 7.5 KiB |
@@ -4,11 +4,11 @@ import React from 'react';
|
|||||||
import { StyleSheet, SafeAreaView, StatusBar } from 'react-native';
|
import { StyleSheet, SafeAreaView, StatusBar } from 'react-native';
|
||||||
import LinearGradient from 'react-native-linear-gradient';
|
import LinearGradient from 'react-native-linear-gradient';
|
||||||
|
|
||||||
const Background = ({ children, barcolor = 'light-content', gradientColors = ['#4c669f', '#3b5998', '#192f6a'] }) => {
|
const Background = ({ children, barcolor = 'light-content'}) => {
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={styles.container}>
|
<SafeAreaView style={styles.container}>
|
||||||
<StatusBar barStyle={barcolor} backgroundColor="transparent" translucent />
|
<StatusBar barStyle={barcolor} backgroundColor="transparent" translucent />
|
||||||
<LinearGradient colors={gradientColors} style={styles.gradient}>
|
<LinearGradient colors={['#E3EBF8', '#ffffff']} start={{ x: 0.5, y: 0 }} end={{ x: 0.5, y: 1 }} style={styles.gradient}>
|
||||||
{children}
|
{children}
|
||||||
</LinearGradient>
|
</LinearGradient>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
@@ -21,7 +21,6 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
gradient: {
|
gradient: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
paddingHorizontal: 16, // optional padding
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -25,9 +25,9 @@ const CustomTextInput = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const inputStyle = {
|
const inputStyle = {
|
||||||
borderColor: isFocused ? '#2680EB' : 'transparent',
|
borderColor: isFocused ? '#2680EB' : '#DFDFDF',
|
||||||
borderWidth: 2,
|
borderWidth: isFocused ? 2 : 1,
|
||||||
backgroundColor: isFocused ? '#FFF' : '#F1F1F1',
|
backgroundColor: isFocused ? '#FFF' : '#Fff',
|
||||||
borderRadius: GlobalTheme.borderRadius.md,
|
borderRadius: GlobalTheme.borderRadius.md,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -17,11 +17,8 @@ const Login = ({ navigation }) => {
|
|||||||
const [username, setUsername] = useState('');
|
const [username, setUsername] = useState('');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Background
|
<Background barcolor="light-content">
|
||||||
barcolor="light-content"
|
<KeyboardAwareScrollView style={styles.container} contentContainerStyle={{justifyContent:'center', flex:1}}>
|
||||||
gradientColors={['#1a1a1a', '#333333', '#4d4d4d']} // optional custom colors
|
|
||||||
>
|
|
||||||
<KeyboardAwareScrollView style={styles.container}>
|
|
||||||
<View style={styles.logoContainer}>
|
<View style={styles.logoContainer}>
|
||||||
<Image style={styles.appLogo} source={IMAGES.AppLogo} />
|
<Image style={styles.appLogo} source={IMAGES.AppLogo} />
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -4,13 +4,13 @@ import { GlobalTheme , Screen } from '../../../theme';
|
|||||||
|
|
||||||
export const styles = StyleSheet.create({
|
export const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
// flex: 1,
|
flex: 1,
|
||||||
backgroundColor: GlobalTheme.colors.white,
|
// backgroundColor: GlobalTheme.colors.white,
|
||||||
paddingHorizontal: 10,
|
paddingHorizontal: 10,
|
||||||
|
// justifyContent:'center'
|
||||||
},
|
},
|
||||||
logoContainer: {
|
logoContainer: {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
paddingTop: 40,
|
|
||||||
},
|
},
|
||||||
appLogo: {
|
appLogo: {
|
||||||
height :200 ,
|
height :200 ,
|
||||||
|
|||||||
Reference in New Issue
Block a user