How to build a News App with React Native (Part 2) (Home Module)
Please note that this tutorial assumes you have some JavaScript or React Native experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.
In Part 1, we created our app, installed the required dependencies, set up the project folder structure and configured the app.
In Part 2, we will create the home module.
Step 1: Setup
In the modules folder, we will create the home module, in that module, we will create 2 folders, components, and scenes and 4 js files, index.js, constants.js, action.js and reducer.js.
Make sure you are in the project root$ cd app/modules
$ mkdir home && cd homeFolders
$ mkdir components scenesJS files
$ touch index.js constants.js actions.js reducer.js
Index
Update the index.js file with the code below. This will be the entry point into our home module, in this file we will import the actions, constants, reducer and theme file and then export them all as part of an object.
Constants
Update the constants.js file with the code below. In this file, we will declare the name of this module, the action types to be used by redux, the Newsapi.org API url and the API key.
Step 2: Redux
Redux Actions
Update the actions.js file with the code below. First, we import the axios plugin so we can make API calls, and import the constants file so we have access to the API URL and API KEY previously declared.
Next, we create the getNewsHeadlines function in charge of calling the Newsapi.org API to retrieve the news headlines, it takes in the “country” as a parameter and defaults to “us” (United States), if the country parameter is not passed.
If the API call is successful, the returned data is dispatched to the reducer, if an error occurs, the error object is dispatched to the reducer.
The getHeadlinesBySource function retrieve the news headlines for a specific source, it takes in the “source” as a parameter.
Note that the getHeadlinesBySource does not dispatch the returned data or error to the reducer, instead it is returned to the scene that called it and that scene saves the data in its state.
Redux Reducer
Update the reducer.js file with the code below. It’s the reducer’s job to decide if it needs to modify the app state or not based on the action dispatched to it.
Root Reducer
To complete the Redux setup for this module, we will add the newly created reducer to the root reducer so how scenes can have access to them.
Update the rootReducer.js file.
Step 3: Scenes
Components
Before creating the scene, we need to first create our NewsItem component, this component will display the info for each headline, it will be a view with an image and 3 textfields for displaying the headline article image, title, date published and source.
When the source textfield is pressed, the app will navigate to a new scene that displays the headline articles for a specific source.
When the component is pressed, the app will navigate to a new scene that displays the article.
Make sure you are in the project root$ cd app/modules/home/components
$ mkdir NewsItem && cd NewsItemJS files
$ touch index.js styles.js
Home Scene
Our Home scene will include just a Flatlist that will be display all articles with the help of the NewsItem component.
Make sure you are in the project root$ cd app/modules/home/scenes
$ mkdir Home && cd HomeJS file(s)
$ touch index.js
Source Scene
Our Source scene is very similar to the Home scene but it only displays articles from a specific source and also doesn’t store its data in the redux store instead it uses the scenes state.
Make sure you are in the project root$ cd app/modules/home/scenes
$ mkdir Source && cd SourceJS file(s)
$ touch index.js
Article Scene
Our Article scene has a Webview for displaying the article using its url.
Make sure you are in the project root$ cd app/modules/home/scenes
$ mkdir Article && cd ArticleJS file(s)
$ touch index.js
Step 4: Link It all together
Routes
Now that the scenes are ready, we need to add them to our routes file, update the routes.js file.
Routes
Entry Point
We need to update the App.js file, with a reducer now available, it’s time to wrap our app’s Router with our Provider.
Run the command below to test the app, This will start a development server for you. Download the Expo app to test.
$ expo startThats all folks!
Related Tutorials
React Native Tutorials
- Tutorial 1: React Native Redux Boilerplate
- Tutorial 2: React Native Redux with CRUD operations
- How to build a React Native App using Firebase. (Part 1) (Setup)
- How to build a React Native App using Firebase. (Part 2) (Backend)
- How to build a React Native App using Firebase. (Part 3) (Frontend)
- How to build a React Native App using Firebase. (Part 4)(Facebook Login)
- How to build a React Native App using Firebase. (Part 5)(CRUD)
