Good Day
I hope this post finds everyone safe and well. I contact this forum because my team, college students at NC A&T State University are trying to build an app, just for project purposes, not commercial. We need to know the code syntax for inputting and retrieving from a Firebase a user’s email and password via Auth Navigation that uses both a Welcome, Login, and Registration screens. Any help would be appreciated.
import React from 'react';
import { StyleSheet, Image } from 'react-native';
import * as Yup from 'yup';
import Screen from '../components/Screen';
import { Form, FormField, SubmitButton } from '../components/forms';
function LoginScreen(props) {
const validationSchema = Yup.object().shape({
email: Yup.string().required().email().label("Email"),
password: Yup.string().required().min(4).label("Password"),
});
return (
<Screen style={styles.container}>
<Image
style={styles.logo}
source={require("../assets/ao_logo_blue.png")} />
<Form
initialValues={{ email: '', password: '' }}
onSubmit={(values) => console.log(values)}
validationSchema={validationSchema}
>
<FormField
autoCapitalize="none"
autoCorrect={false}
icon="email"
keyboardType="email-address"
name="email"
placeholder="Email"
textContentType="emailAddress"
/>
<FormField
autoCapitalize="none"
autoCorrect={false}
icon="lock"
name="password"
placeholder="Password"
secureTextEntry
textContentType="password"
/>
<SubmitButton title="Login" />
</Form>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
width: "100%",
},
logo: {
width: 100,
height: 100,
alignSelf: 'center',
marginTop: 50,
marginBottom: 50,
borderRadius: 10,
},
});
export default LoginScreen;
import React from "react";
import { StyleSheet, Image } from "react-native";
import * as Yup from "yup";
import Screen from "../components/Screen";
import {
Form,
FormField,
SubmitButton,
} from "../components/forms";
const validationSchema = Yup.object().shape({
name: Yup.string().required().label("Name"),
email: Yup.string().required().email().label("Email"),
password: Yup.string().required().min(4).label("Password"),
});
function RegisterScreen() {
return (
<Screen style={styles.container}>
<Image
style={styles.logo}
source={require("../assets/ao_logo_blue.png")} />
<Form
initialValues={{ name: "", email: "", password: "" }}
onSubmit={(values) => console.log(values)}
validationSchema={validationSchema}
>
<FormField
autoCorrect={false}
icon="account"
name="name"
placeholder="Name"
/>
<FormField
autoCapitalize="none"
autoCorrect={false}
icon="email"
keyboardType="email-address"
name="email"
placeholder="Email"
textContentType="emailAddress"
/>
<FormField
autoCapitalize="none"
autoCorrect={false}
icon="lock"
name="password"
placeholder="Password"
secureTextEntry
textContentType="password"
/>
<SubmitButton title="Register" />
</Form>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
width: "100%",
},
logo: {
width: 100,
height: 100,
alignSelf: 'center',
marginTop: 50,
marginBottom: 50,
borderRadius: 10,
},
});
export default RegisterScreen;
import React from "react";
import { ImageBackground, StyleSheet, View, Image, Text } from "react-native";
import Button from "../components/Button";
function WelcomeScreen({ navigation }) {
return (
<ImageBackground
blurRadius={7}
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.logoContainer}>
<Image style={styles.logo} source={require("../assets/ao_logo_blue.png")} />
<Text style={styles.tagline}>
One Aggies junk is another Aggies treasure
</Text>
</View>
<View style={styles.buttonsContainer}>
<Button title="Login" onPress={() => navigation.navigate("Login")} />
<Button title="Register" color="secondary" onPress={() => navigation.navigate("Register")} />
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
},
buttonsContainer: {
padding: 20,
width: "100%",
},
logo: {
width: 120,
height: 120,
borderRadius: 10,
},
logoContainer: {
position: "absolute",
top: 70,
alignItems: "center",
},
tagline: {
fontSize: 16,
fontWeight: "600",
paddingVertical: 10,
},
});
export default WelcomeScreen;
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./app/navigation/AppNavigator";
import navigationTheme from "./app/navigation/navigationTheme";
import AuthNavigator from "./app/navigation/AuthNavigator";
import ListingEditScreen from "./app/screens/ListingEditScreen";
import ListingDetailsScreen from "./app/screens/ListingDetailsScreen";
export default function App() {
return (
<NavigationContainer theme={navigationTheme}>
<AuthNavigator />
</NavigationContainer>
);
}
Thanks
Adonis, Michaela, Kenshay, and Scott
CST 499 Team 3