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 { StatusBar } from "expo-status-bar";
|
||||||
import { StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from "react-native";
|
||||||
|
import { LoginForm } from "./screens/Login";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text>Open up App.js to start working on your app!</Text>
|
<StatusBar style="light" />
|
||||||
<StatusBar style="auto" />
|
<LoginForm />
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -13,8 +14,5 @@ export default function App() {
|
|||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
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