React Native

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 a JSON-style Parse.Object. 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.

Parse.Object is a superclass which you can use structure your app data by creating subclasses. Therefore,
Each object stored on Back4app 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 an attribute of 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.
    const Person = Parse.Object.extend("Person");

    // Create a new instance of that class.
    const 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

    async function saveNewPerson() {
        const Person = Parse.Object.extend("Person");
        const 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

return (
  <View style={styles.container}>
      <Text style={styles.title}>React Native on Back4App</Text>
      <Text>Reading objects tutorial</Text>
      <TouchableOpacity onPress={saveNewPerson} style={styles.button}>
        <Text style={styles.buttonText}>Save</Text>
      </TouchableOpacity>
    <StatusBar style="auto" />
  </View>
);

// Remember to add some styles at the end of your App.js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  },  
  button: {
    backgroundColor: '#414BFB',
    padding: 10,
    borderRadius: 5,
    margin: 10,
  },
  buttonText: {
    color: '#fff'
  }
});

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.