How to export View to image data in React Native - react-native

Question

I am trying to export the rendered graphic of a View in React Native. For example, my view is like:
<View>
<Image/> // Some image
<Rectangle /> // Some little
<Circle /> // Some circle
</View>
How do I extract the rendered graphic from the container View into whatever image data format?

Answer 1

see https://stackoverflow.com/a/31936516/528842
Subclass RCTView and add export method:
MyCoolView.m:
- (NSData *)export
{
UIGraphicsBeginImageContext(self.bounds.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return UIImagePNGRepresentation(image);
}
Expose the export method in the native view manager:
The key is to pass in the reactTag which is the reference to the native component.
MyCoolViewManager.m:
RCT_EXPORT_METHOD(export:(NSNumber *)reactTag callback:(RCTResponseSenderBlock)callback) {
[self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
MyCoolView *view = viewRegistry[reactTag];
if (![view isKindOfClass:[MyCoolView class]]) {
RCTLogMustFix(#"Invalid view returned from registry, expecting MyCoolView, got: %#", view);
}
NSData * imageData = [view export];
callback(#[[NSNull null], [imageData base64EncodedStringWithOptions:0]]);
}];
}
Expose export method from React component:
MyCoolView.js:
var React = require('react-native');
var NativeModules = require('NativeModules');
var MyCoolViewManager = NativeModules.MyCoolViewManager;
var findNodeHandle = require('findNodeHandle');
class MyCoolView extends React.Component{
// ...
export() {
return new Promise((resolve, reject) => {
MyCoolViewManager.export(
findNodeHandle(this),
(error, result) => {
if (error) {
reject(error);
} else {
resolve(result);
// now we've got the base64 encoded data of the exported image
}
}
);
});
}
}
Invoke the export method:
The component look like this:
<MyCoolView ref='myCoolView'>
<Image />
<Rectangle />
<Circle />
</View>
</MyCoolView>
In some function:
this.refs.myCoolView.export()
.then(base64data => {
console.log(base64data);
}, error => {
console.error(error);
});