Hồng Phúc

54 bundles
1 file4 months ago
1

import React from 'react';

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; import TextInput from '../TextInput/TextInput'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {Icon} from 'react-native-eva-icons'; interface ILoginFormProps { formTitle: string; formType: 'login' | 'signup'; } const LogInForm: React.FC<ILoginFormProps> = ({formTitle, formType}) => { const renderFormRegister = () => { return ( <View> <TextInput style={{marginTop: 40}} textInputLabel="Tên Người Dùng" icon={ <Icon name="person-outline" fill="#fff" width={24} height={24} /> } /> <TextInput style={{marginTop: 16}} textInputLabel="Email" icon={ <Icon name="email-outline" fill="#fff" width={24} height={24} /> } /> <TextInput style={{marginTop: 16}} textInputLabel="Mật Khẩu" icon={ <Icon name="unlock-outline" fill="#fff" width={24} height={24} /> } /> <TextInput style={{marginTop: 16}} textInputLabel="Mật Khẩu" icon={ <Icon name="unlock-outline" fill="#fff" width={24} height={24} /> } /> <View style={{ marginTop: 100, justifyContent: 'center', alignItems: 'center', }}> <TouchableOpacity style={{ width: 160, borderRadius: 36 / 2, height: 36, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', }}> <Text style={{fontSize: 25, fontWeight: 'bold', color: 'red'}}> {'Đăng Ký'} </Text> </TouchableOpacity> </View> </View> ); }; const renderFormLogIn = () => { return ( <View> <TextInput style={{marginTop: 16}} textInputLabel="Email" icon={ <Icon name="email-outline" fill="#fff" width={24} height={24} /> } /> <TextInput style={{marginTop: 16}} textInputLabel="Mật Khẩu" icon={ <Icon name="unlock-outline" fill="#fff" width={24} height={24} /> } /> <View style={styles.submitBtnContainer}> <TouchableOpacity style={{ width: 160, height: 36, borderRadius: 36 / 2, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', }}> <Text style={{fontSize: 25, fontWeight: 'bold', color: 'red'}}> {'Đăng Nhập'} </Text> </TouchableOpacity> </View> </View> ); }; return ( <View style={styles.formContainer}> <Text style={styles.formTitle}>{formTitle}</Text> {formType === 'signup' ? renderFormRegister() : renderFormLogIn()} </View> ); }; const styles = StyleSheet.create({ formContainer: { flex: 1, backgroundColor: '#ff4d4d', shadowColor: '#000', shadowOffset: { width: 30, height: 10, }, shadowOpacity: 0.5, shadowRadius: 2.62, elevation: 4, borderTopLeftRadius: 30, borderBottomLeftRadius: 30, padding: 16, }, formTitle: { fontSize: 32, color: 'white', marginTop: 18, maxWidth: 200, }, submitBtnContainer: { marginTop: 220, justifyContent: 'center', alignItems: 'center', }, }); export default LogInForm; /// component Form /////////////////////////////////////////////////// import React from 'react'; import { View, Text, StyleProp, ViewStyle, GestureResponderEvent, StyleSheet, TextStyle, } from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; interface IButtonProps { textName: string; style?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>; icon?: React.ReactNode; onPress?: ((event: GestureResponderEvent) => void) | undefined; } const Button: React.FC<IButtonProps> = ({ textName, style, textStyle, icon, onPress, }) => { return ( <View style={style}> <TouchableOpacity onPress={onPress}> <Text style={[styles.buttonText, textStyle]}>{textName}</Text> {icon ? <View style={styles.Icon}>{icon}</View> : null} </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ Icon: { justifyContent: 'center', alignItems: 'center', }, buttonText: { color: '#ff4d4d', fontSize: 15, fontWeight: 'bold', }, }); export default Button; //////component Butoon import React, {useState} from 'react'; import {Icon} from 'react-native-eva-icons'; import {StyleSheet, View, Image, Dimensions, SafeAreaView} from 'react-native'; import LogInForm from '../../components/LogInForm/LogInForm'; import Button from '../../components/Button/Button'; interface IProps {} const screenWidth = Dimensions.get('window').width; const screenHeight = Dimensions.get('window').height; const SignUpScreen: React.FC<IProps> = () => { const [formState, setFormState] = useState<'login' | 'signup'>('login'); const handleSignUpBtnPress = () => { setFormState('signup'); }; const handleLoginBtnPress = () => { setFormState('login'); }; return ( <SafeAreaView style={styles.container}> <Image source={require('../../assets/shared/background.png')} style={styles.backgroundImage} /> <Image source={require('../../assets/shared/OBeeLogo.png')} style={styles.imageLogo} /> <View style={styles.sectionForm}> <View style={styles.listButtonContainer}> <Button textName="Đăng Ký" textStyle={ formState === 'signup' ? styles.tabButtonActiveText : styles.tabButtonInactiveText } style={[ styles.tabButton, formState === 'signup' ? styles.tabButtonActive : styles.tabButtonInactive, ]} onPress={handleSignUpBtnPress} /> <Button textName="Đăng Nhập" textStyle={ formState === 'login' ? styles.tabButtonActiveText : styles.tabButtonInactiveText } style={[ styles.tabButton, formState === 'login' ? styles.tabButtonActive : styles.tabButtonInactive, ]} onPress={handleLoginBtnPress} /> <View style={styles.socialButtonContainer}> <Button textName="" style={[styles.socialButton, styles.fbButton]} icon={ <Icon name="facebook-outline" fill="#fff" width={40} height={30} /> } /> <Button textName="" style={[styles.socialButton, styles.googleButton]} icon={ <Icon name="google-outline" fill="#fff" width={40} height={30} /> } /> </View> </View> <LogInForm formType={formState} formTitle={ formState === 'signup' ? 'Tạo Tài Khoản' : 'Chào mừng quay trở Lại' } /> </View> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, backgroundImage: { width: screenWidth, height: screenHeight, position: 'absolute', }, imageLogo: { marginLeft: -16, marginBottom: 16, height: 100, resizeMode: 'contain', }, sectionForm: { justifyContent: 'space-between', flexDirection: 'row', }, formContainer: { backgroundColor: 'blue', }, tabButton: { marginVertical: 12, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderRadius: 36 / 2, height: 36, width: 100, }, tabButtonActive: { backgroundColor: 'white', }, tabButtonInactive: { backgroundColor: 'transparent', }, tabButtonActiveText: { color: '#ff4d4d', }, tabButtonInactiveText: { color: 'white', }, socialButton: { marginVertical: 8, borderRadius: 60 / 2, width: 60, height: 60, shadowOpacity: 0.5, }, fbButton: { backgroundColor: '#1E90FF', }, googleButton: { backgroundColor: '#ff8533', }, listButtonContainer: { marginHorizontal: 16, marginTop: 200, }, socialButtonContainer: { justifyContent: 'center', alignItems: 'center', }, }); export default SignUpScreen; //Screen SignIn