React Native

Install Parse SDK on a React Native CLI project

Introduction

In this section you will learn how to get started with Back4App using an existing or new project using the React Native CLI

Prerequisites

To complete this tutorial, you will need:

• An app created on Back4App;
• Npm or yarn installed;
• Npx package runner installed.

Step 1 - Creating a new React Native project

Create a new project with npx package runner using the following command line:

npx react-native init startWithBack4app

This method is preferred since you don’t need to install global packages.

Step 2 - Install dependencies

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

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

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

To make your React Native App connect to Back4app cloud services, we also need to install the dependencies we will use in the project. These dependencies are:

• Back4App Parse SDK - To integrate your App with Back4app servers.
• React Native Async Storage - To use Parse SDK, an AsyncStorage handler is required.

On your terminal, run cd startWithBack4app to open the project’s root directory. Then, run the following command to install dependencies:

yarn add parse @react-native-community/async-storage

Use CocoaPods to add the native RNAsyncStorage to your project:

cd ios & npx pod-install

We are using @react-native-community/async-storage but you can get your favorite AsyncStorage handler.

Step 3 - Setting up Parse SDK

To allow the App to securely connect to Back4App servers, you must provide Parse JavaScript SDK with app’s credentials. This requires updating strings values for app ID and JavaScript Key.

1. Locate your App Id and Javascript Key credentials navigating to your app Dashboard at Back4App Website and clicking on Server Settings.

2. On the project’s root directory, let’s create a new file at: constants/Keys.js with the following content:

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

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

In your App.js file initialize Parse SDK:

1
2
3
4
5
6
7
8
9
// In a React Native application
import Parse from "parse/react-native.js";
import AsyncStorage from '@react-native-community/async-storage';
import keys from './constants/Keys';

//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(keys.applicationId, keys.javascriptKey);
Parse.serverURL = keys.serverURL;

Your App is initialized and can securely connect to Back4app cloud services. Let’s create a simple function inside the App.js that registers installations of your App to your Back4App Database.

At this point, your App.js file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// In a React Native application
import Parse from "parse/react-native.js";
import AsyncStorage from '@react-native-community/async-storage';
import keys from './constants/Keys';

//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(keys.applicationId, keys.javascriptKey);
Parse.serverURL = keys.serverURL;

const App = () => {
 useEffect(() => {
  createInstallation = async () => {
	 const Installation = Parse.Object.extend(Parse.Installation);
	 const installation = new Installation();
		  
	 installation.set('deviceType', Platform.OS);
	 await installation.save();
	};
	
	createInstallation();
}, []);

return (
	<View> {/* Your components here ....*/} </View>
)

}

export default App;

Step 4 - Test your connection

1. Open your project’s terminal.

2. Run yarn android or yarn ios to open the application on your target platform

3. Done, the React Native Parse SDK must be installed and you also can see the device connected navigating to Back4App Dashboard and clicking on Instalation.

It’s done!

At this point, you have learned how to get started with React Native app