App.js

import React from 'react';
import { StyleSheet, Text, View,FlatList } from 'react-native';

import { getNews } from './src/news';
import Article from './src/components/Article';

export default class App extends React.Component {

  constructor(props){
    super(props)
    this.state = { articles: [], refreshing: true};
    this.fetchNews = this.fetchNews.bind(this);
    this.handleRefresh = this.handleRefresh.bind(this);
  }

  componentDidMount(){
      this.fetchNews()
  }

  fetchNews(){
    getNews()
        .then( articles => this.setState({articles,refreshing: false}))
        .catch(() => this.setState({ refreshing: false }));
  }

  handleRefresh() {
    this.setState(
      {
        refreshing: true
    },
      () => this.fetchNews()
    );
  }

  render() {
     return (
      <FlatList
        data={this.state.articles}
        renderItem={({ item }) => <Article article={item} />}
        keyExtractor={item => item.url}
        refreshing={this.state.refreshing}
        onRefresh={this.handleRefresh.bind(this)}
      />
  );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});