React Native
Parse SDK (REST)
Start your React Native Expo project using a pre-built template
9 min
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 note follow the new parse app tutorial to learn how to create a parse app on back4app npm or yarn installed on your system expo cli installed following this guide 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 npm or yarn yarn in your system look at the get npm or get yarn guides for more info 2\ on your terminal, run cd react native template master cd react native template master and open the project's root directory 3\ run npm install 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 app id and javascript key javascript key credentials by navigating to your app dashboard dashboard > app settings app settings > security & keys security & keys on the project’s root directory, open the file at app/(tabs)/index tsx app/(tabs)/index tsx the file should look like this index tsx 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 app id and javascript key javascript key on it 4 test your connection inside the app js 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 index tsx // 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 run npm run android npm run android or npm run ios npm run ios or npm run start 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