JSONStore in React Native applications
improve this page | report issuePrerequisites
- Read the JSONStore parent tutorial
- Make sure the MobileFirst React Native Core SDK was added to the project. Follow the Adding the Mobile Foundation SDK to React-Native applications tutorial.
Jump to:
Adding JSONStore
To add JSONStore plug-in to your React Native application:
- Open a Command-line window and navigate to your React Native project folder.
- Run the command:
npm install react-native-ibm-mobilefirst-jsonstore --save
-
For iOS only, install Mobilefirst Pod dependencies
cd ios && pod install
Basic Usage
Creating a new JSONStore Collection
- 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). - 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
- Use
find
to locate a document inside a collection by using a query. - Use
findAllDocuments()
API for retrieving all the documents inside a collection. - Use
findDocumentById()
andfindDocumentsById()
API to search using the document unique identifier. - Use
findDocuments()
API to query the collection. For querying, you can useJSONStoreQueryPart
class objects to filter the data.
Pass an array of
JSONStoreQueryPart
objects as a parameter tofindDocuments
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 IBM MobileFirst 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 MobileFirst Server.
- Register the app. Go to the
android
directory and run the following command:mfpdev app register
- 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.
-
- Running the app. Return to the root directory and navigate to
iOS
directory and run the command:mfpdev app register
We’re now ready to run the app. To run on android, execute the following command:
react-native run-android
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.