Browse Source

add Transparency example

Gaëtan Renaudeau 5 years ago
parent
commit
1c8d61f2c8
No account linked to committer's email address
3 changed files with 88 additions and 1235 deletions
  1. 4
    0
      example/src/App.js
  2. 51
    0
      example/src/Transparency.js
  3. 33
    1235
      example/yarn.lock

+ 4
- 0
example/src/App.js View File

@@ -4,6 +4,7 @@ import { SafeAreaView, StatusBar, View, Text, TouchableOpacity, StyleSheet } fro
4 4
 import { createStackNavigator, createAppContainer } from 'react-navigation';
5 5
 import FullScreen from './Full';
6 6
 import ViewshootScreen from './Viewshoot';
7
+import TransparencyScreen from './Transparency';
7 8
 
8 9
 class HomeScreen extends React.Component {
9 10
   static navigationOptions = {
@@ -46,6 +47,9 @@ const screens = {
46 47
   Viewshoot: {
47 48
     screen: ViewshootScreen,
48 49
   },
50
+  Transparency: {
51
+    screen: TransparencyScreen,
52
+  },
49 53
 };
50 54
 
51 55
 const AppNavigator = createStackNavigator({

+ 51
- 0
example/src/Transparency.js View File

@@ -0,0 +1,51 @@
1
+//@flow
2
+import React, { Component, useCallback, useState } from 'react';
3
+import { ScrollView, StyleSheet, Text, View, Button, Image } from 'react-native';
4
+import ViewShot from 'react-native-view-shot';
5
+
6
+const Transparency = () => {
7
+  const [source, setSource] = useState(null);
8
+  const onCapture = useCallback(uri => setSource({ uri }), []);
9
+  return (
10
+    <View
11
+      style={{
12
+        flexDirection: 'column',
13
+        alignItems: 'center',
14
+        justifyContent: 'space-around',
15
+        flex: 1,
16
+        backgroundColor: '#ccc',
17
+      }}
18
+    >
19
+      <ViewShot onCapture={onCapture} captureMode="mount" style={{ width: 100, height: 100 }}>
20
+        <View
21
+          style={{
22
+            borderRadius: 50,
23
+            padding: 10,
24
+            width: 100,
25
+            height: 100,
26
+            backgroundColor: 'cyan',
27
+            borderWidth: 2,
28
+            borderColor: 'blue',
29
+          }}
30
+        />
31
+      </ViewShot>
32
+      <View
33
+        style={{
34
+          backgroundColor: '#f00',
35
+          width: 150,
36
+          height: 150,
37
+          alignItems: 'center',
38
+          justifyContent: 'center',
39
+        }}
40
+      >
41
+        <Image source={source} style={{ width: 100, height: 100 }} />
42
+      </View>
43
+    </View>
44
+  );
45
+};
46
+
47
+Transparency.navigationProps = {
48
+  title: 'Transparency',
49
+};
50
+
51
+export default Transparency;

+ 33
- 1235
example/yarn.lock
File diff suppressed because it is too large
View File