Start your React Native Expo project using a pre-built template
Introduction
In this section, you will learn how to get started with React Native using an Expo template and how to connect it to Back4App in 4 easy steps.
Prerequisites
To complete this tutorial, you will need:
- A Backend Back4App App.
1 - Get the template
To get the template project, download and unzip the source code at our GitHub repository into your machine or clone the project with the git command line.
Run the following command to download and extract the template using CURL:
OR
Run the following command to clone the template using GIT:
2 - Download the app’s dependencies
- Make sure that you have installed npm or yarn in your system.
2. On your terminal, run cd react-native-template-master and open the project's root directory.
3. Run npm install to install dependencies.
In this tutorial, we are using npm to manage dependencies but you are free to use yarn instead.
3 - Set up the app’s credentials
To allow the App to securely connect to Back4App servers, you must provide Parse JavaScript SDK with the app’s credentials.
- Locate your App ID and Javascript Key credentials by navigating to your app Dashboard > App Settings > Security & Keys.
On the project’s root directory, open the file at: app/(tabs)/index.tsx.
The file should look like this:
Parse.initialize(
'YOUR APPLICATION ID HERE', // Replace with your Parse Application ID
'YOUR JAVASCRIPT KEY HERE' // Replace with your Parse JavaScript key
);
Parse.serverURL = 'https://parseapi.back4app.com/'; Copy and paste your App Id and Javascript Key on it.
4 - Test your connection
Inside the App.js of your template project, there is a function that creates a Person object and another for fetching People of your App to your Back4App Database.
// Function to create a new Person
async function createPerson() {
setLoading(true);
setError(null);
try {
const PersonObject = Parse.Object.extend("Person");
const personObject = new PersonObject();
personObject.set("name", "Back4App User");
const result = await personObject.save();
setResult(`Object created with ID: ${result.id}`);
} catch (error) {
setError(error instanceof Error ? error.message : 'Unknown error');
} finally {
setLoading(false);
}
}
async function fetchPeople() {
setLoading(true);
setError(null);
try {
const PersonObject = Parse.Object.extend("Person");
const query = new Parse.Query(PersonObject);
const results = await query.find();
const names = results.map(result => ({
objectId: result.id,
name: result.get("name"),
}));
setResult(`Fetched names: ${JSON.stringify(names, null, 2)}`);
} catch (error) {
setError(error instanceof Error ? error.message : 'Unknown error');
} finally {
setLoading(false);
}
}To run and test your App connection:
- Open your project’s terminal.
- Runnpm run android or npm run ios or npm run start to open the application on your target platform

It’s done!
At this point, you have learned how to get up and run a React Native application connected to Back4app.