React Native

Use Contentstack to power content for your React Native projects

Create React Native-based applications and use the React Native SDK to fetch and deliver content from Contentstack. The SDK uses Content Delivery APIs.

Getting Started

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

Prerequisites

To get started with React Native, you will need:

  • iOS: Node.js, Watchman, React Native command line interface, and XCode. Learn more
  • Android: Node.js, Watchman, React Native command line interface, and Android Studio. Learn more.

SDK installation and setup

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

You will need to specify the API Key, Delivery Token, and Environment Name of your stack to initialize the SDK.

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

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, you need to specify the content type as well as 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, you need to 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 example of some of the basic queries of the SDK. For advanced queries, refer to our API reference documentation by visiting the link given below.

API Reference

Go through our SDK API Reference guide to know about the methods that can be used to query your content in Contentstack.

Read React Native API Reference Guide


Example Apps

To help you get started, we have created some sample applications that are powered by Contentstack React Native SDK. Click on any of the links below to read the tutorials of the app, view app demo, or download the code from GitHub.  

Was this article helpful?
top-arrow