Skip to content

Instantly share code, notes, and snippets.

@aloukissas aloukissas/Login.js
Created Jan 14, 2019

Embed
What would you like to do?
import React from "react";
import {
View,
Text,
StyleSheet,
Button,
TextInput,
TouchableOpacity,
Alert
} from "react-native";
import { Auth } from "aws-amplify";
class Login extends React.Component {
state = {
email: "",
password: ""
};
handleSubmit = async () => {
try {
await Auth.signIn(this.state.email, this.state.password);
this.props.auth.setAuthenticated(true);
} catch (error) {
Alert.alert("Error logging in", error, { text: "OK" });
}
};
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email"
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
textContentType="username"
onChangeText={email => this.setState({ email })}
value={this.state.email}
/>
<TextInput
style={styles.input}
placeholder="Password"
autoCapitalize="none"
autoCorrect={false}
textContentType="password"
secureTextEntry
onChangeText={password => this.setState({ password })}
value={this.state.password}
/>
<View style={styles.buttonContainer}>
<Button title="Login" color="#fff" onPress={this.handleSubmit} />
</View>
<View style={styles.loginContainer}>
<Text style={{ fontSize: 16 }}>No account? </Text>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate("Signup");
}}
>
<Text
style={{ color: "orangered", fontWeight: "bold", fontSize: 16 }}
>
Sign up
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
input: {
height: 60,
width: 300,
borderColor: "#cacaca",
borderWidth: 1,
padding: 16,
fontSize: 18,
marginBottom: 16
},
buttonContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 48,
width: 300,
backgroundColor: "dodgerblue"
},
loginContainer: {
display: "flex",
flexDirection: "row",
width: 300,
marginTop: 16,
justifyContent: "center",
alignItems: "center"
}
});
export default Login;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.