Create a news app for iOS and/or Android using React Native and Contentstack

Warning: This sample app is no longer maintained. It remains available for reference. If you have questions regarding this, please reach out to our support team and we will do our best to help!

Here’s a quick guide on how to create a news app for iOS and/or Android using React Native and Contentstack.

• Use Xcode 7.0 and later and Mac OS X 10.10.4 and later (for iOS)
• Use latest version of Android Studio (for Android)
• React Native setup
• Contentstack Account

Note: For this tutorial, we have assumed that you are familiar with Contentstack, React Native, iOS, and Android. If not, then please refer to the docs (Contentstack docs and React Native docs) for more details.

In this tutorial, we will first go through the steps involved in configuring Contentstack and then look at the steps required to customize and use the presentation layer.

1. Create a stack

   link

   Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your website. Learn more on how to create a stack.

2. Add a publishing environment

   link

   To add an environment in Contentstack, navigate to Settings -> Environment, and click on the + New Environment tab. Provide a suitable name for your environment, say ‘staging’. Specify the base URL (e.g., http://YourDomainName.com), and select the language (e.g., English - United States). Then, click on Save. Read more about environments.

3. Import content types

   link

   A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

   For this website, two basic content types are required: Category and News. For quick integration, we have already created these content types. You simply need to import them to your stack. (You can also create your own content types. Learn how to do this).

   To import the content types, first, save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the ‘import’ link, and select the JSON file saved on your machine.

   Here’s a brief overview of the content types required for this project.

   • News: This content type lets you add the news content into your app.
   • Category: This content type lets you create the various categories of your news app.

   Download All Content Types

   Now that all the content types are ready, let’s add some content for your news app.

4. Adding content

   link

   Create and publish entries for the ‘News’ and ‘Category’ content types

   Add a few dummy entries for news articles for the ‘News’ content type. Save and publish these entries. Learn how to create and publish entries.

   With this step, you have created sample data for your website. Now, it’s time to use and configure the presentation layer.

5. Set up Xcode / Android and Contentstack React Native SDK

   link

   To set up Xcode / Android Studio and initialize React Native SDK, refer to our React Native SDK documentation.

6. Clone and configure the application

   link

   To get your app up and running quickly, we have created a sample React Native app for this project. You need to download it and change the configuration. Download the app using the command given below:

   $ git clone https://github.com/contentstack/contentstack-react-native-news-app.git
   

   Once you have downloaded the project, add your Contentstack API Key, Delivery Token, and Environment to the project during the SDK initialization step.  (Learn how to find your Stack's API Key and Delivery Token. Read more about Environments.)
   Create `.env` file at root of your project and add following details:

   API_KEY=<API_KEY>
   
   DELIVERY_TOKEN=<DELIVERY_TOKEN>
   
   ENVIRONMENT=<ENVIRONMENT>

   This will initiate your project

7. Build and run your news app

   link

   Now that we have a working project, you can build and run it.

Additional Resource: Flutter is another tool that is used for developing apps for various operating systems. We have built an example app using Flutter with Contentstack, to learn more refer our guide on how to build a Flutter E-commerce App using Contentstack's Dart SDK.