forked from fr/deguapp
Working on login screen
This commit is contained in:
parent
77e5082680
commit
c2c3821ce2
@ -1,11 +1,12 @@
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
import { LoginForm } from "./screens/Login";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Open up App.js to start working on your app!</Text>
|
||||
<StatusBar style="auto" />
|
||||
<StatusBar style="light" />
|
||||
<LoginForm />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@ -13,8 +14,5 @@ export default function App() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
33
frontend/components/Button.js
Normal file
33
frontend/components/Button.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import { Text, StyleSheet, Pressable } from "react-native";
|
||||
|
||||
export default function Button(props) {
|
||||
const { onPress, title = "Save", color = "black" } = props;
|
||||
return (
|
||||
<Pressable
|
||||
style={[styles.button, { backgroundColor: color }]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 32,
|
||||
borderRadius: 4,
|
||||
elevation: 3,
|
||||
backgroundColor: "black",
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
lineHeight: 21,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 0.25,
|
||||
color: "white",
|
||||
},
|
||||
});
|
0
frontend/components/TextInput.js
Normal file
0
frontend/components/TextInput.js
Normal file
8
frontend/components/style.js
Normal file
8
frontend/components/style.js
Normal file
@ -0,0 +1,8 @@
|
||||
export const colors = {
|
||||
gold: "#FFD700ff",
|
||||
brown: "#8B4513ff",
|
||||
green: "#228B22ff",
|
||||
charcoal: "#2C3E50ff",
|
||||
black: "#020405ff",
|
||||
dark: "#010611",
|
||||
};
|
66
frontend/screens/Login.js
Normal file
66
frontend/screens/Login.js
Normal file
@ -0,0 +1,66 @@
|
||||
import {
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
TextInput,
|
||||
View,
|
||||
Text,
|
||||
} from "react-native";
|
||||
import Button from "../components/Button";
|
||||
import { colors } from "../components/style";
|
||||
|
||||
export function LoginForm() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.header}>Please Log In</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your email"
|
||||
autoCapitalize="none"
|
||||
autoCompleteType="email"
|
||||
textContentType="emailAddress"
|
||||
keyboardType="email-address"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
/>
|
||||
<View style={styles.btnContainer}>
|
||||
<Button style={styles.button} title="Sign Up" color={colors.charcoal} />
|
||||
<Button style={styles.button} title="Log In" color={colors.green} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: colors.dark,
|
||||
flex: 1,
|
||||
gap: 15,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
},
|
||||
header: {
|
||||
color: "#FFF",
|
||||
fontSize: 22,
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
button: {},
|
||||
btnContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue
Block a user