Quickstarters
How to Build a CRUD App with React Native?

30min
Overview
In this tutorial, you'll learn how to craft a React Native application that performs essential CRUD (create, read, update, delete) operations using Back4app as your cloud backend. 
This guide will walk you through creating a project in Back4app, setting up a flexible data model, and integrating your React Native app with the backend using RESTful APIs.
Initially, you'll establish a Back4app project titled Basic-CRUD-App-ReactNative to serve as your backend. You will then design your data schema by manually defining classes and fields in the Back4app dashboard or using the integrated AI Agent for assistance.
After configuring your backend, you will use the Back4app Admin App, which offers a user-friendly drag and drop interface for managing your data, making it easier to perform CRUD operations.
By the conclusion of this guide, you will have a fully functional React Native application that can create, read, update, and delete records while also supporting secure user authentication and data handling.
Main Benefits
Build a Mobile App: Learn to develop a React Native CRUD application with a robust backend.
Backend Integration: Understand how to design and integrate a scalable data model using Back4app.
Effortless Data Management: Use Back4app’s Admin App to quickly manage your application's data.
Secure Operations: Implement secure user authentication and data privacy measures.
﻿
Prerequisites
Before you begin, make sure you have:
An active Back4app account with a new project set up.
Need help? Refer to Getting Started with Back4app.
A React Native development environment.
Install tools such as Node.js, npm (or yarn), and the React Native CLI. Expo can also be used for rapid prototyping.
Familiarity with React, JavaScript, and REST APIs.
Consult the React Native documentation if you need a refresher.
﻿
Step 1 – Setting Up Your Back4app Project
Creating Your Back4app Project
Log in to your Back4app account.
Click the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-ReactNative and follow the prompts to complete the setup.
Create New Project
﻿
After your project is created, it will appear on your dashboard, laying the foundation for your backend configuration.
﻿
Step 2 – Crafting Your Data Model
Structuring Your Data
For this CRUD app, you'll define a couple of collections within your Back4app project. Below are examples of the key collections and fields necessary to support the core CRUD functionalities.
1. Collection: Items
This collection stores the details for each item.
Field
Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
Name or title of the item.
description
String
A brief explanation of the item.
createdAt
Date
Timestamp for when the item was added.
updatedAt
Date
Timestamp for the most recent update.
2. Collection: Users
This collection manages user credentials and authentication information.
Field
Type
Description
_id
ObjectId
Automatically generated unique identifier.
username
String
Unique identifier for the user.
email
String
User’s email address (must be unique).
passwordHash
String
Hashed password for secure login.
createdAt
Date
Time when the account was created.
updatedAt
Date
Time when the account details were last updated.
You can define these collections and their fields via the Back4app dashboard.
Create New Class
﻿
You can add new fields by selecting the data type, entering a field name, setting a default value, and marking whether it’s required.
Create Column
﻿
Using the Back4app AI Agent for Schema Generation
The integrated AI Agent in Back4app can automatically construct your data schema from a simple description. This tool helps streamline your project setup and ensures your data model supports the necessary CRUD operations.
How to Use the AI Agent:
Open the AI Agent:
Go to your project settings on the Back4app dashboard and select the AI Agent.
Describe Your Schema:
Input a detailed description of the collections and fields you need.
Review and Confirm:
The AI Agent will suggest a schema; review it and confirm to apply the configuration.
Sample Prompt:
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
This method saves you time and ensures consistency in your data model.
﻿
Step 3 – Using the Admin App for Data Management
Overview of the Admin App
The Back4app Admin App provides a no-code interface that simplifies backend data management. Its drag and drop functionality allows you to perform CRUD operations—adding, viewing, updating, and deleting records—without writing complex queries.
Enabling the Admin App
Go to the “More” menu in your Back4app dashboard.
Click on “Admin App” and then select “Enable Admin App.”
Set Up Admin Credentials:
Create your initial admin account, which also sets up system roles like B4aAdminUser.
Enable Admin App
﻿
Once activated, log into the Admin App to manage your application data.
Admin App Dashboard
﻿
Managing CRUD Operations via the Admin App
Within the Admin App, you can:
Insert New Records: Use the “Add Record” function in any collection (e.g., Items) to introduce new data.
Examine/Modify Records: Select a record to review details or update its fields.
Delete Records: Remove entries that are no longer necessary.
This streamlined tool improves your workflow by making data management straightforward.
﻿
Step 4 – Integrating Your React Native App with Back4app
After setting up your backend, it’s time to connect your React Native application to Back4app.
Using REST APIs for Integration
Although there is a Parse SDK available for JavaScript, in a React Native environment you may opt to use standard REST API calls for flexibility. Below is an example of how to perform CRUD operations using the JavaScript fetch API.
Example: Fetching Items
JS
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}

export default fetchItems;
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}

export default fetchItems;
﻿
Example: Creating a New Item
JS
async function createItem(title, description) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const data = await response.json();
    console.log('Item created:', data);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}

export { createItem };
async function createItem(title, description) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const data = await response.json();
    console.log('Item created:', data);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}

export { createItem };
﻿
You can similarly implement functions for updating and deleting items using the appropriate HTTP methods (PUT/POST for updates and DELETE for removals).
Integrate these functions into your React Native components as needed to complete your CRUD operations.
﻿
Step 5 – Enhancing Backend Security
Configuring Access Control Lists (ACLs)
Protect your records by setting up ACLs. For instance, to ensure that an item is only accessible by its owner:
JS
async function createPrivateItem(title, description, ownerId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [ownerId]: { "read": true, "write": true }
    };

    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description, ACL: acl })
    });
    const data = await response.json();
    console.log('Private item created:', data);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}

export { createPrivateItem };
async function createPrivateItem(title, description, ownerId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [ownerId]: { "read": true, "write": true }
    };

    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description, ACL: acl })
    });
    const data = await response.json();
    console.log('Private item created:', data);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}

export { createPrivateItem };
﻿
Setting Class-Level Permissions (CLPs)
Adjust the default permissions for your collections through the Back4app dashboard. This ensures that only authenticated users can interact with certain data types.
﻿
Step 6 – Implementing User Authentication
Configuring User Management
Back4app leverages a built-in Users collection to handle authentication. In your React Native app, you can manage user registration and login using REST API calls.
Example: User Registration
JS
async function signUp(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const data = await response.json();
    console.log('User registered successfully:', data);
  } catch (error) {
    console.error('Error during sign up:', error);
  }
}

export { signUp };
async function signUp(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const data = await response.json();
    console.log('User registered successfully:', data);
  } catch (error) {
    console.error('Error during sign up:', error);
  }
}

export { signUp };
﻿
Example: User Login
JS
async function logIn(username, password) {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Logged in user:', data);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

export { logIn };
async function logIn(username, password) {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Logged in user:', data);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

export { logIn };
﻿
This approach can be extended to include password resets, session management, and additional authentication features.
﻿
Conclusion and Next Steps
Great work! You have successfully built a React Native CRUD application integrated with Back4app. 
In this guide, you set up a project named Basic-CRUD-App-ReactNative, designed your data schema for Items and Users, and managed your backend with the Back4app Admin App. 
Moreover, you connected your app via REST APIs and implemented vital security measures and user authentication.
What’s Next?
Expand Your App:
Add more features such as advanced filtering, detailed item views, or real-time data updates.
Enhance Backend Capabilities:
Explore cloud functions, third-party integrations, or fine-tune your access control policies.
Keep Learning:
Check out the Back4app documentation and additional tutorials to further refine your skills.
Happy coding and best of luck with your React Native project!
Field	Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	Name or title of the item.
description	String	A brief explanation of the item.
createdAt	Date	Timestamp for when the item was added.
updatedAt	Date	Timestamp for the most recent update.
Field	Type	Description
_id	ObjectId	Automatically generated unique identifier.
username	String	Unique identifier for the user.
email	String	User’s email address (must be unique).
passwordHash	String	Hashed password for secure login.
createdAt	Date	Time when the account was created.
updatedAt	Date	Time when the account details were last updated.
Updated 19 Feb 2025
Did this page help you?
How to Build a CRUD App with Flutter?
How to Build a CRUD App for iOS with Objective-C?