React Native Developer

Tuesday, December 29, 2020

lOGIN.JS FILE REACT NATIVE

Mr.Paresh Chavda import React, { Component } from 'react'; import { Text, View, Image, Dimensions, StyleSheet, ActivityIndicator, StatusBar, ImageBackground } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; import 'react-native-gesture-handler'; import HelperConstant from '../../Helper/HelperConstant'; import { TouchableOpacity, TextInput, ScrollView } from 'react-native-gesture-handler'; const { width, height } = Dimensions.get('window'); const { WhiteColor, BlackColor, midGrayColor, darkOrange, lightGrayColor, FontFamilyBold, FontFamilyMid, FontFamilyReg, titleFont, headerfont, semiFont, midFont, subFont, subtitleFont, // images Soup2Image } = HelperConstant export default class Login extends Component { constructor(props) { super(props) this.state = { title: 'Please Enter Your Password', hidePassword: true, Useremail: 'paresh@gmail.com', Userpassword: '123456', spinner: false, } } UserLoginFunction = () => { const { Useremail } = this.state; const { Userpassword } = this.state; fetch('http://hostelcreativity.000webhostapp.com/Api/login.php', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ email: Useremail, password: Userpassword }) }) .then((response) => response.json()) .then((response) => { alert(response); if (response.res === 1) { console.log(response); this.setState( { spinner: false, }, () => { this.props.navigation.navigate('Home'); }, ); } else { alert(response) console.log(response); } }).catch((error) => { console.error(error); }); } managePasswordVisibility = () => { this.setState({ hidePassword: !this.state.hidePassword }); } render() { const { masterView, submasterView, burgerImage, loginButtonView, LoginText, textInputStyle, forgotPsswordButton, createccountButton, textInputText, createccountText, kitchenText, socialView, facebookButton, googleButton, } = styles return ( this.props.navigation.goBack()} style={submasterView} > Welcome back to Healthy eat Your Email this.setState({ Useremail })} value={this.state.Useremail} /> Password this.setState({ Userpassword })} value={this.state.Userpassword} /> this.props.navigation.navigate('ForgotPass')}> Forgot password? this.UserLoginFunction()}> {this.state.spinner ? ( ) : ( Sign In )} this.props.navigation.navigate('Signup')}> Don't have an account? Sign Up ); } } const styles = StyleSheet.create({ inputIcon: { width: width * 0.2 / 3, height: width * 0.2 / 3, tintColor: darkOrange }, EmailIcon: { width: width * 0.2 / 3.5, height: width * 0.2 / 3.5, tintColor: darkOrange }, masterView: { flex: 1, backgroundColor: WhiteColor }, TextInputMasterView: { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 0.5, borderColor: midGrayColor, color: midGrayColor, width: '100%', height: width / 10 }, submasterView: { marginTop: 30, marginHorizontal: 15, backgroundColor: lightGrayColor, width: width / 9, height: width / 9, borderRadius: width / 9, alignItems: 'center', justifyContent: 'center', }, burgerImage: { width: width, height: width / 2 }, loginButtonView: { backgroundColor: darkOrange, width: width * 0.2, height: '45%', justifyContent: 'center', alignItems: 'center', borderRadius: 10, elevation: 5 }, LoginText: { fontFamily: FontFamilyMid, color: WhiteColor }, createccountButton: { backgroundColor: darkOrange, height: width * 0.3 / 2, width: width * 0.8, borderRadius: 30, justifyContent: 'center', alignSelf: 'center', elevation: 5, marginTop: 10 }, createccountText: { color: WhiteColor, fontFamily: FontFamilyBold, fontSize: semiFont, textAlign: 'center' }, textInputText: { fontFamily: FontFamilyMid, marginTop: 15 }, kitchenText: { fontSize: headerfont, fontFamily: FontFamilyMid, }, textInputStyle: { // borderBottomWidth: 1, // width: '100%', flex: 1, // height: width * 0.1, // borderColor: midGrayColor }, socialView: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: width / 2.5, alignSelf: 'center', marginVertical: 15 }, facebookButton: { alignItems: 'center', justifyContent: 'center', backgroundColor: '#3b5998', height: width * 0.3 / 2, width: width * 0.3 / 2, borderRadius: width * 0.3 / 2, elevation: 2 }, googleButton: { alignItems: 'center', justifyContent: 'center', backgroundColor: '#EA4335', height: width * 0.3 / 2, width: width * 0.3 / 2, borderRadius: width * 0.3 / 2, elevation: 2 }, forgotPsswordButton: { alignItems: 'flex-end', padding: 10, } })

No comments:

Post a Comment