Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-view-shot
Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-view-shot
Installations
npm install @react-native-oh-tpl/react-native-view-shotDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.14.1
NPM Version
9.3.1
Releases
23
Languages
4
TypeScript
JavaScript
C++
CMake
TypeScript (47.16%)
JavaScript (30.87%)
C++ (20.9%)
CMake (1.06%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1 Stars
402 Commits
7 Forks
6 Branches
Updated on Oct 30, 2024
Maintainers
24
Package Meta Information
Latest Version
3.8.0-0.3.2
Package Id
@react-native-oh-tpl/react-native-view-shot@3.8.0-0.3.2
Unpacked Size
57.82 kB
Size
21.67 kB
File Count
29
NPM Version
9.3.1
Node Version
18.14.1
Published on
Oct 31, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
2
Dev Dependencies
3
react-native-view-shot 
Capture a React Native view to an image.
Install
1yarn add react-native-view-shot 2 3# In Expo 4 5expo install react-native-view-shot
Make sure react-native-view-shot is correctly linked in Xcode (might require a manual installation, refer to React Native doc).
Before React Native 0.60.x you would have to:
1react-native link react-native-view-shot
Since 0.60.x, autolink should just work, on iOS, you'll need to ensure the CocoaPods are installed with:
1npx pod-install
High Level API
1import ViewShot from "react-native-view-shot"; 2 3function ExampleCaptureOnMountManually { 4 const ref = useRef(); 5 6 useEffect(() => { 7 // on mount 8 ref.current.capture().then(uri => { 9 console.log("do something with ", uri); 10 }); 11 }, []); 12 13 return ( 14 <ViewShot ref={ref} options={{ fileName: "Your-File-Name", format: "jpg", quality: 0.9 }}> 15 <Text>...Something to rasterize...</Text> 16 </ViewShot> 17 ); 18} 19 20// alternative 21function ExampleCaptureOnMountSimpler { 22 const ref = useRef(); 23 24 const onCapture = useCallback(uri => { 25 console.log("do something with ", uri); 26 }, []); 27 28 return ( 29 <ViewShot onCapture={onCapture} captureMode="mount"> 30 <Text>...Something to rasterize...</Text> 31 </ViewShot> 32 ); 33} 34 35// waiting an image 36 37function ExampleWaitingCapture { 38 const ref = useRef(); 39 40 const onImageLoad = useCallback(() => { 41 ref.current.capture().then(uri => { 42 console.log("do something with ", uri); 43 }) 44 }, []); 45 46 return ( 47 <ViewShot ref={ref}> 48 <Text>...Something to rasterize...</Text> 49 <Image ... onLoad={onImageLoad} /> 50 </ViewShot> 51 ); 52} 53 54// capture ScrollView content 55// NB: you may need to go the "imperative way" to use snapshotContentContainer with the scrollview ref instead 56function ExampleCaptureOnMountSimpler { 57 const ref = useRef(); 58 59 const onCapture = useCallback(uri => { 60 console.log("do something with ", uri); 61 }, []); 62 63 return ( 64 <ScrollView> 65 <ViewShot onCapture={onCapture} captureMode="mount"> 66 <Text>...The Scroll View Content Goes Here...</Text> 67 </ViewShot> 68 </ScrollView> 69 ); 70}
Props:
children: the actual content to rasterize.options: the same options as incaptureRefmethod.captureMode(string):- if not defined (default). the capture is not automatic and you need to use the ref and call
capture()yourself. "mount". Capture the view once at mount. (It is important to understand image loading won't be waited, in such case you want to use"none"withviewShotRef.capture()afterImage#onLoad.)"continuous"EXPERIMENTAL, this will capture A LOT of images continuously. For very specific use-cases."update"EXPERIMENTAL, this will capture images each time React redraw (on did update). For very specific use-cases.
- if not defined (default). the capture is not automatic and you need to use the ref and call
onCapture: when acaptureModeis defined, this callback will be called with the capture result.onCaptureFailure: when acaptureModeis defined, this callback will be called when a capture fails.
captureRef(view, options) lower level imperative API
1import { captureRef } from "react-native-view-shot"; 2 3captureRef(viewRef, { 4 format: "jpg", 5 quality: 0.8, 6}).then( 7 (uri) => console.log("Image saved to", uri), 8 (error) => console.error("Oops, snapshot failed", error) 9);
Returns a Promise of the image URI.
viewis a reference to a React Native component.optionsmay include:fileName(string): (Android only) the file name of the file. Must be at least 3 characters long.width/height(number): the width and height of the final image (resized from the View bound. don't provide it if you want the original pixel size).format(string): eitherpngorjpgorwebm(Android). Defaults topng.quality(number): the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg)result(string), the method you want to use to save the snapshot, one of:"tmpfile"(default): save to a temporary file (that will only exist for as long as the app is running)."base64": encode as base64 and returns the raw string. Use only with small images as this may result of lags (the string is sent over the bridge). N.B. This is not a data uri, usedata-uriinstead."data-uri": same asbase64but also includes the Data URI scheme header.
snapshotContentContainer(bool): if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height.- [iOS]
useRenderInContext(bool): change the iOS snapshot strategy to use methodrenderInContextinstead ofdrawViewHierarchyInRectwhich may help for some use cases.
releaseCapture(uri)
This method release a previously captured uri. For tmpfile it will clean them out, for other result types it just won't do anything.
NB: the tmpfile captures are automatically cleaned out after the app closes, so you might not have to worry about this unless advanced usecases. The ViewShot component will use it each time you capture more than once (useful for continuous capture to not leak files).
captureScreen() Android and iOS Only
1import { captureScreen } from "react-native-view-shot"; 2 3captureScreen({ 4 format: "jpg", 5 quality: 0.8, 6}).then( 7 (uri) => console.log("Image saved to", uri), 8 (error) => console.error("Oops, snapshot failed", error) 9);
This method will capture the contents of the currently displayed screen as a native hardware screenshot. It does not require a ref input, as it does not work at the view level. This means that ScrollViews will not be captured in their entirety - only the portions currently visible to the user.
Returns a Promise of the image URI.
options: the same options as incaptureRefmethod.
Advanced Examples
Checkout react-native-view-shot-example
Interoperability Table
Snapshots are not guaranteed to be pixel perfect. It also depends on the platform. Here is some difference we have noticed and how to workaround.
Model tested: iPhone 6 (iOS), Nexus 5 (Android).
| System | iOS | Android | Windows |
|---|---|---|---|
| View,Text,Image,.. | YES | YES | YES |
| WebView | YES | YES1 | YES |
| gl-react v2 | YES | NO2 | NO3 |
| react-native-video | NO | NO | NO |
| react-native-maps | YES | NO4 | NO3 |
| react-native-svg | YES | YES | maybe? |
| react-native-camera | NO | YES | NO 3 |
- Only supported by wrapping a
<View collapsable={false}>parent and snapshotting it. - It returns an empty image (not a failure Promise).
- Component itself lacks platform support.
- But you can just use the react-native-maps snapshot function: https://github.com/airbnb/react-native-maps#take-snapshot-of-map
Performance Optimization
During profiling captured several things that influence on performance:
- (de-)allocation of memory for bitmap
- (de-)allocation of memory for Base64 output buffer
- compression of bitmap to different image formats: PNG, JPG
To solve that in code introduced several new approaches:
- reusable images, that reduce load on GC;
- reusable arrays/buffers that also reduce load on GC;
- RAW image format for avoiding expensive compression;
- ZIP deflate compression for RAW data, that works faster in compare to
Bitmap.compress
more details and code snippet are below.
RAW Images
Introduced a new image format RAW. it correspond a ARGB array of pixels.
Advantages:
- no compression, so its supper quick. Screenshot taking is less than 16ms;
RAW format supported for zip-base64, base64 and tmpfile result types.
RAW file on disk saved in format: ${width}:${height}|${base64} string.
zip-base64
In compare to BASE64 result string this format fast try to apply zip/deflate compression on screenshot results and only after that convert results to base64 string. In combination zip-base64 + raw we got a super fast approach for capturing screen views and deliver them to the react side.
How to work with zip-base64 and RAW format?
1const fs = require("fs"); 2const zlib = require("zlib"); 3const PNG = require("pngjs").PNG; 4const Buffer = require("buffer").Buffer; 5 6const format = Platform.OS === "android" ? "raw" : "png"; 7const result = Platform.OS === "android" ? "zip-base64" : "base64"; 8 9captureRef(this.ref, { result, format }).then((data) => { 10 // expected pattern 'width:height|', example: '1080:1731|' 11 const resolution = /^(\d+):(\d+)\|/g.exec(data); 12 const width = (resolution || ["", 0, 0])[1]; 13 const height = (resolution || ["", 0, 0])[2]; 14 const base64 = data.substr((resolution || [""])[0].length || 0); 15 16 // convert from base64 to Buffer 17 const buffer = Buffer.from(base64, "base64"); 18 // un-compress data 19 const inflated = zlib.inflateSync(buffer); 20 // compose PNG 21 const png = new PNG({ width, height }); 22 png.data = inflated; 23 const pngData = PNG.sync.write(png); 24 // save composed PNG 25 fs.writeFileSync(output, pngData); 26});
Keep in mind that packaging PNG data is a CPU consuming operation as a zlib.inflate.
Hint: use process.fork() approach for converting raw data into PNGs.
Note: code is tested in large commercial project.
Note #2: Don't forget to add packages into your project:
1yarn add pngjs 2yarn add zlib
Troubleshooting / FAQ
Saving to a file?
- If you want to save the snapshotted image result to the CameraRoll, just use https://github.com/react-native-cameraroll/react-native-cameraroll
- If you want to save it to an arbitrary file path, use something like https://github.com/itinance/react-native-fs
- For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.
The snapshot is rejected with an error?
- Support of special components like Video / GL views is not guaranteed to work. In case of failure, the
captureRefpromise gets rejected (the library won't crash).
get a black or blank result or still have an error with simple views?
Check the Interoperability Table above. Some special components are unfortunately not supported. If you have a View that contains one of an unsupported component, the whole snapshot might be compromised as well.
black background instead of transparency / weird border appear around texts?
- It's preferable to use a background color on the view you rasterize to avoid transparent pixels and potential weirdness that some border appear around texts.
on Android, getting "Trying to resolve view with tag '{tagID}' which doesn't exist"
you need to make sure
collapsableis set tofalseif you want to snapshot a View. Some content might even need to be wrapped into such<View collapsable={false}>to actually make them snapshotable! Otherwise that view won't reflect any UI View. (found by @gaguirre)
Alternatively, you can use the ViewShot component that will have collapsable={false} set to solve this problem.
Getting "The content size must not be zero or negative."
Make sure you don't snapshot instantly, you need to wait at least there is a first
onLayoutevent, or after a timeout, otherwise the View might not be ready yet. (It should also be safe to just wait ImageonLoadif you have one). If you still have the problem, make sure your view actually have a width and height > 0.
Alternatively, you can use the ViewShot component that will wait the first onLayout.
Snapshotted image does not match my width and height but is twice/3-times bigger
This is because the snapshot image result is in real pixel size where the width/height defined in a React Native style are defined in "point" unit. You might want to set width and height option to force a resize. (might affect image quality)
on Android, capture GL Views
A prop may be necessary to properly capture GL Surface View in the view tree:
1/** 2 * if true and when view is a SurfaceView or have it in the view tree, view will be captured. 3 * False by default, because it can have signoficant performance impact 4 */ 5handleGLSurfaceViewOnAndroid?: boolean;
Trying to share the capture result with expo-sharing?
tmpfile or the default capture result works best for this. Just be sure to prepend file:// to result before you call shareAsync.
1captureRef(viewRef)
2 .then((uri) => Sharing.shareAsync(`file://${uri}`, options)Thanks
- To initial iOS work done by @jsierles in https://github.com/jsierles/react-native-view-snapshot
- To React Native implementation of takeSnapshot in iOS by @nicklockwood
- To Windows implementation by @ryanlntn
No vulnerabilities found.
No security vulnerabilities found.