@parse/react-native (alpha)
An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React Native applications.
Getting Started
First, install the parse and @parse/react-native npm modules into your React Native application.
npm install parse @parse/react-native --save
In your App.js
file, import and initialize Parse:
import { initializeParse } from '@parse/react-native';
initializeParse(
'YOUR_SERVER_URL',
'YOUR_APPLICATION_ID',
'YOUR_JAVASCRIPT_KEY'
);
Now you are ready to use a Parse Query:
import React from 'react';
import { Button, Text, View } from 'react-native';
import Parse from 'parse/react-native.js';
import { useParseQuery } from '@parse/react-native';
const SomeComponent = () => {
const parseQuery = new Parse.Query('SomeClass');
const {
isLive,
isLoading,
isSyncing,
results,
count,
error,
reload
} = useParseQuery(
parseQuery,
{
enabled: true,
enableLocalDatastore: true,
enableLiveQuery: true
}
);
return (
<View>
{isLoading && (
<View>
<Text>Loading...</Text>
</View>
)}
{isLive && (
<View>
<Text>Live!</Text>
</View>
)}
{isSyncing && (
<View>
<Text>Syncing...</Text>
</View>
)}
{results && (
<View>
{results.map(result => (
<View>
<Text key={result.id}>
{result.get('someField')}
</Text>
</View>
))}
</View>
)}
<View>
<Text>{count}</Text>
</View>
{error && (
<View>
<Text>{error.message}</Text>
</View>
)}
<View>
<Button
onPress={reload}
title="Reload"
/>
</View>
</View>
);
};
export default SomeComponent;
Learning More
This package aims to provide easier access to a Parse Server backend when developing React Native applications. It was built on top of the official Parse JS SDK. These two libraries should be used together and you can refer to the sdk documentation in order to learn more about Parse Objects, Parse Queries, and more:
Example
See a Todo List Example.