DoubleDutch Extension Simulator

Quick Start

Launch packager

Launch a React Native packager for your extension.

1. Open a DoubleDutch extension project folder that is set up for baseBundleVersion 0.59.3.
2. From the mobile folder, run npm start (which simply invokes react-native start --port 8081)

You can choose to use either the iOS or Android simulator (or both) as follows:

iOS Simulator

1. Clone this repository git clone [email protected]:doubledutch/simulator.git
2. cd into cloned project folder.
3. npm i to install dependencies
4. Open XCode and open ios/extensionsimulator.xcodeproj
5. Near the top left of the XCode window, select a simulator iPhone target, e.g. iPhone XS.
6. Click the RUN icon.

This will build and install the DoubleDutch simulator app to your selected iPhone simulator. You should no longer need to build the simulator project in XCode. In the future, simply open the DoubleDutch simulator app from the iOS Simulator device. You will at first likely see a red error screen due to not having a React Native packager running.

Note: WE RECOMMEND XCODE 10

Android

1. Download the latest release of the DoubleDutch Simulator APK
2. Open Android Studio, open the AVD manager (icon in top right), and launch an Android virtual device of your choice.
3. Drag the APK onto the virtual Android device to install.
4. Open the installed DoubleDutch Simulator

Develop

Refresh the extension in the simulator (command-R), which will attempt to reload the bundled Javascript from the packager now listening on port 8081. You can reload after making code edits to your Javasript.

Developing multiple extensions

If you work on multiple extensions, you can switch between them by simply stopping the React Native packager for one extension and starting it (npm start from the mobile folder) for another extension. Refresh the simulator (command-R) to load this extension.

Internal simulator implementation notes

Updating to React Native 0.57.5

The following steps were taken to create this project. NodeJS v11.2 was used.

1. react-native init extensionsimulator
2. Update iOS Info.plist with strings from DoubleDutch iOS strings: Base.lproj/InfoPlist.strings
   1. NSCameraUsageDescription
   2. NSPhotoLibraryUsageDescription
   3. NSPhotoLibraryAddUsageDescription: This allows us to add the photos you take to your camera roll.
3. Install react-native-camera
   1. Follow setup steps for this module.
   2. npm i --save react-native-camera
   3. react-native link react-native-camera
   4. Pin version in package.json (remove ^, e.g. "react-native-camera": "1.4.3")
4. Install rn-fetch-blob
   1. npm i --save rn-fetch-blob
   2. RNFB_ANDROID_PERMISSIONS=true react-native link rn-fetch-blob
   3. Pin version in package.json
5. Install react-native-video
   1. npm i --save react-native-video
   2. Pin version in package.json
6. Install react-native-youtube
   1. npm i --save react-native-youtube
   2. react-native link react-native-youtube
   3. cp ./node_modules/react-native-youtube/assets/YTPlayerView-iframe-player.html ios/extensionsimulator.xcodeproj/
   4. Pin version in package.json
7. Run on iOS: react-native run-ios
8. Update @doubledutch/cli
   1. Versions in bundles/make/package.json
   2. Review bundles/make/base.js

Updated from React Native 0.57.5 to 0.59.4

1. Apply diffs from https://github.com/react-native-community/rn-diff-purge/compare/version/0.57.5...version/0.59.4