Permalink
Browse files

Moved takeSnapshot method from UIManager to ReactNative

Reviewed By: spicyj

Differential Revision: D4767428

fbshipit-source-id: 77c80c0135641ab46f9dce2763f27499a96373a0
  • Loading branch information...
bvaughn authored and facebook-github-bot committed Mar 25, 2017
1 parent 30778b6 commit 848593c0f0b75da9ff342596908c5091a2cd1430
@@ -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,
@@ -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.'
);
};
/**
@@ -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,

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Mar 31, 2017

Collaborator

I think this exports takeSnapshot on React and not ReactNative, I was working on a PR to fix flow in react-native-implementation and noticed a new error related to that. My PR will add takeSnapshot to ReactNative but we might want to remove this one too.

@janicduplessis

janicduplessis Mar 31, 2017

Collaborator

I think this exports takeSnapshot on React and not ReactNative, I was working on a PR to fix flow in react-native-implementation and noticed a new error related to that. My PR will add takeSnapshot to ReactNative but we might want to remove this one too.

This comment has been minimized.

Show comment
Hide comment
@bvaughn

bvaughn Apr 6, 2017

Contributor

@janicduplessis Sorry to follow up late about this. I must have overlooked your comment somehow.

It looks like you added takeSnapshot to react-native-implementation.js in c7387fe but we also still have it defined on the renderer which I think is causing a problem reported in #13343

I will submit a PR to remove it from both renderers this morning.

@bvaughn

bvaughn Apr 6, 2017

Contributor

@janicduplessis Sorry to follow up late about this. I must have overlooked your comment somehow.

It looks like you added takeSnapshot to react-native-implementation.js in c7387fe but we also still have it defined on the renderer which I think is causing a problem reported in #13343

I will submit a PR to remove it from both renderers this morning.

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Apr 6, 2017

Collaborator

Right, I forgot we still do forwarding of React methods to ReactNative. Do we still do this with ReactDOM? Might as well remove it since it's been deprecated for a while.

@janicduplessis

janicduplessis Apr 6, 2017

Collaborator

Right, I forgot we still do forwarding of React methods to ReactNative. Do we still do this with ReactDOM? Might as well remove it since it's been deprecated for a while.

This comment has been minimized.

Show comment
Hide comment
@bvaughn

bvaughn Apr 6, 2017

Contributor

Do we still do this with ReactDOM

I don't understand this question.

But yes, I submitted PR #13347 to remove takeSnapshot

@bvaughn

bvaughn Apr 6, 2017

Contributor

Do we still do this with ReactDOM

I don't understand this question.

But yes, I submitted PR #13347 to remove takeSnapshot

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Apr 6, 2017

Collaborator

Actually it might have been the other way around, React exporting ReactDOM methods when it was split in 2 packages.

So I guess my question is more why do we export ReactNative renderer internals here https://github.com/facebook/react-native/blob/master/Libraries/react-native/react-native-implementation.js#L143 when they can be imported from the React package?

@janicduplessis

janicduplessis Apr 6, 2017

Collaborator

Actually it might have been the other way around, React exporting ReactDOM methods when it was split in 2 packages.

So I guess my question is more why do we export ReactNative renderer internals here https://github.com/facebook/react-native/blob/master/Libraries/react-native/react-native-implementation.js#L143 when they can be imported from the React package?

This comment has been minimized.

Show comment
Hide comment
@bvaughn

bvaughn Apr 6, 2017

Contributor

I don't know, to be honest.

@bvaughn

bvaughn Apr 6, 2017

Contributor

I don't know, to be honest.

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Apr 6, 2017

Collaborator

Looks like it's what I thought it was, we should probably remove it to finish cleaning up react-native-implementation.js

2eafcd4

@janicduplessis

janicduplessis Apr 6, 2017

Collaborator

Looks like it's what I thought it was, we should probably remove it to finish cleaning up react-native-implementation.js

2eafcd4

unmountComponentAtNode(containerTag: number) {
const root = roots.get(containerTag);
if (root) {
@@ -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 */
@@ -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);
};

0 comments on commit 848593c

Please sign in to comment.