SHARE
TWEET

MyTodosSignupScreen

a guest Oct 23rd, 2019 110 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component, Fragment} from 'react';
  2. import {View, Text, TextInput, Image, ImageBackground, TouchableOpacity, ScrollView, StyleSheet, Dimensions, Alert} from 'react-native';
  3. import { firebase } from '@react-native-firebase/auth';
  4.  
  5. import ImageSrc from '../../assets/images/bg-auth.jpg';
  6. import ClipboardIcon from '../../assets/icon/clipboards.png';
  7. import UserIcon from '../../assets/icon/email.png';
  8. import PasswordIcon from '../../assets/icon/password.png';
  9.  
  10. const ScreenHeight = Dimensions.get("window").height;
  11.  
  12. export default class Signup extends Component{
  13.  constructor(props) {
  14.     super(props);
  15.     this.state = {
  16.         email: '',
  17.         password: ''
  18.     };
  19.  }
  20.  
  21.  handleChangeInput = field => text => {
  22.     this.setState({ [field]: text });
  23.  }
  24.  
  25.  handleOnSubmit = async () => {
  26.   const { email, password } = this.state;
  27.   if(email != '' && password != ''){
  28.     await firebase.auth().createUserWithEmailAndPassword(email, password)
  29.     .then(() => {
  30.       this.props.navigation.navigate('Home');
  31.     }).catch(error => {
  32.       Alert.alert('Error', error.code);
  33.     })
  34.   } else {
  35.     Alert.alert("Error", "Email dan Password Harus isi");
  36.   }
  37.   };
  38.  
  39.  render(){
  40.   return(
  41.    <Fragment>
  42.         <ImageBackground
  43.         source={ImageSrc}
  44.         style={[styles.background, {height: ScreenHeight}]}
  45.         imageStyle={{opacity: 0.4}}>
  46.             <View style={styles.mainContainer}>
  47.                 <Image source={ClipboardIcon} style={styles.authImage}/>
  48.  
  49.                 <View style={styles.formControl}>
  50.                     <Image source={UserIcon} style={styles.inputFieldImage}/>
  51.                     <TextInput
  52.                         placeholder="Email"
  53.                         placeholderTextColor="#FFFFFF"
  54.                         underlineColorAndroid="transparent"
  55.                         style={{color: '#FFFFFF', width: '100%'}}
  56.                         onChangeText={this.handleChangeInput('email')}
  57.                     />
  58.                 </View>
  59.  
  60.                 <View style={styles.formControl}>
  61.                     <Image source={PasswordIcon} style={styles.inputFieldImage}/>
  62.                     <TextInput
  63.                         placeholder="Password"
  64.                         placeholderTextColor="#FFFFFF"
  65.                         underlineColorAndroid="transparent"
  66.                         style={{color: '#FFFFFF', width: '100%'}}
  67.                         secureTextEntry={true}
  68.                         onChangeText={this.handleChangeInput('password')}
  69.                     />
  70.                 </View>
  71.  
  72.                 <View style={{marginBottom: 20, marginTop: 20}}>
  73.                     <TouchableOpacity
  74.                     style={styles.submitBtn}
  75.                     onPress={this.handleOnSubmit}>
  76.                         <Text style={{color: '#FFFFFF', alignSelf: 'center'}}>Sign Up</Text>
  77.                     </TouchableOpacity>
  78.                 </View>
  79.  
  80.                 <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
  81.                     <Text style={{color: '#bebebe'}}>Already have account? </Text>
  82.                     <TouchableOpacity onPress={() => {
  83.                         this.props.navigation.navigate('Login')
  84.                     }}>
  85.                         <Text style={{color: '#FFFFFF'}}>Sign In</Text>
  86.                     </TouchableOpacity>
  87.                 </View>
  88.             </View>
  89.         </ImageBackground>
  90.    </Fragment>
  91.   );
  92.  }
  93. }
  94.  
  95. const styles = StyleSheet.create({
  96.     background: {
  97.         flex: 1,
  98.         resizeMode: 'cover',
  99.         alignItems: 'center',
  100.         position: 'relative',
  101.         backgroundColor: 'rgb(162,146,199)'
  102.     },
  103.     mainContainer: {
  104.         height: '100%',
  105.         width: '100%',
  106.         flexDirection: 'column',
  107.         paddingTop: 60,
  108.         paddingHorizontal: 30
  109.     },
  110.     authImage: {
  111.         marginBottom: 50,
  112.         alignSelf: 'center'
  113.     },
  114.     inputFieldImage: {
  115.         width: 20,
  116.         height: 20,
  117.         marginRight: 10
  118.     },
  119.     formControl: {
  120.         flexDirection: 'row',
  121.         alignItems: 'center',
  122.         borderColor: '#FFFFFF',
  123.         borderTopWidth: 0,
  124.         borderRightWidth: 0,
  125.         borderLeftWidth: 0,
  126.         borderBottomWidth: 0.9,
  127.         marginBottom: 20
  128.     },
  129.     submitBtn: {
  130.         backgroundColor: '#F73668',
  131.         paddingHorizontal: 20,
  132.         paddingVertical: 14,
  133.         borderRadius: 40
  134.     },
  135.     textStyle: {
  136.         color: '#ffffff'
  137.     }
  138. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top