How to build a News App with React Native (Part 1)
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 this tutorial, we will build a News app with React Native that uses the newsapi.org API to retrieve the top headlines.
Now, that we have gotten that out of the way, LET THE CODING BEGIN!
Step 0: Register for News API key
Follow the link to register for an API key.
Step 1: Getting Started
If this is your first time creating a React Native app, make sure you have Node, npm or yarn installed. For this project, I will be using yarn and create-react-native-app which has been dubbed as the easiest way to start building a new React Native app.
There are many advantages to using CRNA, one being that it allows you to start a project without installing or configuring any tools to build native code — no Xcode or Android Studio installation required and you can install the Expo app on your iOS or Android phone for testing.
Before we begin, we have to globally install the create-react-native-app command line utility and Expo CLI using npm or yarn.
Open up your terminal and run one of the commands below depending on whether you are using npm or yarn.
$ npm install -g create-react-native-app
$ npm install -g expo-clior$ yarn global add create-react-native-app
$ yarn global add expo-cli
Now that CRNA is installed, we can create a new project by running the command below:
$ create-react-native-app news-rn-app
$ cd news-rn-app/
$ npm installStep 2: Install Dependencies
We will be using the following packages:
- Redux for managing the app’s state
- React-Redux, will be used to connect our app’s components to the redux store.
- Redux Thunk is a middleware for Redux that allows us to write action creators that return a function instead of an action.
- React Native Router Flux for our apps navigation,
- React Native Elements as our UI Toolkit,
- React Native Size Matters for scaling the size your apps UI across different sized devices,
- Axios, a promised-based HTTP client for making calls to our API
- Moment.js
$ yarn add redux react-redux redux-thunk
$ yarn add react-native-router-flux
$ yarn add react-native-elements
$ yarn add react-native-size-matters
$ yarn add axios
$ yarn add momentOr$ yarn add redux react-redux redux-thunk react-native-router-flux react-native-elements react-native-size-matters axios moment
Before we continue, run the command below to test the app, This will start a development server for you, and print a QR code in your terminal. If you are using the Expo app, you can scan the QR code.
$ expo startStep 3: Create Folder Structure
For this project, I will be organizing the directory by feature/module. To find out more about organising by feature/module, read this article or this or this or this to get a better understanding and see the advantages of organizing your project this way.
In your project root create an app folder, in that folder, we will create 6 additional folders, assets, config, components, modules, redux and styles.
Make sure you are in the project root$ mkdir app && cd app
$ mkdir assets config components modules redux stylesConfig
$ cd config && touch constants.js routes.js request.js && cd ..Redux
$ cd redux && touch rootReducer.js store.js && cd ..Styles
$ cd styles && touch theme.js && cd ..Or$ mkdir app && cd app && mkdir assets config components modules redux styles && cd config && touch constants.js routes.js request.js && cd .. && cd redux && touch rootReducer.js store.js && cd .. && cd styles && touch theme.js && cd ..
Step 4: Configuration
Redux
We will configure the app for Redux. We will set up the Root Reducer and Store.
Reducer
The reducers are the in charge of updating the state of our app. In the redux folder, update the rootReducer.js file. In this file, we will import the reducers from our modules and use redux combineReducers function to merge them together into a single state object that we will later use to create our redux store.
Store
In the redux folder, create the store.js file. In this file we will create our redux store by importing our root reducer and injecting our store enhancers, i.e. Redux Thunk.
Routes
In the app/config folder, update the routes.js file. In this file we will set up our Router and Scenes, check React Native Router repo for more information about the basic setup.
For now, we will add a default scene.
Entry Point
The App.js file is the entry point into our app. In this file, we import our routes and store. We then connect our provider to our store which will let our app scenes access our app’s state and then wrap our app’s Router with our Provider.
For now, we will not wrap the app’s Router with the Provider as we don’t have any reducers yet.
Theme
Last but not least, we will create the theme file, in this file we will declare our font sizes, colors, font family and more. In the styles folder, update the theme.js file and paste the code below.
Run the command below to test the app, This will start a development server for you. Download the Expo app to test.
$ expo startIn Part 2, we will create our Home module.
Thats 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)
