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
|
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @format
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Image,
TextInput,
Button,
Alert,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import LinearGradient from 'react-native-linear-gradient';
declare const global: {HermesInternal: null | {}};
const App = () => {
return (
<>
<View style={styles.container}>
<LinearGradient colors={['#8F00FF', '#6EE7E7']} style={styles.linearGradient} useAngle={true} angle={154.72} angleCenter={{x:0.5,y:0.5}}>
<Image
source={require('./src/assets/sign_in_logo.png')}
style={styles.logo}
/>
<TextInput
style={styles.credentials}
placeholder="Username"
placeholderTextColor='#FFFFFF'
/>
<TextInput
style={styles.credentials}
placeholder="Password"
placeholderTextColor='#FFFFFF'
/>
<View style={styles.forgotPassword}>
<Button
onPress={() => Alert.alert("Tagg! You're it!")}
title="Forgot password"
color='#FFFFFF'
accessibilityLabel="Forgot password button"
/>
</View>
<View style={styles.startButton}>
<Button
onPress={() => Alert.alert("My favorite Girl Scout Cookies are Taggalongs!")}
title="Let's Start!"
color='#FFFFFF'
accessibilityLabel="Let's start button"
/>
</View>
</LinearGradient>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'transparent'
},
linearGradient: {
flex: 1,
alignItems: 'center',
},
logo: {
top: 165,
},
credentials: {
top: 215,
borderColor: '#FFFDFD',
borderWidth: 2,
borderRadius: 20,
width: 248,
height: 40,
padding: 13,
marginVertical: 15,
fontSize: 15
},
forgotPassword: {
top: 200,
left: -50
},
startButton: {
top: 220
}
});
export default App;
|
