JavaScript

Save Data on your React Native App

Introduction

In this section you will learn how to save your React Native App Data on Back4App.

Prerequisites

To complete this tutorial, you will need:

Step 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.

1
2
3
4
5
6
7
    // Simple syntax to create a new subclass of Parse.Object.
    var Person = Parse.Object.extend("Person");

    // Create a new instance of that class.
    var person = new Person();

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

1
2
3
4
  person.set("name", "John Snow");
  person.set("age", 27);

Step 2 - Create a Save Function

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    saveNewPerson = async () => {
    
        var Person = Parse.Object.extend("Person");
        var person = new Person();

        person.set("name", "John Snow");
        person.set("age", 27);
        try{
            let result = await person.save()
            alert('New object created with objectId: ' + result.id);
        }catch(error){
            alert('Failed to create new object, with error code: ' + error.message);
        }
      
    }   

Step 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>React Native on Back4App</Text>
                <Text style={styles.instructions}>Saving new objects tutorial</Text>
            
                <TouchableOpacity onPress={() => this.saveNewPerson() } style={styles.button}>
                <Text style={styles.buttonText}>Save</Text>
                
            </TouchableOpacity>
                <Text style={styles.instructions}>{instructions}</Text>
            </View>
        );
    }
    }

Your App will look like this:

React Native Back4App

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

React Native Save Data Confirmation

Step 4 - Check Back4App Dashnboard

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

React Native Save Data Confirmation

It’s done!

At this point, you have saved your first data on Back4App. On the next tutorial we’ll show you how to read it.