| 
				
			 | 
			
			
				@@ -0,0 +1,112 @@ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				1
			 | 
			
			
				+/** 
			 | 
		
	
		
			
			| 
				
			 | 
			
				2
			 | 
			
			
				+ * Sample How To Screenshot Screen inside of ScrollView 
			 | 
		
	
		
			
			| 
				
			 | 
			
				3
			 | 
			
			
				+ * The original github from  
			 | 
		
	
		
			
			| 
				
			 | 
			
				4
			 | 
			
			
				+ * https://github.com/gre/react-native-view-shot 
			 | 
		
	
		
			
			| 
				
			 | 
			
				5
			 | 
			
			
				+ */ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				6
			 | 
			
			
				+import React, {Component} from 'react'; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				7
			 | 
			
			
				+import {ScrollView, StyleSheet, Text, View, Button, Image, } from 'react-native'; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				8
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				9
			 | 
			
			
				+import ViewShot from "react-native-view-shot"; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				10
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				11
			 | 
			
			
				+export default class App extends Component { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				12
			 | 
			
			
				+    constructor(props) { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				13
			 | 
			
			
				+        super(props) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				14
			 | 
			
			
				+        this.state={ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				15
			 | 
			
			
				+            error: null, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				16
			 | 
			
			
				+            res: null, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				17
			 | 
			
			
				+            options: { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				18
			 | 
			
			
				+                format: "jpg", 
			 | 
		
	
		
			
			| 
				
			 | 
			
				19
			 | 
			
			
				+                quality: 0.9 
			 | 
		
	
		
			
			| 
				
			 | 
			
				20
			 | 
			
			
				+            } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				21
			 | 
			
			
				+        } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				22
			 | 
			
			
				+    } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				23
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				24
			 | 
			
			
				+    renderContent() 
			 | 
		
	
		
			
			| 
				
			 | 
			
				25
			 | 
			
			
				+	{ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				26
			 | 
			
			
				+		const data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				27
			 | 
			
			
				+		return data.map((item,index) => { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				28
			 | 
			
			
				+			return ( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				29
			 | 
			
			
				+				<View style={styles.item} key={index}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				30
			 | 
			
			
				+					<Text>{item}</Text> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				31
			 | 
			
			
				+				</View> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				32
			 | 
			
			
				+			); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				33
			 | 
			
			
				+		}) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				34
			 | 
			
			
				+	} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				35
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				36
			 | 
			
			
				+    renderResultSnapshot() 
			 | 
		
	
		
			
			| 
				
			 | 
			
				37
			 | 
			
			
				+    { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				38
			 | 
			
			
				+        if(this.state.res!==null) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				39
			 | 
			
			
				+        { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				40
			 | 
			
			
				+        console.log('Result on return snapshot: ', this.state.res); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				41
			 | 
			
			
				+        return( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				42
			 | 
			
			
				+            <Image 
			 | 
		
	
		
			
			| 
				
			 | 
			
				43
			 | 
			
			
				+                fadeDuration={0} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				44
			 | 
			
			
				+                resizeMode="contain" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				45
			 | 
			
			
				+                style={styles.previewImage} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				46
			 | 
			
			
				+                source={this.state.res} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				47
			 | 
			
			
				+            /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				48
			 | 
			
			
				+        ); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				49
			 | 
			
			
				+        } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				50
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				51
			 | 
			
			
				+        return; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				52
			 | 
			
			
				+    } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				53
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				54
			 | 
			
			
				+     
			 | 
		
	
		
			
			| 
				
			 | 
			
				55
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				56
			 | 
			
			
				+    renderShootButton(){ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				57
			 | 
			
			
				+        return( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				58
			 | 
			
			
				+            <Button 
			 | 
		
	
		
			
			| 
				
			 | 
			
				59
			 | 
			
			
				+                onPress={ async () => await this.captureViewShoot()} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				60
			 | 
			
			
				+                title="Shoot Me" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				61
			 | 
			
			
				+                color="#841584" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				62
			 | 
			
			
				+            /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				63
			 | 
			
			
				+        ) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				64
			 | 
			
			
				+    } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				65
			 | 
			
			
				+     
			 | 
		
	
		
			
			| 
				
			 | 
			
				66
			 | 
			
			
				+    captureViewShoot() 
			 | 
		
	
		
			
			| 
				
			 | 
			
				67
			 | 
			
			
				+    { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				68
			 | 
			
			
				+        this.refs.full.capture().then(uri => { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				69
			 | 
			
			
				+            console.log("do something with ", uri); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				70
			 | 
			
			
				+            this.setState({res: {uri: uri}}) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				71
			 | 
			
			
				+        }); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				72
			 | 
			
			
				+    } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				73
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				74
			 | 
			
			
				+    renderViewShot() 
			 | 
		
	
		
			
			| 
				
			 | 
			
				75
			 | 
			
			
				+    { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				76
			 | 
			
			
				+        return( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				77
			 | 
			
			
				+            <ScrollView style={styles.container}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				78
			 | 
			
			
				+                <ViewShot  
			 | 
		
	
		
			
			| 
				
			 | 
			
				79
			 | 
			
			
				+                    ref="full"  
			 | 
		
	
		
			
			| 
				
			 | 
			
				80
			 | 
			
			
				+                    options={{ format: this.state.options.format, quality: this.state.options.quality }}  
			 | 
		
	
		
			
			| 
				
			 | 
			
				81
			 | 
			
			
				+                    style={styles.container} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				82
			 | 
			
			
				+                > 
			 | 
		
	
		
			
			| 
				
			 | 
			
				83
			 | 
			
			
				+                    {this.renderResultSnapshot()} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				84
			 | 
			
			
				+                    {this.renderContent()} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				85
			 | 
			
			
				+                    {this.renderShootButton()} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				86
			 | 
			
			
				+                </ViewShot> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				87
			 | 
			
			
				+            </ScrollView> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				88
			 | 
			
			
				+        ) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				89
			 | 
			
			
				+    } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				90
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				91
			 | 
			
			
				+    render() { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				92
			 | 
			
			
				+        return this.renderViewShot(); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				93
			 | 
			
			
				+    } 
			 | 
		
	
		
			
			| 
				
			 | 
			
				94
			 | 
			
			
				+} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				95
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				96
			 | 
			
			
				+const styles = StyleSheet.create({ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				97
			 | 
			
			
				+    container: { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				98
			 | 
			
			
				+        flex: 1, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				99
			 | 
			
			
				+        backgroundColor: '#fff' 
			 | 
		
	
		
			
			| 
				
			 | 
			
				100
			 | 
			
			
				+    }, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				101
			 | 
			
			
				+    content: { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				102
			 | 
			
			
				+        padding: 10, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				103
			 | 
			
			
				+        backgroundColor: '#fff' 
			 | 
		
	
		
			
			| 
				
			 | 
			
				104
			 | 
			
			
				+    }, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				105
			 | 
			
			
				+    item: { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				106
			 | 
			
			
				+        height: 50, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				107
			 | 
			
			
				+    }, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				108
			 | 
			
			
				+    previewImage: { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				109
			 | 
			
			
				+        width: 375, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				110
			 | 
			
			
				+        height: 300 
			 | 
		
	
		
			
			| 
				
			 | 
			
				111
			 | 
			
			
				+    }, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				112
			 | 
			
			
				+}); 
			 |