|
@@ -5,45 +5,7 @@ Snapshot a React Native view and save it to an image.
|
5
|
5
|
|
6
|
6
|
The image will be stored in a temporary file that will only exist for as long as the app is running.
|
7
|
7
|
|
8
|
|
-## Getting started
|
9
|
|
-
|
10
|
|
-```
|
11
|
|
-npm install --save react-native-view-shot
|
12
|
|
-```
|
13
|
|
-
|
14
|
|
-### Mostly automatic installation
|
15
|
|
-
|
16
|
|
-```
|
17
|
|
-react-native link react-native-view-shot
|
18
|
|
-```
|
19
|
|
-
|
20
|
|
-### Manual installation
|
21
|
|
-
|
22
|
|
-#### iOS
|
23
|
|
-
|
24
|
|
-1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
|
25
|
|
-2. Go to `node_modules` ➜ `react-native-view-shot` and add `RNViewShot.xcodeproj`
|
26
|
|
-3. In XCode, in the project navigator, select your project. Add `libRNViewShot.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
|
27
|
|
-4. Run your project (`Cmd+R`)<
|
28
|
|
-
|
29
|
|
-#### Android
|
30
|
|
-
|
31
|
|
-1. Open up `android/app/src/main/java/[...]/MainActivity.java`
|
32
|
|
- - Add `import com.reactlibrary.RNViewShotPackage;` to the imports at the top of the file
|
33
|
|
- - Add `new RNViewShotPackage()` to the list returned by the `getPackages()` method
|
34
|
|
-2. Append the following lines to `android/settings.gradle`:
|
35
|
|
- ```
|
36
|
|
- include ':react-native-view-shot'
|
37
|
|
- project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')
|
38
|
|
- ```
|
39
|
|
-3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
|
40
|
|
- ```
|
41
|
|
- compile project(':react-native-view-shot')
|
42
|
|
- ```
|
43
|
|
-
|
44
|
|
-#### Windows
|
45
|
|
-
|
46
|
|
-No support yet. Feel free to PR.
|
|
8
|
+<img src="https://github.com/gre/react-native-view-shot-example/raw/master/docs/recursive.gif" width=300 />
|
47
|
9
|
|
48
|
10
|
## Usage
|
49
|
11
|
|
|
@@ -77,6 +39,47 @@ Returns a Promise of the image URI.
|
77
|
39
|
- **`format`** *(string)*: either `png` or `jpg`/`jpeg` or `webm` (Android). Defaults to `png`.
|
78
|
40
|
- **`quality`** *(number)*: the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpeg)
|
79
|
41
|
|
|
42
|
+
|
|
43
|
+ ## Getting started
|
|
44
|
+
|
|
45
|
+ ```
|
|
46
|
+ npm install --save react-native-view-shot
|
|
47
|
+ ```
|
|
48
|
+
|
|
49
|
+ ### Mostly automatic installation
|
|
50
|
+
|
|
51
|
+ ```
|
|
52
|
+ react-native link react-native-view-shot
|
|
53
|
+ ```
|
|
54
|
+
|
|
55
|
+ ### Manual installation
|
|
56
|
+
|
|
57
|
+ #### iOS
|
|
58
|
+
|
|
59
|
+ 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
|
|
60
|
+ 2. Go to `node_modules` ➜ `react-native-view-shot` and add `RNViewShot.xcodeproj`
|
|
61
|
+ 3. In XCode, in the project navigator, select your project. Add `libRNViewShot.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
|
|
62
|
+ 4. Run your project (`Cmd+R`)<
|
|
63
|
+
|
|
64
|
+ #### Android
|
|
65
|
+
|
|
66
|
+ 1. Open up `android/app/src/main/java/[...]/MainActivity.java`
|
|
67
|
+ - Add `import com.reactlibrary.RNViewShotPackage;` to the imports at the top of the file
|
|
68
|
+ - Add `new RNViewShotPackage()` to the list returned by the `getPackages()` method
|
|
69
|
+ 2. Append the following lines to `android/settings.gradle`:
|
|
70
|
+ ```
|
|
71
|
+ include ':react-native-view-shot'
|
|
72
|
+ project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')
|
|
73
|
+ ```
|
|
74
|
+ 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
|
|
75
|
+ ```
|
|
76
|
+ compile project(':react-native-view-shot')
|
|
77
|
+ ```
|
|
78
|
+
|
|
79
|
+ #### Windows
|
|
80
|
+
|
|
81
|
+ No support yet. Feel free to PR.
|
|
82
|
+
|
80
|
83
|
## Notes
|
81
|
84
|
|
82
|
85
|
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.
|