React Native

Start your React Native Expo project using a pre built template

Introduction

In this section you will learn how to get started with React Native using an Expo template and how to connect it to Back4App in 4 easy steps.

Prerequisites

To complete this tutorial, you will need:

  • An app created on Back4App.
  • NPM or YARN installed on your system.
  • Expo cli installed following this guide.

Step 1 - Get the template

To get the template project, download and unzip the source code at our GitHub repository into your machine or clone the project with git command line.

Run the following command to download and extract the template using CURL:

$ curl -LOk https://github.com/templates-back4app/react-native-expo/archive/master.zip && unzip master.zip

OR

Run the following command to clone the template using GIT:

$ git clone https://github.com/templates-back4app/react-native-expo

Step 2 - Download app’s dependencies

  1. Make sure that you have installed npm or yarn in your system.

    Look at the get npm or get yarn guides for more info.

  2. On your terminal, run cd react-native-expo to open the project’s root directory.
  3. Run yarn install to install dependencies.

In this tutorial we are using yarn to manage dependencies but you are free to use npm instead.

Step 3 - Set up app’s credentials

To allow the App to securely connect to Back4App servers, you must provide Parse JavaScript SDK with app’s credentials.

  1. Locate your App Id and Javascript Key credentials navigating to your app Dashboard at Back4App Website > App Settings > Security & Keys.
  2. On the project’s root directory, open the file at: constants/Keys.js.

The file should look like this:

1
2
3
4
5
6
7
module.exports = {
  applicationId:  'APPLICATION_ID',
  javascriptKey:  'JAVSCRIPT_KEY',
  serverURL:  'https://parseapi.back4app.com/'
}

Copy and paste your App Id and Javascript Key on it.

Step 4 - Test your connection

Inside the App.js of your template project there is a simple function that registers installations of your App to your Back4App Database.

1
2
3
4
5
6
7
8
9
10
11
 useEffect(() => {
	createInstallation = async () => {
		const  Installation = Parse.Object.extend(Parse.Installation);
		const  installation = new  Installation();
		  
		installation.set('deviceType', Platform.OS);
		await  installation.save();
	};
	
	createInstallation();
}, []);

The useEffect hook triggers the createInstalation method once the App is mounted. To run and test your App connection:

  1. Open your project’s terminal.
  2. Run yarn android or yarn ios or expo start to open the application on your target platform
  3. Done, your React Native App must be up and running. Check the result navigating to Back4App Dashboard and clicking on Installation.

React Native Back4App

To run your App and test your connection, you can also navigate to the project’s directory and run yarn start. This command will compile and enable automatic re-compiles to your app.

It’s done!

At this point, you have learned how to get up and run a React Native application connected to Back4app.