Quickstart

introduction this guide will help you set up and use back4app with a new or existing project using the react native cli you’ll install the parse sdk , initialize it with your app keys, and create your first api call to save and retrieve data from back4app prerequisites to complete this tutorial, you will need an app created 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 installed npx https //www npmjs com/package/npx package runner installed 1 create your react native project there are two main ways to create a react native project react native cli and expo choose based on your development environment and target platform (ios or android) react native cli the instructions depend on your development operating system, and whether you want to start developing for ios or android for more information, check the official documentation here expo install expo cli globally create a new react native project 2 install dependencies in your react native project, install parse javascript sdk and asyncstorage by running parse javascript sdk to integrate your app with back4app servers react native async storage to use parse sdk, an asyncstorage handler is required for ios, also add native asyncstorage support 3 get your app keys after creating your app on back4app, find your app keys under app settings > security & keys you’ll need both the application id and javascript key to connect 4 initialize parse and connect to back4app open index tsx and initialize parse with your application id and javascript key index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 save and retrieve data with parse initialized, create two functions in index tsx to save and fetch data from back4app // 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); } } 6 test your app open your project’s terminal run the project react native cli run npx react native run android npx react native run android or npx react native run ios npx react native run ios to open the application on your target platform expo run expo start expo start , and follow the instructions to view the app in your browser or device troubleshooting some common issues and solutions metro has encountered an error while trying to resolve module “idb keyval’ from file solution go to the metro conf js metro conf js file and change it to this one 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; unable to resolve module ‘eventemitter’ solution go to the file node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js and change this row to this in the same file eventemitter js eventemitter js , change the following row to this issues with babel in case you face any issues with babel, consider updating your babel config js to the following next steps this guide covers the basic setup and data storage with back4app explore parse features, including data storage, real time capabilities, local data storage, cloud functions, authentication, and file storage