JSONStore in React Native applications

Prerequisites

• Read the JSONStore parent tutorial
• Make sure the PMF React Native Core SDK was added to the project.

Jump to:

• Adding JSONStore
• Basic Usage
• Sample application

Adding JSONStore

To add JSONStore plug-in to your React Native application:

1. Open a Command-line window and navigate to your React Native project folder.
2. Run the command:

    npm install react-native-ibm-mobilefirst-jsonstore --save
    npm install <path of plugin.tgz> --save
   

3. For iOS only, install the Persistent Mobile Foundation Pod dependencies

   cd ios && pod install 
   

Basic Usage

Creating a new JSONStore Collection

1. We use JSONStoreCollection class to create instances of JSONStore. We can also set additional configuration to this newly created JSONStore Collection (eg. setting search fields).
2. To start interacting with an existing JSONStore collection (eg: adding or removing data) we need to Open the collection. We use openCollections() API to do this.

   var collection = new JSONStoreCollection('people');
   WLJSONStore.openCollections(['people'])
   .then(res => {
   	// handle success
   }).catch(err => {
   	// handle failure
   });
   

Add

Use addData() API to store JSON Data in a collection.

var data = { "name": "John", age: 28 };
var collection = new JSONStoreCollection('people');
collection.addData(data)
.then(res => {
  // handle success
}).catch(err => {
  // handle failure
});

You can add a single JSON object or an Array of JSON objects using this API.

Find

1. Use find to locate a document inside a collection by using a query.
2. Use findAllDocuments() API for retrieving all the documents inside a collection.
3. Use findDocumentById() and findDocumentsById() API to search using the document unique identifier.
4. Use findDocuments() API to query the collection. For querying, you can use JSONStoreQueryPart class objects to filter the data.

Pass an array of JSONStoreQueryPart objects as a parameter to findDocuments API.

var collection = new JSONStoreCollection('people');
var query = new JSONStoreQueryPart();
query.addEqual("name", "John");
collection.findDocuments([query])
.then(res => {
	// handle success
}).catch(err => {
	// handle failure
});

Remove

Use remove to delete a document from a collection.

var id = 1; // for example
var collection = new JSONStoreCollection('people');
collection.removeDocumentById(id)
.then(res => {
	// handle success
}).catch(err => {
	// handle failure     
});

Remove Collection

Use removeCollection to delete all the documents that are stored inside a collection. This operation is similar to dropping a table in database terms.

var collection = new JSONStoreCollection('people');
collection.removeCollection()
.then(res => {
	// handle success
}).catch(err => {
	// handle failure
});

Sample app for the Persistent Mobile Foundation JSONStore

Download the sample here.

Running the Sample

Within the sample’s root directory, run the following command, which installs all the project dependencies:

npm install

Note: Make sure your mfpclient.properties and mfpclient.plist are pointing to correct the Persistent Mobile Foundation Server.

1. Register the app. Go to the android directory and run the following command:

    pmfdev app register
   

2. Configuring the app. (For Android only)

   • Open android/app/src/main/AndroidManifest.xml file from React Native project root directory.
     Add the following line to the <manifest> tag:
     xmlns:tools="http://schemas.android.com/tools"
     Add the following line to the <application> tag:
     tools:replace="android:allowBackup"
     
     This step is required by react-native-ibm-mobilefirst library.
     

   • Open android/app/build.gradle file from the React Native project root directory.
     Add the following code inside the android {} :
     

     packagingOptions{
     	exclude 'META-INF/ASL2.0'
     }
     

     This step is required by the react-native-ibm-mobilefirst-jsonstore library.

3. Running the app. Return to the root directory and navigate to iOS directory and run the command: pmfdev app register

We’re now ready to run the app. To run on android, execute the following command:

react-native run-android