How to React Native with JSON API (No API Key Required)

Another post how to build an Android and iOS app from scratch using React Native. In this guide, we are going to create an app using Football data for the world cups data created in JSON. As the comparison, you can check another tutorial of building Android and iOS app using Ionic Framework.

The following tools, frameworks, and modules are required for this tutorial:

– React Native / Node.js (NPM or Yarn) / Android Studio or SDK for Android / XCode for iOS / Terminal (OSX/Linux) or Command Line (Windows) / Text Editor or IDE (you can use ATOM / VISUAL STUDIO CODE / BRACKET )

Before start to the main steps, make sure that you have installed Node.js and can run npm in the terminal or command line. To check existing or installed Node.js environment open the terminal/command line then type this command.

That’s the Node and NPM or YARN version that we are using. In this tutorial, we will use Yarn commonly.

1. Install React App Creator and Create A React Native App

The Create React Native App is a tool for creating a React Native App. To install it, type this command in your App projects folder.

Then create a React Native App using this command.

That command will create a React Native app then install all required modules. The app or project folder will contain this folders and files.

Build Android and iOS App from scratch using React Native - Folder and File Structure

Next, go to the newly created React App folder.

This React Native App is running via Expo app.

Expo app is an app

  • Access to device capabilities like camera, location, notifications, sensors, haptics, and much more, all with cross-platform APIs.

  • Build service gives you app-store ready binaries and handles certificates, no need for you to touch Xcode or Android Studio.

  • Over-the-air updates let you update your app at any time without the hassle and delays of submitting to the store.

before running on your Android or iOS device, make sure you have to install Expo App to Android or Expo Client to iOS. Of course, that app is available in the App Store. So, we assume that you have installed Expo App in your device then type this command to run the app.

or

You will see this barcode and instruction in the terminal or command line.

Build Android and iOS App from scratch using React Native - NPM Start

To open the app in the Android device, open the Expo Application then Scan QR Code. then you will see the build process.

Build Android and iOS App from scratch using React Native - Blank AppBuild Android and iOS App from scratch using React Native - iOS EmailBuild Android and iOS App from scratch using React Native - Blank App iOS

📱 If your using iOS, press [s] to keyboard to send the App URL to your Email / SMS. next you need to enter your phone No. | email address (you can use your email address) then press enter. You will get this email to your inbox. Choose open in Expo URL then open in your browser, that will be redirected to Expo Application. In ExpoApp welcome screen, you need to shake your phone to open the React Native App and you will see the screen above in your iOS device.

This step for development purpose, we will show you how to build for production at the end of this article.

2. Add Navigation Header and Home Screen

Above generated React Native App just show blank app with plain text. Now, we will show you how to add Navigation Header and Home Screen for your app. So, it will look like the Native App. In the terminal or command line type this command to install React Navigation module.

Next, create a folder for components and components files in the root of the app folder.

Open and edit components/HomeScreen.js then add this React codes.

Open and edit components/DetailsScreen.js then add this React codes.

Next, open and edit App.js then add replace all codes with this.

When the files are saved, the Expo app will refresh the React Native App automatically. Now, the app will look like this.

Build Android and iOS App from scratch using React Native - Stack Navigation

3. Load World Cup 2018 Data from JSON API

To load World Cup 2018 data from API, open and edit components/HomeScreen.js then add constructor function before rendering function.

Add function for load API JSON data.

The response from API holds by dataSource variable that will use in the view in the next step.

4. Display List of World Cup Matchdays

We will use List and ListItem component of React Native Elements module. First, install react-native-elements using this command.

Open and edit again components/HomeScreen.js then replace all imports with this.

Next, replace all render function with this.

Add style const before the export code.

5. Display World Cup 2018 Matchdays Details

We will display World Cup 2018 Matchdays Details in the DetailsScreen. Open and edit components/DetailsScreen.js then replace all imports with this.

Next, replace all render function with this lines codes.

Add StyleSheet const before the export code.

6. Run the React Native World Cup 2018 App

To run the application in Expo App, you can find in step 1 of this article. If there’s no error found, you will see the result like this.

Build Android and iOS App from scratch using React Native - Matchday ListBuild Android and iOS App from scratch using React Native - Matchday details

Next, to run or build as the Native App, type this command to install React Native CLI first.

Next, eject the project from the Create React Native App by type this command.

You will get questions like below, make it same with the one that we choose.

Next, to run the Native iOS or Android App in the Simulator, type this command.

Leave a Reply

Your email address will not be published. Required fields are marked *