Hanoicomputer_App/screens/Login.tsx

import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
import { ArticleItem } from '../components/article/ArticleItem';

export default function Login() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.brecrumb}>
                    <Text style={styles.brecrumbText}>Trang chủ</Text>
                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
                    <Text style={styles.brecrumbTextLast}>Đăng nhập</Text>
                </View>

                <LoginBox />

                <NoteLogin />

                <PolicyFooter />

                <Social />

                <ShowroomList />

                <FooterInfo />
            </ScrollView>
        </SafeAreaView>
    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width

const LoginBox = () => {
    return (
        <View style={styles.login}>
            <Text style={styles.loginTitle}>Thông tin khách hàng đăng nhập hệ thống</Text>
            <View style={styles.loginContent}>
                <View style={styles.loginItem}>
                    <Text style={styles.loginText}>Email Đăng nhập</Text>
                    <TextInput style={styles.loginInput} />
                </View>
                <View style={styles.loginItem}>
                    <Text style={styles.loginText}>Mật khẩu</Text>
                    <TextInput style={styles.loginInput} />
                </View>
                <Pressable style={styles.loginSubmit}>
                    <Text style={styles.loginSubmitText}>Đăng nhập</Text>
                </Pressable>
                <View style={styles.loginGoogle}>
                    <View style={styles.loginSocialIcon}>
                        <FontAwesome style={styles.loginSocialIconCt} name="google-plus" />
                    </View>
                    <Text style={styles.loginSocialText}>Đăng nhập bằng google</Text>
                </View>
                <View style={styles.loginFace}>
                    <View style={styles.loginSocialIcon}>
                        <FontAwesome style={styles.loginSocialIconCt} name="facebook" />
                    </View>
                    <Text style={styles.loginSocialText}>Đăng nhập bằng Facebook</Text>
                </View>
                <View style={styles.loginZalo}>
                    <View style={styles.loginSocialIcon}>
                        <Image style={styles.loginZaloImg} source={{ uri: 'https://www.hanoicomputer.vn/template/may2020/images/logo-zalo-png-vertor-jpeg.jpg' }} />
                    </View>
                    <Text style={styles.loginSocialText}>Đăng nhập bằng Zalo</Text>
                </View>
            </View>
        </View>
    )
}

const NoteLogin = () => {
    return (
        <View style={styles.noteLogin}>
            <Text style={styles.noteLoginTitle}>Trợ giúp</Text>
            <View>
                <Text style={styles.noteLoginText}>1. Nếu bạn chưa là thành viên, vui lòng <Pressable><Text style={styles.noteLoginTextLink}>Đăng ký tài khoản</Text></Pressable></Text>
                <Text style={styles.noteLoginText}>2. Nếu bạn quên mật khẩu, vui lòng yêu cầu <Pressable><Text style={styles.noteLoginTextLink}>quên mật khẩu</Text></Pressable></Text>
                <Text style={styles.noteLoginText}>3. Nếu bạn không đăng ký thành viên được, vui lòng gửi email tới chúng tôi</Text>
                <Text style={styles.noteLoginText}>4. Hoặc gọi điện tới chúng tôi để được tư vấn.</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    brecrumb: {
        display: 'flex',
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
        height: 18,
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
    },
    brecrumbText: {
        fontSize: 13,
        color: '#222',
    },
    brecrumbTextLast: {
        fontSize: 13,
        color: '#b7b7b7',
    },
    brecrumbIcon: {
        fontSize: 13,
        color: '#222',
        marginLeft: 6,
        marginRight: 6
    },
    login: {
        width: winWidth,
        marginBottom: 20,
        paddingHorizontal: 10,
    },
    loginTitle: {
        fontSize: 13,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    loginContent: {},
    loginItem: {
        marginBottom: 20,
    },
    loginText: {
        marginBottom: 5,
    },
    loginInput: {
        width: '100%',
        height: 40,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#e1e1e1',
    },
    loginSubmit: {
        width: '100%',
        height: 40,
        borderRadius: 3,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgb(253, 216, 53)',
        marginBottom: 10,
    },
    loginSubmitText: {},
    loginGoogle: {
        width: '100%',
        height: 40,
        borderRadius: 3,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#df4a32',
        marginBottom: 10,
    },
    loginSocialIcon: {
        width: 40,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRightWidth: 1,
        borderRightColor: '#fff',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    loginSocialIconCt: {
        fontSize: 25,
        color: '#fff'
    },
    loginSocialText: {
        textAlign: 'center',
        width: winWidthP10 - 41,
        color: '#fff'
    },
    loginFace: {
        width: '100%',
        height: 40,
        borderRadius: 3,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#3b5998',
        marginBottom: 10,
    },
    loginZalo: {
        width: '100%',
        height: 40,
        borderRadius: 3,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#3b5998',
        marginBottom: 10,
    },
    loginZaloImg: {
        width: 25,
        height: 25,
    },
    noteLogin: {
        paddingHorizontal: 10,
        paddingTop: 20,
        borderTopColor: '#e1e1e1',
        borderTopWidth: 1,
        marginBottom: 20,
    },
    noteLoginTitle: {
        fontWeight: 'bold',
        marginBottom: 10,
    },
    noteLoginText: {
        marginBottom: 5,
    },
    noteLoginTextLink: {
        color: '#3b5998'
    },
})