55 lines
No EOL
2.5 KiB
JavaScript
55 lines
No EOL
2.5 KiB
JavaScript
import { View, Text, Image, Pressable, Linking, Share } from 'react-native'
|
|
import React, { useEffect } from 'react'
|
|
import { useRoute } from '@react-navigation/native'
|
|
import { useFonts } from 'expo-font'
|
|
import { Ionicons, Fontisto } from '@expo/vector-icons';
|
|
import { useNavigation } from 'expo-router';
|
|
import { ScrollView } from 'react-native-gesture-handler';
|
|
|
|
const News = () => {
|
|
useFonts({
|
|
'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf')
|
|
})
|
|
const news = useRoute().params.news;
|
|
const navigation=useNavigation();
|
|
//share news
|
|
const shareLink = () => {
|
|
Share.share({url: news.url})
|
|
}
|
|
useEffect(() => {
|
|
console.log(news)
|
|
},[])
|
|
//Time
|
|
const publishedDate = news.publishedAt;
|
|
const newInputDate = publishedDate.replace("T", " ").replace("Z", " ");
|
|
//url
|
|
const url = news.url
|
|
|
|
return (
|
|
<ScrollView style={{backgroundColor: "white", height: "100%"}}>
|
|
<View style={{display: "flex", flexDirection: "row", justifyContent: "space-between", marginHorizontal: 10, marginVertical: 10}}>
|
|
<Pressable onPress={() => navigation.goBack()} style={{display: "flex", flexDirection: "row", alignItems: 'center', gap: 5}}>
|
|
<Ionicons name="arrow-back-outline" size={24} color="black" />
|
|
<Text>Back</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => shareLink()}>
|
|
<Fontisto name="share" size={20} color="black" />
|
|
</Pressable>
|
|
</View>
|
|
<View style={{height:1, backgroundColor: "gray", marginHorizontal: 5}}></View>
|
|
<View style={{marginHorizontal: 10, marginVertical: 20}}>
|
|
<Text style={{fontSize: 24, fontFamily: 'playFairBold'}}>{news.title}</Text>
|
|
<Text style={{marginTop: 20, color: "gray"}}><Text style={{fontWeight: "bold", color: "black"}}>{news.source.name} </Text>{news.author}</Text>
|
|
<Text style={{marginTop: 5, color: "gray"}}>{newInputDate}</Text>
|
|
</View>
|
|
<Image source={{uri:news.urlToImage}} style={{height: 300, marginHorizontal: 10,}}/>
|
|
<Text style={{marginHorizontal: 10, marginTop: 40, marginBottom: 20,fontSize: 18}}>{news.description}</Text>
|
|
<Text numberOfLines={4} style={{marginHorizontal: 10,fontSize: 18}}>{news.content}</Text>
|
|
<Pressable onPress={() => Linking.openURL(url)} >
|
|
<Text style={{marginTop: 20, marginHorizontal: 10,fontSize: 18, color: "gray"}}>Read More</Text>
|
|
</Pressable>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
export default News |