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 https //www back4app com/docs/get started/new parse app to learn how to create a parse app on back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm or yarn https //classic yarnpkg com/en/docs/install installed on your system expo cli installed following this guide https //docs expo io/get started/installation/?redirected 1 get the template to get the template project, download and unzip the source code at our github repository https //github com/templates back4app/react native template into your machine or clone the project with the git command line run the following command to download and extract the template using curl curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip or run the following command to clone the template using git git clone https //github com/templates back4app/react native template 2 download the app’s dependencies make sure that you have installed \npm\ or \yarn\ in your system look at the get npm https //docs npmjs com/getting started or get yarn https //classic yarnpkg com/en/docs/install#windows stable guides for more info 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 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\ 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 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\ 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