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 four regions North America (NA), Europe (EU), Azure North America (AZURE_NA), and Azure Europe (AZURE_EU) as data centers to store customers' account details and data. These 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 Europe, Azure NA, or Azure EU 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',
    'delivery_token': 'YOUR_DELIVERY_TOKEN',
    'environment': 'YOUR_ENVIRONMENT_NAME'
});

For Setting other Regions:

Refer the below code if you want to use the Europe, Azure North America, or Azure Europe region:

const Stack = new Contentstack({ 'api_key': "stack_api_key", 'access_token': "delivery_token", 'environment': "environment_name", "region": Contentstack.Region.EU}) //For Europe

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

Basic queries

Contentstack SDKs let you interact with the Content Delivery APIs and retrieve content from Contentstack. They are read-only in nature. The SDKs fetch and deliver content from the nearest server via Fastly, our powerful and robust CDN.

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.

Note: Currently, the React Native SDK does not support multiple content types referencing in a single query. For more information on how to query entries and assets, refer the Queries section of our Content Delivery API documentation.

Paginating Responses

In a single instance, the Get Multiple Entries query will retrieve only the first 100 items of the specified content type. You can paginate and retrieve the rest of the items in batches using the skip and limit parameters in subsequent requests.

const Stack = Contentstack.Stack("api_key", "delivery_token", "environment_name");
let blogQuery = Stack.ContentType('example').Query();
         let data = blogQuery.skip(20).limit(20).find()
         data.then(function(result) {
      },function (error) {
         // error function
     })

Limitations

• We have a URL size limitation of 8KB on API Requests that hit our CDN services. Any Request URL that goes above this size limit will receive the 400 - Bad request error response. Please make sure you limit the size of your API Requests.
• The React Native SDK does not support multiple content types referencing in a single query.
• Currently, the React Native SDK does not yet support querying Global Field schemas (All Global Fields and Single Global Field). You can include these details when querying content type details (All Content Types and Single Content Type) with the include_global_field_schema query parameter.

More Resources

• React Native News App
• React Native API Reference
• React Native SDK Changelog