import React, {useState, useContext,useEffect} from 'react'; import { View, Text, Image, Button, TextInput, KeyboardAvoidingView, SafeAreaView, Dimensions, Platform, ToastAndroid, StatusBar, } from 'react-native'; import {StackActions} from '@react-navigation/native'; import {enableScreens} from 'react-native-screens'; import Icon from 'react-native-vector-icons/Ionicons'; import ImageColors from 'react-native-image-colors'; import LinearGradientComp from '../../components/Shared/LinearGradient'; import Btn from "../../components/Shared/Btn"; import InputBox from "../../components/Shared/InputBox" //Constants //Assets import LOGO from "../../../assets/rezonance-logo-blue-sq.png" import BG from "../../../assets/bg.jpg" import { ACCENT, colors, GRAY, PRIMARY } from '../../constants/colors'; import { userApiUrl } from '../../constants/config'; import axios from 'axios'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { GlobalContext } from '../../context/GlobalState'; const {height, width} = Dimensions.get('window'); const LoginScreen = ({navigation}) => { const [name,setName] = useState(""); const [phone,setPhone] = useState(""); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [submitting, isSubmitting] = useState(false); const [color,setColor] = useState(""); const {updateUser,updateToken} = useContext(GlobalContext); const handleNameChange = (text) => setName(text); const handlePhoneChange = (text) => setPhone(text); const handleEmailChange = (text) => setEmail(text); const handlePasswordChange = (text) => setPassword(text); const handleSignIn = () => { navigation.navigate("LoginScreen"); }; useEffect(() => { const getDominantColors = async () => { const colors = await ImageColors.getColors(BG, { fallback: '#7f8c8d', }); if (colors.platform === 'android') { averageColor = colors.average; setColor(averageColor); } else { const backgroundColor = colors.background; setColor(backgroundColor); } return averageColor; }; getDominantColors(); }, []); const handleSignUp = () => { const re=/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; if (!name || !email || !phone || !password) { if (Platform.OS === 'android') { ToastAndroid.show('Field cannot be empty', ToastAndroid.SHORT); } } else { if (!email.match(re)) { if (Platform.OS === 'android') { ToastAndroid.show('Invalid Email', ToastAndroid.SHORT); } } else { isSubmitting(true); axios.post(`${userApiUrl}/user/signup`,{ name, phone, email, password }).then(async () => { isSubmitting(false); if (Platform.OS === 'android') { ToastAndroid.show('Signup Successful', ToastAndroid.SHORT); } navigation.navigate("LoginScreen"); }).catch((err) => { isSubmitting(false); if (Array.isArray(err.response.data.errors)) { if (Platform.OS === 'android') { ToastAndroid.show(err.response.data.errors[0].msg, ToastAndroid.SHORT); } } }) } } } return ( // <SafeAreaView style={{flex: 0.5,flexDirection:"column", justifyContent: 'center'}}> <LinearGradientComp bgcolors={{ // colorOne: PRIMARY, colorOne: "#004e92", colorTwo: "#000428", }}> {/* <KeyboardAvoidingView keyboardVerticalOffset={-height / 2} style={{flex: 1, alignItems: 'center'}} behavior="position"> */} {/* <View style={{backgroundColor:"white", paddingHorizontal: 10}}> */} <View style={{ flex: 0.5, justifyContent: 'center', marginTop:height/3, margin:30, minHeight: height / 10, maxHeight: height / 2.5, }}> <View style={{flexDirection: 'column',marginBottom:60, alignItems:"center"}}> <Image source={LOGO} style={{height:height/4, width: width/2}} /> <Text style={{ color:"white", fontSize:26, marginRight: "5%", letterSpacing:1, marginBottom:5, alignContent: "center", fontWeight:"bold" }}>{"Sign Up"}</Text> </View> <InputBox style={{ backgroundColor: "transparent", color: "white", fontSize: 16, borderLeftWidth:0, borderRightWidth:0, borderTopWidth:0, borderWidth: 1, }} label="Name" value={name} onChangeText={handleNameChange} autoCapitalize={'none'} /> <InputBox style={{ backgroundColor: "transparent", color: "white", fontSize: 16, borderLeftWidth:0, borderRightWidth:0, borderTopWidth:0, borderWidth: 1, }} label="Phone" value={phone} onChangeText={handlePhoneChange} autoCapitalize={'none'} /> <InputBox style={{ backgroundColor: "transparent", color: "white", fontSize: 16, borderLeftWidth:0, borderRightWidth:0, borderTopWidth:0, borderWidth: 1, }} label="Email" value={email} onChangeText={handleEmailChange} autoCapitalize={'none'} /> <InputBox style={{ backgroundColor: "transparent", color: "white", borderLeftWidth:0, fontSize: 16, borderRightWidth:0, borderTopWidth:0, borderWidth: 1, }} label="Password" value={password} onChangeText={handlePasswordChange} textContentType={'password'} autoCompleteType={'password'} secureTextEntry={true} viewStyle={{marginBottom: 2}} /> <View style={{ flexDirection:"row", justifyContent:"center", marginTop:50 }}> <Btn style={{ width:width/3, color: "black", backgroundColor:"rgb(243, 244, 246)" }} title={"SignUp"} onPress={handleSignUp} loading={submitting} loadingText={"Loading"} /> </View> <Text onPress={handleSignIn} style={{textAlign: 'center', margin:30, color:"white", fontSize: 16}}> {"Already have an account? Sign In"} <Icon name="arrow-forward" style={{fontSize: 15}} /> </Text> </View> </LinearGradientComp> ); }; export default LoginScreen;