How To Build a News Reader App with React Native and NewsAPI

Learning core React Native concepts by building a reader app from scratch with NewsAPI.org data and some cool functionality such as ‘ Pull To Refresh‘.

Aman Mittal
Feb 11 · 11 min read
  • Getting NEWS API Key
  • Fetching data from News API
  • The Article Component
  • Learn about react-native-elements in detail
  • Writing the News Component
  • FlatList Component in Detail
  • Conclusion

Getting Started with Requirements

To continue reading this tutorial, you need a basic understanding of JavaScript as a programming language. If you have some experience working your way with Reactjs, you will have no problem following this tutorial. If you are a newbie to JavaScript or React ecosystem, I want to halt right here and go through this awesome resource that can help you with understanding the basic concepts in this tutorial. (Don’t spend too much time if you’re not interested in building web applications using Reactjs; just go through the main concepts.)

  • Know, how to run simple npm commands
  • JavaScript/ES6 basics
  • watchman the file watcher installed
  • react-native-cli installed through npm

Getting News API Key

NewsAPI.org is simple and easy to use data API that returns JSON metadata for headlines and articles from the internet. It uses over 30,000 sources to fetch data from the web.

Fetching data from News API

To fetch data from the news API using our recently you are going to use JavaScript’s fetch API. Let us write a function that will handle this process. Create a new file inside src/utils/fetchNews.js and then add the following snippet.

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.

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.

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 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

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.

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.

Rendering Articles List

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

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.

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.

Crowdbotics

The fastest way to build your next app.

Aman Mittal

Written by

👨‍💻 Developer ❤️ Nodejs ReactJS ReactNative | Blogger | Weekly Newsletter on Dev stuff Subscribe 👉https://tinyletter.com/amanhimself ⚛️ + 📱

Crowdbotics

The fastest way to build your next app.