Show a Toast for HMR

Summary:This is just to try out the experience with HMR if we show toasts (might be annoying). Let's try it out before deciding on merging/closing.

Related #5906
Closes https://github.com/facebook/react-native/pull/5947

Differential Revision: D2987132

fb-gh-sync-id: 7bfbb6e1f0363a416805b67eb5674f79ac0881ad
shipit-source-id: 7bfbb6e1f0363a416805b67eb5674f79ac0881ad

Libraries/Utilities/HMRClient.js

@@ -7,19 +7,19 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule HMRClient
+ * @flow
  */
 'use strict';
 
 const Platform = require('Platform');
 const invariant = require('invariant');
-const processColor = require('processColor');
 
 /**
  * HMR Client that receives from the server HMR updates and propagates them
  * runtime to reflects those changes.
  */
 const HMRClient = {
-  enable(platform, bundleEntry, host, port) {
+  enable(platform: string, bundleEntry: string, host: string, port: number) {
     invariant(platform, 'Missing required parameter `platform`');
     invariant(bundleEntry, 'Missing required paramenter `bundleEntry`');
     invariant(host, 'Missing required paramenter `host`');
@@ -54,22 +54,14 @@ Error: ${e.message}`
       );
     };
     activeWS.onmessage = ({data}) => {
-      let DevLoadingView = require('NativeModules').DevLoadingView;
+      // Moving to top gives errors due to NativeModules not being initialized
-      if (!DevLoadingView) {
+      const HMRLoadingView = require('HMRLoadingView');
-        DevLoadingView = {
+
-          showMessage() {},
-          hide() {},
-        };
-      }
       data = JSON.parse(data);
 
       switch (data.type) {
         case 'update-start': {
-          DevLoadingView.showMessage(
+          HMRLoadingView.showMessage('Hot Loading...');
-            'Hot Loading...',
-            processColor('#000000'),
-            processColor('#aaaaaa'),
-          );
           break;
         }
         case 'update': {
@@ -117,15 +109,15 @@ Error: ${e.message}`
             injectFunction(code, sourceURLs[i]);
           });
 
-          DevLoadingView.hide();
+          HMRLoadingView.hide();
           break;
         }
         case 'update-done': {
-          DevLoadingView.hide();
+          HMRLoadingView.hide();
           break;
         }
         case 'error': {
-          DevLoadingView.hide();
+          HMRLoadingView.hide();
           throw new Error(data.body.type + ' ' + data.body.description);
         }
         default: {

Libraries/Utilities/HMRLoadingView.android.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule HMRLoadingView
+ * @flow
+ */
+
+'use strict';
+
+var ToastAndroid = require('ToastAndroid');
+
+const TOAST_SHORT_DELAY = 2000;
+
+class HMRLoadingView {
+  static _showing: boolean;
+
+  static showMessage(message: string) {
+    if (HMRLoadingView._showing) {
+      return;
+    }
+    ToastAndroid.show(message, ToastAndroid.SHORT);
+    HMRLoadingView._showing = true;
+    setTimeout(() => {
+      HMRLoadingView._showing = false;
+    }, TOAST_SHORT_DELAY);
+  }
+
+  static hide() {
+    // noop
+  }
+}
+
+module.exports = HMRLoadingView;

Libraries/Utilities/HMRLoadingView.ios.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule HMRLoadingView
+ * @flow
+ */
+
+'use strict';
+
+const processColor = require('processColor');
+const { DevLoadingView } = require('NativeModules');
+
+class HMRLoadingView {
+  static showMessage(message: string) {
+    DevLoadingView.showMessage(
+      message,
+      processColor('#000000'),
+      processColor('#aaaaaa'),
+    );
+  }
+
+  static hide() {
+    DevLoadingView.hide();
+  }
+}
+
+module.exports = HMRLoadingView;