The function getUSANews() is returning only the array articles from above. We will consume this array by traversing it and displaying each article along with the headline, its image URL.

To get more information on the different data sources you can visit newsapi documentation.

Adding a Third Party UI Kit

Before we begin developing our UI components and display news articles, we are going to install a third party UI library that will provide us a lot of styling and pre-defined components, that with very little tweaks, we can make use of these components. You can think of this as a CSS framework (such as Bootstrap or Semantics or any other) in terms of Front-End Web Development.

Move ahead, stop the npm run command if it is still running the and in the same run the following set of commands to install react-native-elements and react-native-vector-icons .

To verify that dependencies have installed and their installed version of each dependency, you can always visit package.json file.

What about the react-native link command? Why did we have to run it and what does it do? Read the next short section if you do not know what is linking of libraries in React Native means. You can skip it if you already know about it and move onto the next section.

Side-note: You are also going to momentJS library to display each article’s published date and time. To install just run npm i -S moment , no linking required for this.

Link Libraries React Native

All third-party libraries in React Native have some native dependencies that use specific platform capabilities of iOS and Android. Linking these native dependencies with react-native link command indicates that a libraries’ native dependencies are linked successfully to your iOS/Android project.

Whenever you link a library, you will always get a prompt message informing you whether the library has been successfully linked or not like below.

The Article Component

To display the data we need a React Native component. Create a new file inside src/components/Article.js . You start by requiring dependencies in order to build this component. Then, also save one article data object from the news API URL we visited earlier. For now, we are going to show hard-coded data. Also, the Article component is going to represent one single article, so it will satisfy our need for now. Here is the code for the complete component as of now.

The defaultJSONData is going to be the source of the data until we successfully display one article in the form of a card element on the device's screen. Later on, we are going to fetch all the articles inside another component that will be using the Article component to display each article. The data to the Article component then, will be provided through props.

Inside the render method, we are using a combination of elements from both react-native and third party UI kit library, react-native-elements .

The TouchableHiglight component from react native is going to be useful to us. It is a wrapper that makes a normal view in React Native respond to touches properly on a mobile device.

These are the three UI elements from react-native-elements. A Card is helping us to display news article information. It contains content in the form of

a news article’s headline: defaultJSONData.title

the description: defaultJSONData.description

the name source or the news provider: defaultJSONData.source.name

the time article was published from the current time: defaultJSONData.publishedAt

and the image of the article from the source: defaultJSONData.urlToImage

The Card has some special props. Like when you want to use to display the content on the image (like we are doing), you can use a combination of props such as featuredTitle and image . The featuredTitleStyle is just used to provide some extra weight to the text on the image.

I am sure, you are not getting much of this. So let us first find a way to display this card and then talk about it in detail. Open up App.js and add the following.

We are importing the Article class component from its file inside /components/ . If you refresh the iOS/android simulator, you will get the following result.

Now, you get it. Take a look at the whole Card . It adds the outer most border on its own. Inside the card, notice how the featuredTitle is working its charm over the image prop. If you had used the simple title , you won't be getting similar result like above.

Also notice closely, the Divider between the description of the news article, and the source and the published time of the article. Below the Divider , we have a View that contains the source name and the time the article was published. We are using the divider element from react-native-elements and providing our own background color as the style. The news source provider has its own name converted to uppercase letters using JavaScript utility function toUpperCase() .

In the description part, as in the above snippet, you will notice a default text Read more... . This is a placeholder text that will appear only in the scenario when the source in the API fails to provide a description for a news article.

News Component

In this section, we are going to learn how to use display multiple articles from the API as a list. Do note that, this list is going to be a scrollable list. Create a new file inside components/News.js with the following code.

We start by importing the usual React boilerplate code. From React Native, we are only going to use FlatList to render a list of news articles. We define an initial state object which has an array articles that will store all the articles after they are fetched from the API. The second property of the state is refreshing . This will be used with FlatList as props and accepts boolean value. This value when true triggers a refresh (spinner) animation. This animation is also visible at the starting of the application since the default value for refreshing is true .

You will notice the use of a lifecycle method called componentDidMount() . This gets invoked immediately after the News component is mounted. It further triggers the calling of another function called fetchNews .

The fetchNews calls the API function from the utils directory we created earlier in this tutorial. It returns a promise which further takes articles as an argument. If the data is fetched, we update the state object accordingly.

The last method is handleRefresh . It starts the spinner animation and invokes the fetchNews() method immediately after we update the component's state.

FlatList

To render a list of items in React Native such that the user can scroll through them on their devices can be done through either using a FlatList, ScrollView or SectionList component. In this tutorial, we made use of FlatList component.

A FlatList component takes two primary props whenever you want to make scrollable list our of data available to you. They are data and renderItem . data is the array that is used to create a list of item and renderItem is the function that takes an individual element of data from the array and renders it.

In the code above, notice how we implement FlatList in the News.js .

The data is coming from the initial state object and an object of each item is getting passed through renderItem which is further send as props to Article component. Apart from data and renderItem , we are using three other props.

keyExtractor is another important and required prop when using FlatList. It should always contain the value that is unique to each object in the data array. For example, from the news API source, we are using the URL of each news article since it is always going to be unique as each article is going to have a unique URL on the Web.

The onRefresh prop provides the functionality of "Pull to Refresh". It also requires the prop refreshing as we did in the News.js and always accepts a boolean value.

Rendering Articles List

To display its content on the screen, you have to modify App.js accordingly.

In the App.js file, all we have to do is import News component to render its content. Check out the image below of how the data renders on the screen.

If you pull the list down, the spinner animation will appear and if there is new data, it will update the list on the mobile screen.

Conclusion

I hope you enjoyed reading this tutorial and hopefully, you learned something new out of it such as using third party API, using a UI toolkit and core React Native concepts such as react-native link , rendering a list using FlatList and implementing Pull To Refresh functionality with it.

If you have any questions, you can reach out to me on Twitter and you can find the complete code for this tutorial in the Github Repository 👇.

Starting a new React Native project?

Crowdbotics helps business build cool things with React Native (among other things). If you have project where you need additional developer resources, Crowbotics can help you estimate build time for given project, and provide specialized React Native developers as you need them.