Installation

Main commands

(You can also check 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

Project organization

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

The initial project was migrated to an “Ignite” template.
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
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/
React Native Navigation (Native) – https://wix.github.io/react-native-navigation/#/
Comparison here: 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://dev-central.pantheonsite.io/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://dev-central.pantheonsite.io/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

React Native Components – Library with user ratings
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/komenco/useful-react-native-npm-scripts-6c07b04c3ac3

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

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
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://dev-central.pantheonsite.io/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
This is the final recommended / final solution. Using RESTFull API: https://www.drupal.org/node/2776901

RESTful Web Services (core module) and Rest UI (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.
Optional, not used yet. Drupal acts as an API server. It allows to browse all content and entities. See the index at: http://dev-central.pantheonsite.io/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

Others

Native Vector Icons Directory
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

React Native and Drupal — App integration