Get Started with React Native SDK

This guide will help you get started with Contentstack React Native SDK to build apps powered by Contentstack.

Prerequisites

To get started with React Native, you will need the following:

  • iOS: Node.js, Watchman, React Native command line interface, and XCode.
  • Android: Node.js, Watchman, React Native command line interface, and Android Studio.
  • NodeJS 4.4.7 or later

SDK installation and setup

Contentstack offers two regions (US and European) as data centers to store customers' account details and data. Both regions are independent of each other and therefore have a dedicated set of instructions to use SDKs offered by Contentstack.

To use SDKs for the European region, you will have to make certain changes in the configuration of the SDK, as detailed below, and the rest of the instructions remain the same.

Open the terminal and install the contentstack module via npm command.

$ npm install contentstack --save

To use the module in your application, you need to first require it

import Contentstack from 'contentstack/react-native'

Initialize SDK

To initialize the SDK, you will need to specify the stack’s API key, delivery token, and name of the environment where you will publish the content.

// Initialize the SDK
var Stack = Contentstack.Stack({
    'api_key': 'YOUR_API_KEY',
    'access_token': 'YOUR_DELIVERY_TOKEN',
    'environment': 'YOUR_ENVIRONMENT_NAME'
});

For Setting the European Region:

To set European region, refer to the code below:

const Stack = new Contentstack({ 'api_key': "", 'access_token': "", 'environment': "", "region": Contentstack.Region.EU})

Once you have initialized the SDK, you can start getting content in your app.

Basic queries

Get a single entry

To get a single entry, specify the content type and the id of the entry.

var Query = Stack.ContentType('blog').Entry("blta464e9fbd048668c")
Query.fetch()
   .then(function success(entry) {
       console.log(entry.get('title')); // Use get() to retrieve field value by providing a field's uniq
       console.log(entry.toJSON()); // You can also use toJSON() to convert the entry result object to JSON. 
   }, function error(err) {
       // err object
   });

Get multiple entries

To retrieve multiple entries of a content type, specify the content type uid. You can also specify search parameters to filter results.

var Query = Stack.ContentType('blog').Query();
Query
   .where("title", "welcome")
   .includeSchema()
   .includeCount()
   .toJSON()
   .find()
   .then(function success(result) {
      // result is array where -
      // result[0] => entry objects
      // result[result.length-1] => entry objects count included only when .includeCount() is queried.
      // result[1] => schema of the content type is included when .includeSchema() is queried.
  }, function error(err) {
     // err object
 });

These were examples of some of the basic queries of the SDK. For advanced queries, refer to Contentstack React Native API reference.

More articles in "Use React Native SDK"

On This Page

top-arrow