import React, { Component } from “react”;
import Icon from “react-native-vector-icons/FontAwesome5”;
import {
WebView,
View,
StyleSheet,
Text,
ActivityIndicator,
Image,
TouchableOpacity,
Modal,
Platform
} from “react-native”;
import { FlatList } from “react-native-gesture-handler”;
import { Linking } from “expo”;
export default class NewsPage extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: [*],
isLoading: true,
modalVisible: false,
modalArticleData: {}
};
}
componentDidMount() {
return fetch(
“https://newsapi.org/v2/everything?q=empleos&language=es&apiKey=bc9471b0c90c4d1a8d41860292e59d6b”
)
.then(response => response.json())
.then(responseJson => {
this.setState(
{
dataSource: responseJson.articles,
isLoading: false
},
function () { }
);
})
.catch(error => {
console.error(error);
});
}
setModalVisible = articleData => {
if (Platform.OS === "ios") {
this.setState({
modalVisible: true,
modalArticleData: articleData,
});
} else if (Platform.OS === "android") {
Linking.openURL(articleData.url);
}
console.log(articleData.id)
};
closeModal = () => {
this.setState({
modalVisible: false,
modalArticleData: {}
});
};
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
);
}
return (
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<FlatList
data={this.state.dataSource}
keyExtractor={(item, index) => item.id}
renderItem={({ item }) => (
<View style={styles.newsListContainer}>
<Image
style={styles.newsImage}
source={{
uri:
item.urlToImage != null
? item.urlToImage
: "../assets/icon.png"
}}
/>
<View style={styles.newsInfo}>
<Text numberOfLines={2} style={styles.newsTitle}>
{item.title}
</Text>
<Text numberOfLines={3} style={styles.newsDescription}>
{item.description}
</Text>
</View>
<View>
<TouchableOpacity
onPress={() => {
this.setModalVisible(item);
// Linking.openURL(item.url);
}}
>
<Text style={styles.newsLink}>Leer</Text>
</TouchableOpacity>
</View>
<View style={styles.divisor}></View>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
>
<View style={styles.newsHeader}>
<TouchableOpacity
onPress={() => {
this.closeModal();
}}
>
<Icon name="backspace" style={styles.newsClose} />
</TouchableOpacity>
{/* <Text>{this.state.modalArticleData.title}</Text> */}
</View>
<WebView
useWebKit={true}
startInLoadingState={true}
// useWebKit={true}
source={{ uri: this.state.modalArticleData.url }}
/>
</Modal>
</View>
)}
keyExtractor={(item, index) => item.key}
/>
</View>
);
}
}
NewsPage.navigationOptions = {
headerTitle: “Noticias sobre empleos”
};
const styles = StyleSheet.create({
newsListContainer: {
width: “100%”,
marginVertical: 16,
padding: 16,
flex: 1,
flexDirection: “column”,
alignItems: “center”,
justifyContent: “space-between”
},
newsImage: {
width: “100%”,
height: 150
},
newsInfo: {
padding: 8,
alignSelf: “flex-start”
},
newsLink: {
marginVertical: 8,
alignSelf: “flex-start”,
textTransform: “uppercase”,
padding: 8,
textAlign: “center”,
color: “#F04E22”
},
newsTitle: {
fontSize: 18,
color: “#000000”,
marginVertical: 8
},
newsDescription: {
fontSize: 12,
color: “#000000”
},
newsHeader: {
flexDirection: “row”,
alignItems: “center”,
marginTop: Platform.OS === “android” ? 0 : 40,
padding: 16
},
newsClose: {
color: “red”,
fontSize: 24
},
divisor: {
width: “100%”,
height: 3,
backgroundColor: “#007bff”
}
});