Gaëtan Renaudeau 3494679d16 1.12.0 | преди 7 години | |
---|---|---|
android | преди 7 години | |
ios | преди 7 години | |
windows | преди 7 години | |
.flowconfig | преди 8 години | |
.gitignore | преди 8 години | |
LICENSE | преди 8 години | |
README.md | преди 7 години | |
RNViewShot.podspec | преди 7 години | |
index.js | преди 7 години | |
jsconfig.json | преди 7 години | |
package.json | преди 7 години |
Capture a React Native view to an image.
iOS: For React Native version between
0.30.x
and0.39.x
, you should usereact-native-view-shot@1.5.1
.
import { takeSnapshot } from "react-native-view-shot";
takeSnapshot(viewRef, {
format: "jpeg",
quality: 0.8
})
.then(
uri => console.log("Image saved to", uri),
error => console.error("Oops, snapshot failed", error)
);
Checkout react-native-view-shot-example
takeSnapshot(view, options)
Returns a Promise of the image URI.
view
is a reference to a React Native component.options
may include:
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): either png
or jpg
/jpeg
or webm
(Android). Defaults to png
.quality
(number): the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpeg)result
(string), the method you want to use to save the snapshot, one of:"file"
(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, use data-uri
instead."data-uri"
: same as base64
but 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.path
option and dirs
constantsA feature used to allow to set an arbitrary file path. This has become tricky to maintain because all the edge cases and use-cases of file management so we have decided to drop it, making this library focusing more on solving snapshotting and not file system.
To migrate from this old feature, you have a few solutions:
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 |
- 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
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.
takeSnapshot
promise gets rejected (the library won’t crash).collapsable
is set to false
if 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)Uri
. (the file
result returns an Uri
so it’s consistent with iOS and can be given to APIs like Image.getSize
)npm install --save react-native-view-shot
react-native link react-native-view-shot
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-view-shot
and add RNViewShot.xcodeproj
libRNViewShot.a
to your project’s Build Phases
➜ Link Binary With Libraries
Cmd+R
)<android/app/src/main/java/[...]/MainActivity.java
import fr.greweb.reactnativeviewshot.RNViewShotPackage;
to the imports at the top of the filenew RNViewShotPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-view-shot'
project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')
android/app/build.gradle
:
compile project(':react-native-view-shot')
Add
➜ ExisitingProject
node_modules
➜ react-native-view-shot
and add RNViewShot.csproj
(UWP) or optionally RNViewShot.Net46.csproj
(WPF)Add
➜ Reference
RNViewShot
(UWP) or RNViewShot.Net46
(WPF)