React Native Database

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:

• An app created on Back4App.
• Look at the get npm guide for more info.
• Expo CLI installed following this guide

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

1. Make sure that you have installed the npm in your system.
2. Run npm install in the project, directory to install required to react dependencies.
3. Run npm start in the project, directory to compile, and enable automatic re-compiles to your app.

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. Open your React file at: constants/Keys.js.
2. Go to your app Dashboard at Back4App Website and click on Server Settings.
3. Return to your Keys.js file and paste your App Id and Javascript Key on it.

1.4 — Test your connection

1. Open your project’s terminal.
2. Make sure you have installed the npm dependencies by typing npm install.
3. Run expo start --tunnel
4. Done, the React Native must be installed and you also can see the device going to your dashboard.

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