40 lines
No EOL
1.5 KiB
JavaScript
40 lines
No EOL
1.5 KiB
JavaScript
import { View, Text, FlatList, Pressable, Image, Dimensions } from 'react-native'
|
|
import React, { useEffect, useState } from 'react'
|
|
import GlobalAPI from '../Service/globalAPI'
|
|
import { useFonts } from 'expo-font'
|
|
import { useNavigation } from '@react-navigation/native'
|
|
|
|
const HomeTopHeadline = () => {
|
|
const navigation = useNavigation();
|
|
|
|
useFonts({
|
|
'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf'),
|
|
'playFair': require('../../assets/fonts/PlayfairDisplay-Regular.ttf')
|
|
})
|
|
|
|
const [newsList, setNewsList] = useState([]);
|
|
useEffect(() => {
|
|
getTopHeadline();
|
|
}, [])
|
|
|
|
const getTopHeadline = async() => {
|
|
const result = (await GlobalAPI.getTopHeadline).data;
|
|
setNewsList(result.articles)
|
|
}
|
|
|
|
return (
|
|
<View>
|
|
<FlatList data={newsList} horizontal showsHorizontalScrollIndicator={false} renderItem={({item}) => (
|
|
<Pressable onPress={() => navigation.navigate('news', {news:item})} style={{width:Dimensions.get('screen').width*0.95, marginRight: 10, marginTop: 5, marginBottom: 5}}>
|
|
<Image source={{uri:item.urlToImage}} style={{height: 300}}/>
|
|
<View style={{backgroundColor: "#F5F7F8", padding: 10}}>
|
|
<Text numberOfLines={2} style={{marginTop: 5, fontSize: 22, fontFamily: 'playFairBold'}}>{item.title}</Text>
|
|
<Text style={{marginTop: 5, color: "gray"}}>{item?.source?.name}</Text>
|
|
</View>
|
|
</Pressable>
|
|
)}/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default HomeTopHeadline |