react_native/news_app/app/Components/HomeHeadlineList.js
2024-07-20 13:48:56 -05:00

33 lines
No EOL
1.3 KiB
JavaScript

import { View, Text, FlatList, Pressable, Image } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useFonts } from 'expo-font';
import globalAPI from '../Service/globalAPI';
import { useNavigation } from 'expo-router';
const HomeHeadlineList = ({newsList}) => {
const navigation = useNavigation();
useFonts({
'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf'),
'playFair': require('../../assets/fonts/PlayfairDisplay-Regular.ttf')
})
return (
<View>
<FlatList data={newsList} renderItem={({item}) => (
<>
<Pressable onPress={() => navigation.navigate('news', {news:item})} style={{padding: 5, display: "flex", flexDirection: "row"}}>
<Image source={{uri:item.urlToImage}} style={{height: 120, width: 120}}/>
<View style={{marginLeft: 5, marginRight: 130}}>
<Text numberOfLines={3} style={{marginTop: 5, fontSize: 16, fontFamily: 'playFairBold'}}>{item.title}</Text>
<Text style={{marginTop: 5,color: "gray"}}>{item?.source?.name}</Text>
</View>
</Pressable>
<View style={{height:1, backgroundColor: "gray", marginHorizontal: 5}}></View>
</>
)}/>
</View>
)
}
export default HomeHeadlineList