React Native on Back4App

In this article, you will learn how to Save and Read data on Back4App for a React Native App.

Prerequisites

To complete this tutorial, you will need:

Note: Follow the New Parse App tutorial to learn how to create a Parse App on Back4App.

1-Connection to Back4App API

1.1 — Get the template

Download the template at our GitHub repository. You can do that using the following command line:

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

1.2— Download app’s dependencies

Look at the get npm guide for more info.

1.3 — Set up the app’s credentials

Update strings values for app ID and JavaScript Key to set up the app’s credentials. Parse JavaScript SDK uses these settings to connect your app to Back4App servers.

1.4 — Test your connection

2-Saving Data

2.1 — Creating an Object

Storing data on Back4App is built around Parse.Object. Each Object contains key-value pairs of JSON-compatible data. This data is schemaless, which means that you don’t need to specify ahead of time what keys exist on each Parse.Object. You’ve just to set a given key-value pairs you want, and Back4App will store it.

Let’s say you need to save the names and ages of your social media App. A single Object could contain:

1 name: John Snow, age: 27

Keys(name, age) must be alphanumeric strings. Values can be strings, numbers, booleans, or even arrays and dictionaries — anything that can be JSON-encoded.

Each Parse.Object is an instance of a specific subclass with a class name that you can use to distinguish different sorts of data. For example, we could call the age object a Person.

We recommend that you NameYourClassesLikeThis and nameYourKeysLikeThis, just to keep your code looking pretty.

Let’s create a new subclass using the Parse.Object.extend method.

Now let’s create some new attributes to this new person Object

2.2 — Create a Save Function

Now let’s create a simple function inside the App.js file.

2.3— Call the Function

Now let’s call our function. You can do it using a single Button inside your React Native Application as shown below.

Your App will look like this:

Then press save and you’ll see the confirmation message.

2.4— Check the result on Back4App Dashboard

Go to your App Dashboard on Back4App. Navigate to the class Person(that was created dynamically) and check its structure and the data you’ve saved.

3-Reading Data

3.1 — Reading an Object

Saving data to the Back4App Database is simple, but it’s even easier to get that data out again. If the Parse.Object has been uploaded to the server, you can use the objectId to get it using a Parse.Query:

Let’s say you want to retrieve the Jonh Snow data you have stored on your Social Media App. Go to your Back4App App Dashboard and copy the objectId.

1 objectId: b90N1cYpR8

2 .1— Create a Read Function

Now let’s create a simple function inside the App.js file to retrieve this objectIdinformation.

Note that the query.get method returned a Person object then we use the .get("columnNameHere") to retrieve each attribute.

3.3 — Call the Function

Now let’s call our function. You can do it using another single Button inside your React Native Application as shown below. We’ve inserted the Read Button just below the Save Button.

Your App will look like this:

Then press Read and you’ll see the confirmation message.

It's done

Is it easy? Leave your comments :)

Happy Coding

Store and query relational data on the cloud. Make it accessible over GraphQL and REST with a scalable, open-source backend, based on the Parse Platform.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store