# React Native and Drupal — App integration

## Installation

### Main commands

(You can also check [https://facebook.github.io/react-native/docs/running-on-device.html](https://facebook.github.io/react-native/docs/running-on-device.html))

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

### Reset

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.

Example:
`npm run ios`

## Tools

To debug:
[https://github.com/jhen0409/react-native-debugger](https://github.com/jhen0409/react-native-debugger)

## Project organization

Located at [https://github.com/divdigital/my-app](https://github.com/divdigital/my-app) (work in progress…)

The initial project was migrated to an “Ignite” template.
[https://github.com/infinitered/ignite](https://github.com/infinitered/ignite)

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.

### TODOs

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

Main:
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

Others:

General settings. Improve them, use [https://github.com/luggit/react-native-config](https://github.com/luggit/react-native-config)
Add new functions to get the content from Drupal
Add user section. Implement Oauth authentication.

### Containers and Navigation

Two options/approaches:
React Navigation (JavaScript) – [https://reactnavigation.org/](https://reactnavigation.org/)
React Native Navigation (Native) – [https://wix.github.io/react-native-navigation/#/](https://wix.github.io/react-native-navigation/#/)
Comparison here: [https://github.com/spencercarli/navigation-comparison](https://github.com/spencercarli/navigation-comparison)

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

### Theming

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

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

**getDrupalContentByNid**
The params is the node id.

Both of them they get the data from the view “API”, end point is at /api/content, example:
[http://example.com/api/content](http://example.com/api/content)

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:
[http://example.com/admin/structure/views/view/api](http://example.com/admin/structure/views/view/api)

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

RESTful Web Services module.
Serialize (required)

### Lib

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

### Configuration

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.

### General

React Native documentation is very comprehensive with many useful samples.
Check them at:
[https://facebook.github.io/react-native/docs/getting-started.html](https://facebook.github.io/react-native/docs/getting-started.html)

React Native Components – Library with user ratings
[https://js.coach/react-native/](https://js.coach/react-native/)

A Brief Overview of ES6 for React Native Developers – very useful to understand code elements/syntax.
[https://medium.com/the-react-native-log/a-brief-overview-of-es6-for-react-native-developers-15e7c68315da](https://medium.com/the-react-native-log/a-brief-overview-of-es6-for-react-native-developers-15e7c68315da)

[https://medium.com/komenco/useful-react-native-npm-scripts-6c07b04c3ac3](https://medium.com/komenco/useful-react-native-npm-scripts-6c07b04c3ac3)

Dries – Cross-channel user experiences with Drupal
[https://dri.es/cross-channel-user-experiences-with-drupal](https://dri.es/cross-channel-user-experiences-with-drupal)

### Debugging and testing

[https://github.com/zo0r/react-native-push-notification/blob/master/trouble-shooting.mdhttps://facebook.github.io/react-native/docs/running-on-device.html](https://github.com/zo0r/react-native-push-notification/blob/master/trouble-shooting.mdhttps://facebook.github.io/react-native/docs/running-on-device.html)

Install on a device:
[https://facebook.github.io/react-native/docs/running-on-device.html](https://facebook.github.io/react-native/docs/running-on-device.html)

### Navigation

Good tutorial by Spencer Carli
[https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4](https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4)

Also follow him on Github
[https://github.com/spencercarli](https://github.com/spencercarli)

### Push notifications

General
[https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6)

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

Drupal
Modules used:
Push Notifications:
[https://www.drupal.org/project/push_notifications](https://www.drupal.org/project/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: [http://example.com/admin/config/services/push_notifications/configuration](http://example.com/admin/config/services/push_notifications/configuration))
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: [https://www.drupal.org/node/2718087](https://www.drupal.org/node/2718087)
This is the final recommended / final solution. Using RESTFull API: [https://www.drupal.org/node/2776901](https://www.drupal.org/node/2776901)

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

### Redux

[https://github.com/HarrisRobin/ignite-react-navigation-redux-examplehttps://medium.com/@jonlebensold/getting-started-with-react-native-redux-2b01408c0053https://medium.com/dailyjs/11-mistakes-ive-made-during-react-native-redux-app-development-8544e2be9a9](https://github.com/HarrisRobin/ignite-react-navigation-redux-examplehttps://medium.com/@jonlebensold/getting-started-with-react-native-redux-2b01408c0053https://medium.com/dailyjs/11-mistakes-ive-made-during-react-native-redux-app-development-8544e2be9a9)

### Others

Native Vector Icons Directory
[https://oblador.github.io/react-native-vector-icons/](https://oblador.github.io/react-native-vector-icons/)

Very helpful, this guy knows very well Restful settings with Views on Drupal
[http://www.mediacurrent.com/blog/eight-insights-and-useful-snippets-d8-rest-module](http://www.mediacurrent.com/blog/eight-insights-and-useful-snippets-d8-rest-module)