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.
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.
-
Locate your
App Id
andJavascript Key
credentials navigating to your appDashboard
at Back4App Website and clicking onServer Settings
. -
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/'
}
- Copy and paste your
App Id
andJavascript 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
-
Open your project’s terminal.
-
Run
yarn android
oryarn ios
to open the application on your target platform -
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