[Android] Implement UIManager.takeSnapshot #6431

gre · 2016-03-12T14:38:32Z

Implement the takeSnapshot feature for Android.

It works almost like the iOS implementation. it also supports "webm". There might be some tiny difference in Android snapshotting behavior. For instance, the UIExplorer doesn't seem to show a "recursive" screenshot like in iOS. Otherwise everything works fine.

Had to change the internal bridge API from UIManager.takeSnapshot(view/*String or int*/, options) to UIManager.takeSnapshot(view/*String*/, tag/*int*/, options) because RN Android don't allow generic id type like in iOS implementation.

gre · 2016-03-12T14:38:44Z

cc @mkonicek @nicklockwood

eslint-bot · 2016-03-12T14:45:58Z

Examples/UIExplorer/SnapshotExample.js

@@ -33,29 +33,56 @@ var ScreenshotExample = React.createClass({

  render() {
    return (
-      <View>
+      <View style={style.root} ref={ref => this._view = ref}>


no-return-assign: Arrow function should not return assignment.

property _view Property not found in React component

gre · 2016-03-13T09:43:44Z

the android implementation now support width/height in points and resize the snapshot

facebook-github-bot · 2016-03-13T11:18:20Z

@gre updated the pull request.

facebook-github-bot · 2016-03-14T11:09:21Z

@gre updated the pull request.

facebook-github-bot · 2016-03-14T23:46:19Z

@gre updated the pull request.

mkonicek · 2016-03-15T16:52:41Z

ReactAndroid/src/main/java/com/facebook/react/uimanager/UIViewOperationQueue.java

+        View view = mNativeViewHierarchyManager.resolveView(mTag);
+        FileOutputStream fileOutputStream = new FileOutputStream(destFile);
+        snapshot.captureViewToFileOutputStream(view, fileOutputStream);
+        fileOutputStream.close();


This needs to be in a finally section, check out some tutorials or just look for "outputstream" across the RN codebase to see examples. Found e.g. http://www.quepublishing.com/articles/article.aspx?p=26067

mkonicek · 2016-03-15T16:55:56Z

This is a huge PR and I'm not sure we should include and maintain this functionality by default. Would it make sense to release it as a separate module?

gre · 2016-03-15T17:22:45Z

@mkonicek separate module you still mean inside RN right?

gre · 2016-03-15T17:26:59Z

I mean, since the iOS implementation have it built-in & it's part of UIManager https://github.com/facebook/react-native/blob/4b4455f8278d8d728d69d84804bbe8fed9b3d972/Libraries/Utilities/UIManager.js, I thought it was making sense to also have it in Android. ( also just for context, I've made it here after this discussion https://twitter.com/matzatorski/status/707628299258863617 )

gre · 2016-03-18T19:57:08Z

I've addressed comments

facebook-github-bot · 2016-03-18T19:58:36Z

@gre updated the pull request.

mkonicek · 2016-03-21T23:25:52Z

I'm not sure making it part of the UIManager was the best decision actually.

But I still feel like this is a lot of code to understand and maintain for the RN community (we'll get issues and pull requests) and would be nice if you could add it to a project using e.g. npm install react-native-android-snapshot.

@javache What do you think?

If we want to add it to React Native itself it would be nice to extract all the code to Snapshot.java so it lives in one place and delegate to it from the UIManagerModule and UIViewOperationQueue.

gre · 2016-03-22T07:11:19Z

So maybe this should go outside of RN then? I'm fine with that but decision need to be consistent between iOS and Android version IMO.

Otherwise, BTW we can't implement it outside of RN at the moment because there is no way to execute something on a arbitrary view (by its tag), something equivalent to iOS' addUIBlock would be interesting (not only for this feature)

mkonicek · 2016-04-01T14:35:23Z

Sorry for the delay, I was on vacation. I think this is a lot of code to maintain and not sure how many people need this feature yet. I'd prefer it released separately, not sure why it was added for iOS by default.

@kmagiera What do you think? Does having a way to execute something on a arbitrary view (by its tag) (something equivalent to iOS' addUIBlock) sound good? It could help extensibility, to make it possible to implement features like this as standalone modules.

jsierles · 2016-04-04T21:53:06Z

A lot of people have been asking for android support. I'm happy to maintain this feature as an external module. So I think the biggest priority should be the 'arbitrary view' behavior if this isn't going to be merged.

mkonicek · 2016-04-07T13:46:43Z

@jsierles OK that sounds good, could you send a PR and cc @kmagiera please?

jsierles · 2016-04-08T08:27:12Z

I have no idea how to implement this in Android, @gre do you know?

gre · 2016-04-08T08:57:31Z

ok I can take a look when I find time for this :)

ghost · 2016-04-17T17:00:33Z

@nicklockwood would you mind taking a look at this pull request? It's been a while since the last commit was reviewed.

christopherdro · 2016-05-27T22:56:13Z

@mkonicek I'm requesting that we give this another look and agree with @gre that things should be kept consistent across both platforms.

I find this to be a very useful feature and makes this feature available on both platform.

Thoughts?

niksinfinite10 · 2016-06-17T06:26:33Z

When is this happening ?
It has been quite a long this pull request has been created and waiting.

jsierles · 2016-06-17T07:10:57Z

Since this feature doesn't seem in high demand, I think it's time to close this out in favor of an exernal module, and another PR for the addUIBlock feature on Android to support it. Any objections?

gre · 2016-06-17T08:53:28Z

yeah I think we will do this addUIBlock feature and delegate the implementation on your react-native-view-snapshot .

I'll try to work on this this weekend.

gre · 2016-06-18T17:21:40Z

@jsierles @niksinfinite10 @christopherdro please see #8217

Summary: This PR follows the work started in #6431 but instead of implementing the snapshot for Android, will just allow that feature to be implemented by a third party library. The missing feature is the ability to resolve a View for a given tag integer. which is now possible with a `addUIBlock` on the `UIManagerModule` method where you give a `UIBlock` instance (a new class) that implements a `execute(NativeViewHierarchyManager)` function. This is already possible in iOS API. a third party can use the `addUIBlock` too. I have kept the name `addUIBlock` so it's the same as in the [iOS' API](https://github.com/facebook/react-native/search?q=addUIBlock&type=Code&utf8=%E2%9C%93). --- With this PR a third party lib can now do... ```java UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class); uiManager.addUIBlock(new UIBlock() { public void execute (NativeViewHierarchyManager nvhm) { View view = nvhm.resolveView(tag); ...do something with view... like... screenshot t Closes #8217 Differential Revision: D3469311 Pulled By: astreet fbshipit-source-id: bb56ecc7e8936299337af47ca8114875ee1fd2b0

Summary: This PR follows the work started in facebook#6431 but instead of implementing the snapshot for Android, will just allow that feature to be implemented by a third party library. The missing feature is the ability to resolve a View for a given tag integer. which is now possible with a `addUIBlock` on the `UIManagerModule` method where you give a `UIBlock` instance (a new class) that implements a `execute(NativeViewHierarchyManager)` function. This is already possible in iOS API. a third party can use the `addUIBlock` too. I have kept the name `addUIBlock` so it's the same as in the [iOS' API](https://github.com/facebook/react-native/search?q=addUIBlock&type=Code&utf8=%E2%9C%93). --- With this PR a third party lib can now do... ```java UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class); uiManager.addUIBlock(new UIBlock() { public void execute (NativeViewHierarchyManager nvhm) { View view = nvhm.resolveView(tag); ...do something with view... like... screenshot t Closes facebook#8217 Differential Revision: D3469311 Pulled By: astreet fbshipit-source-id: bb56ecc7e8936299337af47ca8114875ee1fd2b0

[Android] Implement UIManager.takeSnapshot

0e0a196

eslint-bot reviewed Mar 12, 2016
View reviewed changes

gre added 2 commits March 12, 2016 18:35

fix warnings

5b9d731

convert width/height to pixels & resize if needed

1b38737

facebook-github-bot added the GH Review: review-needed label Mar 13, 2016

gre mentioned this pull request Mar 14, 2016

add UIManagerModule.getViewByTag #4438

Closed

mkonicek reviewed Mar 15, 2016
View reviewed changes

Address feedbacks and more javadoc

4177bce

mkonicek assigned kmagiera and unassigned kmagiera Apr 1, 2016

gre closed this Jun 17, 2016

gre mentioned this pull request Jun 18, 2016

[Android] Implement addUIBlock to allow third party to resolve a view #8217

Closed

gre mentioned this pull request Sep 12, 2016

RFC: Snapshot API Proposal #9855

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] Implement UIManager.takeSnapshot #6431

[Android] Implement UIManager.takeSnapshot #6431

gre commented Mar 12, 2016

gre commented Mar 12, 2016

eslint-bot Mar 12, 2016

eslint-bot Mar 12, 2016

gre commented Mar 13, 2016

facebook-github-bot commented Mar 13, 2016

facebook-github-bot commented Mar 14, 2016

facebook-github-bot commented Mar 14, 2016

mkonicek Mar 15, 2016

mkonicek commented Mar 15, 2016

gre commented Mar 15, 2016

gre commented Mar 15, 2016

gre commented Mar 18, 2016

facebook-github-bot commented Mar 18, 2016

mkonicek commented Mar 21, 2016

gre commented Mar 22, 2016

mkonicek commented Apr 1, 2016

jsierles commented Apr 4, 2016

mkonicek commented Apr 7, 2016

jsierles commented Apr 8, 2016

gre commented Apr 8, 2016

ghost commented Apr 17, 2016

christopherdro commented May 27, 2016

niksinfinite10 commented Jun 17, 2016

jsierles commented Jun 17, 2016

gre commented Jun 17, 2016

gre commented Jun 18, 2016

[Android] Implement UIManager.takeSnapshot #6431

[Android] Implement UIManager.takeSnapshot #6431

Conversation

gre commented Mar 12, 2016

gre commented Mar 12, 2016

eslint-bot Mar 12, 2016

Choose a reason for hiding this comment

eslint-bot Mar 12, 2016

Choose a reason for hiding this comment

gre commented Mar 13, 2016

facebook-github-bot commented Mar 13, 2016

facebook-github-bot commented Mar 14, 2016

facebook-github-bot commented Mar 14, 2016

mkonicek Mar 15, 2016

Choose a reason for hiding this comment

mkonicek commented Mar 15, 2016

gre commented Mar 15, 2016

gre commented Mar 15, 2016

gre commented Mar 18, 2016

facebook-github-bot commented Mar 18, 2016

mkonicek commented Mar 21, 2016

gre commented Mar 22, 2016

mkonicek commented Apr 1, 2016

jsierles commented Apr 4, 2016

mkonicek commented Apr 7, 2016

jsierles commented Apr 8, 2016

gre commented Apr 8, 2016

ghost commented Apr 17, 2016

christopherdro commented May 27, 2016

niksinfinite10 commented Jun 17, 2016

jsierles commented Jun 17, 2016

gre commented Jun 17, 2016

gre commented Jun 18, 2016