Getting started with the React hook for real time updates using Parse
Welcome to Parse React Native Lib! In this guide, you’ll learn what the Parse React Lib is, how to install and start to use it on your React Native project.
Parse React Native’s goal is to make this experience even better for React Native developers by delivering a light-weight and easy-to-use layer that provides minimal configuration, code re-usability, and native optimizations for Android and iOS.
In this initial guide, you will install and set up the @parse/react-native library on your React Native project.
Parse React Native is currently on the Alpha version. The lib is under testing, so we recommend to proceed with caution. Your feedback is very appreciated, so feel free to use the lib and send us your questions and first impressions by dropping an email to [email protected]
To complete this tutorial, you will need:
Step 1 - Installation
If you don’t have a React Native application, then go ahead and create a new project with
npx package runner using the following command line:
npx react-native init startWithParseRN
@parse/react-native and its peer dependency
parse in your React Native application:
# Using yarn yarn add @parse/react-native parse # Using npm npm install --save @parse/react-native parse
Step 2 - Application Setup
You can find your
App Id and
Dashboard at Back4App Website and clicking on
App Settings >
Core Settings, under
Your subdomain must be enabled at
App Settings >
Core Settings >
Server URL and Live Query. For more information, please check this guide here.
Step 3 - Creating your first Query
Next, you will build your first Query and display it in your App. The
@parse/react-native library exports a
useParseQuery hook, so you don’t waste time looking into how to implement features like offline support, real-time changes, and so on.
It takes a
Parse.Query and returns an object with some props that you can use to access data returned by queries:
When passing a query to the hook, it will first look for cached results that it might have stored. Then, it creates a WebSocket connection to communicate with the Back4app LiveQuery server, which synchronizes automatically. In other words, the offline-first approach and real-time changes are enabled by default.
To check the query state use the
props returned by the hook:
true, indicates the query have subscribed to realtime updates.
true, the query is fetching the results.
true, the query is getting updated results from Back4app servers.
results: This is the data returned from the query.
count: Indicates the number of objects that matched the query.
error: When something goes wrong with the query it returns an error.
reload: Reload your query results.
useParseQuery accepts any
Parse.Query and you can see the full documentation with examples about Parse queries.
Step 4 - Test the App Hook
Now you should be able to run your React Native App and see the results.
# on Android npx react-native run-android # on iOS npx react-native run-ios
Keep in mind that you should add some data to your Back4app project to see some items in your App.
At this point, you have installed
@parse/react-native on your project, configured the connections with Back4App, and written your first Query. In the next guide, you will see one of the main features of this lib how to use it. Let’s continue to “Realtime Changes” to start writing some more queries.