(You can also check https://facebook.github.io/react-native/docs/running-on-device.html)
After cloning the project. On the project folder. Run:
#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)
# 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
Check the package.json file and “scripts” to check for other commands aliases.
npm run ios
Located at https://github.com/divdigital/my-app (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 TODOs.md 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 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
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
There’s a Themes folder with the theming files. The main one is the ApplicationStyles.js
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.
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
Important, you need enable “background modes” on XCode (already done on my-app project).
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).
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.
Native Vector Icons Directory
Very helpful, this guy knows very well Restful settings with Views on Drupal