React Native and Drupal — App integration


Main commands

(You can also check

After cloning the project. On the project folder. Run:

npm install
#To download the node packages into the node_modules folder.

If you don’t have un-met dependencies. This should be the main command to run the app with the ios simulator:
react-native start iOS

This other command is the generic one (also for Android)
npm start

# Run on a iOS device
react-native run-ios --device

# Run on the iOS simulator

The first time you run it, If it doesn’t work, open the xCode project with xCode and build it using the play button, it will open a default terminal.

Then you can close the XCode.

Node.js packages – global installation :

# related to lint
npm install -g eslint
npm install -g eslint-plugin-react
npm install -g babel-eslint
npm install -g eslint-config-airbnb
npm install -g eslint-plugin-jsx-a11y
npm install -g eslint-plugin-import


When things go wrong and you feel you need to do a reset:

npm run clean

It’s an alias for:
rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean --force

Other commands

Check the package.json file and “scripts” to check for other commands aliases.

npm run ios


To debug:

Project organization

Located at (work in progress…)

The initial project was migrated to an “Ignite” template.

The initial *Create React Native App* was also ejected. This was needed in order to enable the Push Notifications (Xcode project code was modified). You can’t use Expo on the current application because it was ejected. The current application has the same main build as it was created with the init option.


To discuss / prioritize.
Should we keep a on the github repo?

Push Notifications. Work in progress. Add functionality for remote notifications (Certificates installed). . Local notifications are already working.
Theming. Set the correct default padding, fonts, etc. for all the screens.
“Offline first” implementation. Use redux and redux-offline.
Main title on the site name header


General settings. Improve them, use
Add new functions to get the content from Drupal
Add user section. Implement Oauth authentication.

Containers and Navigation

Two options/approaches:
React Navigation (JavaScript) –
React Native Navigation (Native) –
Comparison here:

The App/Containers folder contains the component that are used as a screen.

We are currently using the “react-navigation” library to implement the navigation between screens and the tab navigator.

The main settings are defined:

on App/Navigation/AppNavigation.js (We define the TabNavigator and the StackNavigator screens).

on each Component Screen. For instance,on App/Containers/ArticlesFeed.js
You’ll see the navigationOptions parameters.

You can create a new screen with
ignite generate screen NewScreen


There’s a Themes folder with the theming files. The main one is the ApplicationStyles.js

Drupal API

The main goal is to create reusable code for any new project.

First basic functions defined at App/Services/ApiDrupal.js

Params can be content type, items per page, # of page

The params is the node id.

Both of them they get the data from the view “API”, end point is at /api/content, example:

Also tested the JSONApi module, but two issues found:
Image urls are not provided on the first API call (known issue, they are working to have it).
It’s not possible to get the image url with an image cache preset.

Currently, it seems better to use a view with just the content that we need. And we can still use JSONApi to browse any content.

The view is defined at:

To view is built with a“Rest Export” display. On Drupal 8, you need to enable:

RESTful Web Services module.
Serialize (required)


On this App/Lib folder we can put any helper function. Already added Lib/Utilities.js file.


The App/Config/GeneralConfig.js contains the main configuration parameters that can be changed when creating a new project. DrupalBaseURL and end point.

Documentation and other notes

Just some notes and interesting documentation.


React Native documentation is very comprehensive with many useful samples.
Check them at:

React Native Components – Library with user ratings

A Brief Overview of ES6 for React Native Developers – very useful to understand code elements/syntax.

Dries – Cross-channel user experiences with Drupal

Debugging and testing

Install on a device:


Good tutorial by Spencer Carli

Also follow him on Github

Push notifications


Important, you need enable “background modes” on XCode (already done on my-app project).

Modules used:
Push Notifications:
It allows to send push notifications, Drupal acts as a APNS server.
You need to upload the certificate file (.pem) to a private folder (for instance: sites/default/files/private). See settings at:
Very important. We need to register each token device from the App:
we also need to configure a “service” end point, where the mobile app can register the device. See explanation/configuration at:
This is the final recommended / final solution. Using RESTFull API:

RESTful Web Services (core module) and Rest UI (
We use to build a view as an end point to get content (Resftul Export display).
Optional, not used yet. Drupal acts as an API server. It allows to browse all content and entities. See the index at: Some issues found, it’s not possible to get the image file on the first api call and a specific image style.



Native Vector Icons Directory

Very helpful, this guy knows very well Restful settings with Views on Drupal