In this section you will learn how to get started with Back4App using an existing or new project using the React Native CLI. You will install the Parse SDK, initialize Parse using your App keys and make your first API Call saving and reading data objects from Back4App.
There are two possible ways to create a project for React Native: Expo and React Native CLI.
React Native CLI
The instructions depend on your development operating system, and whether you want to start developing for iOS or Android. For more information, check the official documentation here.
Expo
Install Expo CLI globally
npm install -g expo-cli
Create a new React Native project
expo init B4aProject
cd B4aProject
expo start
1 - Install dependencies
On your React Native project let’s install the Parse Javascript SDK and the Async Storage. Make sure that you have installed npm or yarn in your system.
Back4App Parse SDK - To integrate your App with Back4app servers.
React Native Async Storage - To use Parse SDK, an AsyncStorage handler is required.
Run the following command on your Project root directory:
For iOS, use the CocoaPods to add the native RNAsyncStorage to your project:
cd ios & pod install
We are using @react-native-async-storage/async-storage but you can get your favorite AsyncStorage handler.
2 - Get your App Keys
After creating your App on Back4App, go to your App’s Dashboard and get your App Keys under App Settings->Security & Keys(check the image below). Note that you will always need two keys to connect with Back4App, the Application ID and Javascript KEY.
3 - Initialize Parse and connect to Back4App
Go to your App.js and initialize the Parse SDK using both the Application ID and the Javascript KEY (check the previous step).
App.js
1// In a React Native application2import Parse from"parse/react-native.js";3import AsyncStorage from'@react-native-async-storage/async-storage';456//Initializing the SDK. 7 Parse.setAsyncStorage(AsyncStorage);8//You need to copy BOTH the the Application ID and the Javascript Key from: Dashboard->App Settings->Security & Keys 9 Parse.initialize('YOUR_APPLICATION_ID_HERE','YOUR_JAVASCRIPT_KEY_HERE');10 Parse.serverURL ='https://parseapi.back4app.com/';
4 - Save and Read a simple Data Object
Your App is initialized and can securely connect to Back4app cloud services. Let’s create two simple functions inside the App.js to save and retrieve data to your Back4App Database.
JS
1//This funciton will save a simple Person object2asyncfunctionaddPerson(){3try{4//create a new Parse Object instance5const newPerson =newParse.Object('Person');6//define the attributes you want for your Object7 newPerson.set('name','John');8 newPerson.set('email','[email protected]');9//save it on Back4App Data Store10await newPerson.save();11}catch(error){12 console.log('Error saving new person: ', error);13}14}
The above addNewPerson method creates a new Parse.Object representing a person class, sets its properties, then saves it on Back4app cloud data store. Next, implement fetchPerson to fetch the person object you saved on Back4app.
JS
1const[person, setPerson]=useState(newParse.Object('Person'));2//This function will retrieve a Person which the name is John3asyncfunctionfetchPerson(){4//create your Parse Query using the Person Class you've created5let query =newParse.Query('Person');6//run the query to retrieve all objects on Person class, optionally you can add your filters7let queryResult =await query.findAll();8//pick the first result 9const currentPerson = queryResult[0];10//access the Parse Object attributes11 console.log('person id: ', currentPerson.get('id'));12 console.log('person name: ', currentPerson.get('name'));13 console.log('person email: ', currentPerson.get('email'));14setPerson(currentPerson);15}
The above method will query a Parse.Object which has the attribute name equals to John. When the query resolves, you will be able to access the person attibutes using the get method.
At this point, your App.js file should look like this:
App.js
1import React,{ useEffect, useState }from'react';2import{ View, Button, Text, SafeAreaView }from'react-native';34// In a React Native application5import Parse from'parse/react-native.js';6import AsyncStorage from'@react-native-async-storage/async-storage';789//Initializing the SDK10 Parse.setAsyncStorage(AsyncStorage);11//Paste below the Back4App Application ID AND the JavaScript KEY12 Parse.initialize('YOUR_APPLICATION_ID_HERE','YOUR_JAVASCRIPT_KEY_HERE');13//Point to Back4App Parse API address 14 Parse.serverURL ='https://parseapi.back4app.com/';1516constApp=()=>{17const[person, setPerson]=useState(newParse.Object('Person'));1819asyncfunctionaddPerson(){20try{21//create a new Parse Object instance22const newPerson =newParse.Object('Person');23//define the attributes you want for your Object24 newPerson.set('name','John');25 newPerson.set('email','[email protected]');26//save it on Back4App Data Store27await newPerson.save();28}catch(error){29 console.log('Error saving new person: ', error);30}31}3233asyncfunctionfetchPerson(){34//create your Parse Query using the Person Class you've created35let query =newParse.Query('Person');36//run the query to retrieve all objects on Person class, optionally you can add your filters37let queryResult =await query.find();38//the resul is an arry of objects. Pick the first result 39const currentPerson = queryResult[0];40//access the Parse Object attributes41 console.log('person id: ', currentPerson.get('id'));42 console.log('person name: ', currentPerson.get('name'));43 console.log('person email: ', currentPerson.get('email'));44setPerson(currentPerson);45}4647useEffect(()=>{48fetchPerson()49},[]);5051return(52<SafeAreaView>53<View>54<Text>Name:{person.get('name')}</Text>55<Text>email:{person.get('email')}</Text>56<Button title='Add person' onPress={addPerson}/>57<Button title='Fetch person' onPress={fetchPerson}/>58{/* Your other components here ....*/}59</View>60</SafeAreaView>61)6263}6465exportdefault App;
5 - Test your App
Open your project’s terminal.
Run the project.
React Native CLI
Run npx react-native run-android or npx react-native run-ios to open the application on your target platform. Then, click the button to add a new person first, then click to fetch this person.
You’ve saved and retrieved a data object from Back4App. You can also check the data on your App Dashboard and clicking on Person class.
Expo
Run expo start, and follow the instructions whether you want to check it on your browser, or on your device using Expo app.
You’ve saved and retrieved a data object from Back4App. You can also check the data on your App Dashboard and clicking on Person class.
In case you don’t have a device or a simulator to test it, you can also run it on a web page.
Run npm start and press w.
TroubleShooting
Some common error messages when running your project:
Metro has encountered an error: while trying to resolve module “idb-keyval’ from file
Solution: Go to the metro.conf.js file and change it to this one:
Solution: Go to the file: node_modules\parse\lib\react-native\EventEmitter.js and change this row:
var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');
to this:
import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
In the same file EventEmitter.js, change the following row:
module.exports = EventEmitter;
to this:
export default EventEmitter;
What to do next
As you have seen, the easiest way to integrate Back4App into your React Native project is through the Parse Javascript SDK. The Parse SDK delivers an excellent development experience through a lightweight and easy-to-use layer that provides minimal configuration, code re-usability, and native optimizations for Android and iOS.
You will find on the following guides how to use features like data storage(relational), real-time capabilities(using a React Hook), local data storage, cloud functions(fully integrated with your database), authentication, file storage, and more. As a next step, we recommend you explore the data storage capabilities and start enjoying the power of Parse Queries.