Moved takeSnapshot method from UIManager to ReactNative

Reviewed By: spicyj

Differential Revision: D4767428

fbshipit-source-id: 77c80c0135641ab46f9dce2763f27499a96373a0

Author: Brian Vaughn

Examples/UIExplorer/js/ActionSheetIOSExample.js

@@ -28,8 +28,8 @@ var ReactNative = require('react-native');
 var {
   ActionSheetIOS,
   StyleSheet,
+  takeSnapshot,
   Text,
-  UIManager,
   View,
 } = ReactNative;
 
@@ -164,7 +164,7 @@ class ShareScreenshotExample extends React.Component {
 
   showShareActionSheet = () => {
     // Take the snapshot (returns a temp file uri)
-    UIManager.takeSnapshot('window').then((uri) => {
+    takeSnapshot('window').then((uri) => {
       // Share image data
       ActionSheetIOS.showShareActionSheetWithOptions({
         url: uri,

Libraries/ReactNative/UIManager.js

@@ -15,72 +15,24 @@ const NativeModules = require('NativeModules');
 const Platform = require('Platform');
 
 const defineLazyObjectProperty = require('defineLazyObjectProperty');
-const findNodeHandle = require('findNodeHandle');
 const invariant = require('fbjs/lib/invariant');
 
-import type React from 'react';
-
 const { UIManager } = NativeModules;
 
 invariant(UIManager, 'UIManager is undefined. The native module config is probably incorrect.');
 
-const _takeSnapshot = UIManager.takeSnapshot;
-
-// findNodeHandle() returns a reference to a wrapper component with viewConfig.
-// This wrapper is required for NativeMethodsMixin.setNativeProps, but most
-// callers want the native tag (number) and not the wrapper. For this purpose,
-// the ReactNative renderer decorates findNodeHandle() and extracts the tag.
-// However UIManager can't require ReactNative without introducing a cycle, and
-// deferring the require causes a significant performance regression in Wilde
-// (along the lines of 17% regression in RN Bridge startup). So as a temporary
-// workaround, this wrapper method mimics what the native renderer does.
-// TODO (bvaughn) Remove this and use findNodeHandle directly once stack is gone
-function findNodeHandleWrapper(componentOrHandle : any) : ?number {
-  const instance: any = findNodeHandle(componentOrHandle);
-
-  if (instance) {
-    return typeof instance._nativeTag === 'number'
-      ? instance._nativeTag
-      : instance.getHostNode();
-  } else {
-    return null;
-  }
-}
-
-/**
- * Capture an image of the screen, window or an individual view. The image
- * will be stored in a temporary file that will only exist for as long as the
- * app is running.
- *
- * The `view` argument can be the literal string `window` if you want to
- * capture the entire window, or it can be a reference to a specific
- * React Native component.
- *
- * The `options` argument may include:
- * - width/height (number) - the width and height of the image to capture.
- * - format (string) - either 'png' or 'jpeg'. Defaults to 'png'.
- * - quality (number) - the quality when using jpeg. 0.0 - 1.0 (default).
- *
- * Returns a Promise.
- * @platform ios
- */
-UIManager.takeSnapshot = async function(
-  view ?: 'window' | React.Element<any> | number,
-  options ?: {
-    width ?: number,
-    height ?: number,
-    format ?: 'png' | 'jpeg',
-    quality ?: number,
-  },
-) {
-  if (!_takeSnapshot) {
-    console.warn('UIManager.takeSnapshot is not available on this platform');
-    return;
-  }
-  if (typeof view !== 'number' && view !== 'window') {
-    view = findNodeHandleWrapper(view) || 'window';
-  }
-  return _takeSnapshot(view, options);
+// In past versions of ReactNative users called UIManager.takeSnapshot()
+// However takeSnapshot was moved to ReactNative in order to support flat
+// bundles and to avoid a cyclic dependency between UIManager and ReactNative.
+// UIManager.takeSnapshot still exists though. In order to avoid confusion or
+// accidental usage, mask the method with a deprecation warning.
+UIManager.__takeSnapshot = UIManager.takeSnapshot;
+UIManager.takeSnapshot = function() {
+  invariant(
+    false,
+    'UIManager.takeSnapshot should not be called directly. ' +
+    'Use ReactNative.takeSnapshot instead.'
+  );
 };
 
 /**

Libraries/Renderer/src/renderers/native/ReactNativeFiber.js

@@ -27,6 +27,7 @@ const deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationI
 const emptyObject = require('fbjs/lib/emptyObject');
 const findNodeHandle = require('findNodeHandle');
 const invariant = require('fbjs/lib/invariant');
+const takeSnapshot = require('takeSnapshot');
 
 const {injectInternals} = require('ReactFiberDevToolsHook');
 
@@ -402,6 +403,8 @@ const ReactNative = {
     return NativeRenderer.getPublicRootInstance(root);
   },
 
+  takeSnapshot,
+
   unmountComponentAtNode(containerTag: number) {
     const root = roots.get(containerTag);
     if (root) {

Libraries/Renderer/src/renderers/native/ReactNativeStack.js

@@ -18,6 +18,7 @@ var ReactNativeStackInjection = require('ReactNativeStackInjection');
 var ReactUpdates = require('ReactUpdates');
 
 var findNodeHandle = require('findNodeHandle');
+var takeSnapshot = require('takeSnapshot');
 
 ReactNativeInjection.inject();
 ReactNativeStackInjection.inject();
@@ -45,6 +46,9 @@ var ReactNative = {
   },
 
   render: render,
+
+  takeSnapshot,
+
   unmountComponentAtNode: ReactNativeMount.unmountComponentAtNode,
 
   /* eslint-disable camelcase */

Libraries/Renderer/src/renderers/native/takeSnapshot.js

@@ -0,0 +1,55 @@
+/**
+ * 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 takeSnapshot
+ * @flow
+ */
+'use strict';
+
+var ReactNative = require('ReactNative');
+var UIManager = require('UIManager');
+
+import type {Element} from 'React';
+
+/**
+ * Capture an image of the screen, window or an individual view. The image
+ * will be stored in a temporary file that will only exist for as long as the
+ * app is running.
+ *
+ * The `view` argument can be the literal string `window` if you want to
+ * capture the entire window, or it can be a reference to a specific
+ * React Native component.
+ *
+ * The `options` argument may include:
+ * - width/height (number) - the width and height of the image to capture.
+ * - format (string) - either 'png' or 'jpeg'. Defaults to 'png'.
+ * - quality (number) - the quality when using jpeg. 0.0 - 1.0 (default).
+ *
+ * Returns a Promise.
+ * @platform ios
+ */
+module.exports = async function takeSnapshot(
+  view ?: 'window' | Element<any> | number,
+  options ?: {
+     width ?: number,
+     height ?: number,
+     format ?: 'png' | 'jpeg',
+     quality ?: number,
+  },
+) {
+  if (
+    typeof view !== 'number' &&
+    view !== 'window'
+  ) {
+    view = ReactNative.findNodeHandle(view) || 'window';
+  }
+
+  // Call the hidden '__takeSnapshot' method; the main one throws an error to
+  // prevent accidental backwards-incompatible usage.
+  return UIManager.__takeSnapshot(view, options);
+};