@parse/react-native
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1-alpha.16 • Public • Published

    Parse Platform

    @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.

    NPM Version

    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, // Indicates that Parse Live Query is connected
        isLoading, // Indicates that the initial load is being processed
        isSyncing, // Indicates that the library is getting the latest data from Parse Server
        results, // Stores the current results in an array of Parse Objects
        count, // Stores the current results count
        error, // Stores any error
        reload // Function that can be used to reload the data
      } = useParseQuery(
        parseQuery, // The Parse Query to be used
        {
          enableLocalDatastore: true, // Enables cache in local datastore (default: true)
          enableLiveQuery: true // Enables live query for real-time update (default: 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.

    Install

    npm i @parse/react-native

    DownloadsWeekly Downloads

    86

    Version

    0.0.1-alpha.16

    License

    MIT

    Unpacked Size

    6.94 kB

    Total Files

    6

    Last publish

    Collaborators

    • dplewis
    • davimacedo
    • mtrezza
    • parseadmin
    • tom9856