[#162048444] Adds MarkdownViewer component backed by WebView (#808)

.gitignore

@@ -87,3 +87,6 @@ definitions
 **/*.p12
 **/*.pem
 **/*.pkey
+
+# rn-nodeify
+shim.js

android/app/build.gradle

@@ -162,6 +162,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-webview')
     compile project(':react-native-touch-id')
     compile project(':react-native-background-timer')
     compile project(':instabug-reactnative')

android/app/src/main/java/it/teamdigitale/app/italiaapp/MainApplication.java

@@ -9,6 +9,7 @@
 import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.rnfingerprint.FingerprintAuthPackage;
 import com.ocetnik.timer.BackgroundTimerPackage;
 import com.instabug.reactlibrary.RNInstabugReactnativePackage;
@@ -41,6 +42,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
         new MainReactPackage(),
+            new RNCWebViewPackage(),
         new FingerprintAuthPackage(),
         new BackgroundTimerPackage(),
         new RNInstabugReactnativePackage.Builder(BuildConfig.INSTABUG_TOKEN, MainApplication.this)

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ItaliaApp'
+include ':react-native-webview'
+project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':react-native-touch-id'
 project(':react-native-touch-id').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-touch-id/android')
 include ':react-native-background-timer'

index.js

@@ -1,14 +1,17 @@
 /**
  * Main app entrypoint
  */
+// Shim file generated by rn-nodeify
+import "./shim";
 
-import { AppRegistry } from "react-native";
-import Config from "react-native-config";
+import { AppRegistry, YellowBox } from "react-native";
+import DeviceInfo from "react-native-device-info";
 import {
   setJSExceptionHandler,
   setNativeExceptionHandler
 } from "react-native-exception-handler";
-import DeviceInfo from "react-native-device-info";
+
+import { App } from "./ts/App";
 import { mixpanel } from "./ts/mixpanel";
 
 const errorHandler = (e, isFatal) => {
@@ -43,11 +46,8 @@ setNativeExceptionHandler(exceptionString => {
   }
 });
 
-import { App } from "./ts/App";
-
 // Temporary workaround for @https://github.com/facebook/react-native/issues/18868
 // TODO: Remove this as soon as it has been fixed @https://www.pivotaltracker.com/story/show/158144437
-import { YellowBox } from "react-native";
 YellowBox.ignoreWarnings(["Warning: isMounted(...) is deprecated"]);
 
 AppRegistry.registerComponent("ItaliaApp", () => App);

ios/Podfile

@@ -49,6 +49,8 @@ target 'ItaliaApp' do
 
   pod 'TouchID', :path => '../node_modules/react-native-touch-id'
 
+  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
+
 end
 
 # Fix a open bug in react-native-config

ios/Podfile.lock

@@ -21,6 +21,8 @@ PODS:
     - React
   - react-native-splash-screen (3.1.1):
     - React
+  - react-native-webview (3.1.2):
+    - React
   - React/ART (0.57.8):
     - React/Core
   - React/Core (0.57.8):
@@ -80,6 +82,7 @@ DEPENDENCIES:
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-mixpanel (from `../node_modules/react-native-mixpanel`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
   - React/ART (from `../node_modules/react-native`)
   - React/Core (from `../node_modules/react-native`)
   - React/DevSupport (from `../node_modules/react-native`)
@@ -122,6 +125,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-mixpanel"
   react-native-splash-screen:
     :path: "../node_modules/react-native-splash-screen"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
   ReactNativePermissions:
     :path: "../node_modules/react-native-permissions"
   RNDeviceInfo:
@@ -150,6 +155,7 @@ SPEC CHECKSUMS:
   react-native-config: 8c2a92aa66a6cec1a23d9eda7ba6fcf31a63ace5
   react-native-mixpanel: 0683bc3f3f8db8f9d79a8ba8584ee51030338a2f
   react-native-splash-screen: 8e3f866dc79bfe533baeffd0a38c33f7a7eae7f8
+  react-native-webview: a42108b827082f8f0333529b0772102031d5960d
   ReactNativePermissions: 9f2d9c45c98800795e6c2ed330e25d11a66a8169
   RNDeviceInfo: 568c5641057313b4912d08a7742ff0b2f753ed5c
   RNFS: bbb1a64eb245763daf34aea86f97c97c4e85f74c
@@ -160,6 +166,6 @@ SPEC CHECKSUMS:
   TouchID: b0640fedb86fa2db2fe1df15b61594ad49e76288
   yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
 
-PODFILE CHECKSUM: eb6699cc6fee884a9e08f5c344adf01f737f80a3
+PODFILE CHECKSUM: 3685d92a5131f688ab6acacf4336161dd4719c3f
 
 COCOAPODS: 1.5.3

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "postinstall": "patch-package && chmod +x ./bin/add-ios-source-maps.sh && ./bin/add-ios-source-maps.sh && chmod +x ./bin/add-ios-env-config.sh && ./bin/add-ios-env-config.sh",
+    "postinstall": "patch-package && rn-nodeify --install path,buffer && chmod +x ./bin/add-ios-source-maps.sh && ./bin/add-ios-source-maps.sh && chmod +x ./bin/add-ios-env-config.sh && ./bin/add-ios-env-config.sh",
     "test": "jest",
     "prettify": "prettier --write \"ts/**/*.ts*\"",
     "packager:clear": "rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*",
@@ -22,6 +22,7 @@
   "dependencies": {
     "abort-controller": "^1.0.2",
     "async-mutex": "^0.1.3",
+    "buffer": "^4.9.1",
     "color": "^3.0.0",
     "date-fns": "^1.29.0",
     "email-validator": "^2.0.4",
@@ -35,6 +36,7 @@
     "lodash": "^4.17.11",
     "native-base": "2.10.0",
     "native-base-shoutem-theme": "^0.2.2",
+    "path-browserify": "0.0.0",
     "react": "16.6.3",
     "react-native": "0.57.8",
     "react-native-add-calendar-event": "^2.1.0",
@@ -58,13 +60,17 @@
     "react-native-text-input-mask": "^0.8.0",
     "react-native-touch-id": "git://github.com/naoufal/react-native-touch-id#d2ff356f5dbed4ad647b26110f5053ed41f522a4",
     "react-native-vector-icons": "^4.6.0",
+    "react-native-webview": "^3.1.2",
     "react-navigation": "2.18.3",
     "react-navigation-redux-helpers": "2.0.9",
     "react-redux": "6.0.0",
     "redux": "4.0.1",
     "redux-logger": "3.0.6",
     "redux-persist": "5.10.0",
     "redux-saga": "0.16.2",
+    "remark": "10.0.1",
+    "remark-custom-blocks": "2.3.1",
+    "remark-html": "9.0.0",
     "reselect": "4.0.0",
     "simple-markdown": "0.4.2",
     "source-map": "^0.6.1",
@@ -124,6 +130,7 @@
     "react-native-typescript-transformer": "^1.2.10",
     "react-test-renderer": "16.6.3",
     "redux-saga-test-plan": "^3.7.0",
+    "rn-nodeify": "^10.0.1",
     "ts-jest": "23.10.5",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
@@ -166,5 +173,11 @@
         "name": "iPhone 6, iOS 10.3"
       }
     }
+  },
+  "react-native": {
+    "path": "path-browserify"
+  },
+  "browser": {
+    "path": "path-browserify"
   }
 }

ts/@types/remark-custom-blocks.d.ts

@@ -0,0 +1,3 @@
+declare module "remark-custom-blocks" {
+  export default function(): any;
+}

ts/@types/remark-html.d.ts

@@ -0,0 +1,3 @@
+declare module "remark-html" {
+  export default function(): any;
+}

ts/@types/remark.d.ts

@@ -0,0 +1,3 @@
+declare module "remark" {
+  export default function(): any;
+}

ts/components/MarkdownViewer/handlers/internalLink.ts

@@ -0,0 +1,40 @@
+/**
+ * An handler for application internal links
+ */
+import { fromNullable, Option, some } from "fp-ts/lib/Option";
+import { NavigationActions } from "react-navigation";
+
+import ROUTES from "../../../navigation/routes";
+import { Dispatch } from "../../../store/actions/types";
+
+// Prefix to match uri like `ioit://PROFILE_MAIN`
+const INTERNAL_TARGET_PREFIX = "ioit://";
+
+const ALLOWED_ROUTE_NAMES: ReadonlyArray<string> = [
+  ROUTES.MESSAGE_LIST,
+  ROUTES.PREFERENCES_HOME,
+  ROUTES.PREFERENCES_SERVICES,
+  ROUTES.PROFILE_MAIN,
+  ROUTES.PROFILE_PRIVACY,
+  ROUTES.PROFILE_PRIVACY_MAIN,
+  ROUTES.WALLET_HOME,
+  ROUTES.WALLET_LIST
+];
+
+function getInternalRoute(href: string): Option<string> {
+  return some(href.split(INTERNAL_TARGET_PREFIX))
+    .filter(_ => _.length === 2 && _[0] === "")
+    .chain(_ =>
+      fromNullable(ALLOWED_ROUTE_NAMES.find(e => e === _[1].toUpperCase()))
+    );
+}
+
+export function handleInternalLink(dispatch: Dispatch, href: string) {
+  getInternalRoute(href).map(routeName =>
+    dispatch(
+      NavigationActions.navigate({
+        routeName
+      })
+    )
+  );
+}