Hanoicomputer_App/screens/ArticleList.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 ArticleList() {
    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}>Tin tức</Text>
                </View>

                <ListArticleCategory />

                <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 dataArticle = [
    {
        id: 1,
        title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '12-03-2021, 5:30 pm',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 2,
        title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '13-03-2021, 8:30 pm',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 3,
        title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '13-03-2021, 5:30 am',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 4,
        title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '22-03-2021, 5:30 pm',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
]

const ListArticleCategory = () => {
    const dataArtileList = dataArticle;
    const styleTitle = {
        fontSize: 16,
    }
    return (
        <View style={styles.boxArtcleCategory}>
            {
                dataArtileList.map(item => <ArticleItem key={item.id} id={item.id} title={item.title}
                    image={item.image} category={item.category} visit={item.visit}
                    comment={item.comment} createDate={item.createDate} summary={item.summary} styleTitle={styleTitle} />)
            }

            <View style={styles.boxArtcleCategoryLoadMore}>
                <Pressable style={styles.boxArtcleCategoryLoadMoreButton}>
                    <Text style={styles.boxArtcleCategoryLoadMoreText}>Tải thêm</Text>
                </Pressable>
            </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
    },
    boxArtcleCategory: {
        paddingHorizontal: 10,
        marginBottom: 20,
        width: winWidth,
    },
    boxArtcleCategoryLoadMore: {
    },
    boxArtcleCategoryLoadMoreButton: {
        width: '100%',
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ce0707'
    },
    boxArtcleCategoryLoadMoreText: {
        color: '#fff'
    },
})