-
Notifications
You must be signed in to change notification settings - Fork 41
/
LoginScreen.js
120 lines (111 loc) · 3.12 KB
/
LoginScreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { useState } from "react";
import PropTypes from "prop-types";
import {
Text,
View,
SafeAreaView,
ImageBackground,
TouchableOpacity,
KeyboardAvoidingView,
} from "react-native";
import Spinner from "react-native-spinkit";
/**
* ? Local Imports
*/
import Logo from "./components/Logo/Logo";
import styles, { container } from "./LoginScreen.style";
import BottomContainer from "./components/BottomContainer/BottomContainer";
const defaultBackground =
"https://images.unsplash.com/photo-1543637005-4d639a4e16de?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1481&q=80";
const LoginScreen = (props) => {
const {
source,
loginText,
signupText,
spinnerType,
spinnerSize,
spinnerColor,
onPressLogin,
spinnerStyle,
spinnerEnable,
onPressSignup,
spinnerVisibility,
loginButtonTextStyle,
loginButtonBackgroundColor,
} = props;
const [cardState, setCardState] = useState(true);
renderSpinner = () => (
<View style={styles.spinnerStyle}>
<Spinner
size={spinnerSize}
type={spinnerType}
style={spinnerStyle}
color={spinnerColor}
isVisible={spinnerVisibility}
/>
</View>
);
renderLoginButton = () => (
<TouchableOpacity style={styles.loginButtonStyle} onPress={onPressLogin}>
<Text style={loginButtonTextStyle}>
{cardState ? loginText : signupText.toUpperCase()}
</Text>
</TouchableOpacity>
);
return (
<KeyboardAvoidingView
behavior="position"
style={container(loginButtonBackgroundColor)}
>
<View style={container(loginButtonBackgroundColor)}>
<ImageBackground
source={source}
borderRadius={24}
resizeMode="cover"
style={styles.imagebackgroundStyle}
>
<View style={styles.blackoverlay}>
<SafeAreaView style={styles.safeAreaViewStyle}>
<View style={styles.loginContainer}>
<Logo {...props} />
</View>
<BottomContainer
cardState={cardState}
onPressSignup={() => {
setCardState(!cardState);
onPressSignup && onPressSignup();
}}
{...props}
/>
</SafeAreaView>
</View>
</ImageBackground>
{spinnerEnable && spinnerVisibility
? renderSpinner()
: renderLoginButton()}
</View>
</KeyboardAvoidingView>
);
};
LoginScreen.propTypes = {
loginText: PropTypes.string,
spinnerEnable: PropTypes.bool,
spinnerType: PropTypes.string,
spinnerSize: PropTypes.number,
spinnerColor: PropTypes.string,
spinnerVisibility: PropTypes.bool,
loginButtonBackgroundColor: PropTypes.string,
};
LoginScreen.defaultProps = {
spinnerSize: 30,
loginText: "LOGIN",
spinnerEnable: false,
spinnerColor: "#fdfdfd",
signupText: "Sign Me Up",
spinnerVisibility: false,
spinnerType: "ThreeBounce",
source: { uri: defaultBackground },
loginButtonBackgroundColor: "#282828",
loginButtonTextStyle: styles.loginButtonTextStyle,
};
export default LoginScreen;