Browse Source

add Elevation example to reproduce the elevation issue

Gaëtan Renaudeau 4 years ago
parent
commit
a4e15ff12b
No account linked to committer's email address
4 changed files with 119 additions and 18 deletions
  1. 26
    12
      example/src/App.js
  2. 3
    3
      example/src/Blur.js
  3. 87
    0
      example/src/Elevation.js
  4. 3
    3
      example/src/Offscreen.js

+ 26
- 12
example/src/App.js View File

@@ -1,6 +1,14 @@
1 1
 // @flow
2 2
 import React, { Component, Fragment } from 'react';
3
-import { SafeAreaView, StatusBar, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
3
+import {
4
+  SafeAreaView,
5
+  StatusBar,
6
+  View,
7
+  Text,
8
+  TouchableOpacity,
9
+  StyleSheet,
10
+  ScrollView,
11
+} from 'react-native';
4 12
 import { createAppContainer } from 'react-navigation';
5 13
 import { createStackNavigator } from 'react-navigation-stack';
6 14
 
@@ -20,6 +28,7 @@ import ARTScreen from './ART';
20 28
 import FSScreen from './FS';
21 29
 import ModalScreen from './Modal';
22 30
 import OffscreenScreen from './Offscreen';
31
+import ElevationScreen from './Elevation';
23 32
 
24 33
 const screens = {
25 34
   Full: {
@@ -64,6 +73,9 @@ const screens = {
64 73
   Offscreen: {
65 74
     screen: OffscreenScreen,
66 75
   },
76
+  Elevation: {
77
+    screen: ElevationScreen,
78
+  },
67 79
 };
68 80
 
69 81
 ///////////////////////////////////////////////////
@@ -78,17 +90,19 @@ class HomeScreen extends Component {
78 90
       <Fragment>
79 91
         <StatusBar barStyle="dark-content" />
80 92
         <SafeAreaView>
81
-          {Object.keys(screens).map(key => (
82
-            <TouchableOpacity key={key} onPress={() => navigation.navigate(key)}>
83
-              <View style={styles.entry}>
84
-                <Text style={styles.entryText}>
85
-                  {(screens[key].screen.navigationOptions &&
86
-                    screens[key].screen.navigationOptions.title) ||
87
-                    key}
88
-                </Text>
89
-              </View>
90
-            </TouchableOpacity>
91
-          ))}
93
+          <ScrollView>
94
+            {Object.keys(screens).map(key => (
95
+              <TouchableOpacity key={key} onPress={() => navigation.navigate(key)}>
96
+                <View style={styles.entry}>
97
+                  <Text style={styles.entryText}>
98
+                    {(screens[key].screen.navigationOptions &&
99
+                      screens[key].screen.navigationOptions.title) ||
100
+                      key}
101
+                  </Text>
102
+                </View>
103
+              </TouchableOpacity>
104
+            ))}
105
+          </ScrollView>
92 106
         </SafeAreaView>
93 107
       </Fragment>
94 108
     );

+ 3
- 3
example/src/Blur.js View File

@@ -7,7 +7,7 @@ import Desc from './Desc';
7 7
 
8 8
 const dimension = { width: 300, height: 300 };
9 9
 
10
-const SvgUriExample = () => {
10
+const BlurExample = () => {
11 11
   const [source, setSource] = useState(null);
12 12
   const [viewHandle, setRefHandle] = useState(null);
13 13
   const onCapture = useCallback(uri => setSource({ uri }), []);
@@ -38,8 +38,8 @@ const SvgUriExample = () => {
38 38
   );
39 39
 };
40 40
 
41
-SvgUriExample.navigationOptions = {
41
+BlurExample.navigationOptions = {
42 42
   title: 'react-native-community/blur',
43 43
 };
44 44
 
45
-export default SvgUriExample;
45
+export default BlurExample;

+ 87
- 0
example/src/Elevation.js View File

@@ -0,0 +1,87 @@
1
+//@flow
2
+import React, { useState, useCallback, useRef, useEffect } from 'react';
3
+import { SafeAreaView, View, Image } from 'react-native';
4
+import ViewShot from 'react-native-view-shot';
5
+import Desc from './Desc';
6
+
7
+const dimension = { width: 200, height: 200 };
8
+
9
+const ElevationExample = () => {
10
+  const [source, setSource] = useState(null);
11
+  const [viewHandle, setRefHandle] = useState(null);
12
+  const onCapture = useCallback(uri => setSource({ uri }), []);
13
+  const viewRef = useRef();
14
+  const ref = useRef();
15
+  return (
16
+    <SafeAreaView>
17
+      <ViewShot ref={ref} captureMode="mount" onCapture={onCapture} style={dimension}>
18
+        <View
19
+          style={{
20
+            position: 'absolute',
21
+            backgroundColor: 'white',
22
+            width: 80,
23
+            height: 80,
24
+            top: 40,
25
+            left: 40,
26
+            elevation: 1,
27
+          }}
28
+        />
29
+        <View
30
+          style={{
31
+            position: 'absolute',
32
+            backgroundColor: 'white',
33
+            width: 80,
34
+            height: 80,
35
+            top: 80,
36
+            left: 80,
37
+            elevation: 4,
38
+          }}
39
+        />
40
+
41
+        <View
42
+          style={{
43
+            position: 'absolute',
44
+            backgroundColor: 'white',
45
+            width: 10,
46
+            height: 10,
47
+            top: 20,
48
+            left: 140,
49
+            elevation: 1,
50
+          }}
51
+        />
52
+        <View
53
+          style={{
54
+            position: 'absolute',
55
+            backgroundColor: 'white',
56
+            width: 10,
57
+            height: 10,
58
+            top: 40,
59
+            left: 140,
60
+            elevation: 2,
61
+          }}
62
+        />
63
+        <View
64
+          style={{
65
+            position: 'absolute',
66
+            backgroundColor: 'white',
67
+            width: 10,
68
+            height: 10,
69
+            top: 60,
70
+            left: 140,
71
+            elevation: 3,
72
+          }}
73
+        />
74
+      </ViewShot>
75
+
76
+      <Desc desc="" />
77
+
78
+      <Image fadeDuration={0} source={source} style={dimension} />
79
+    </SafeAreaView>
80
+  );
81
+};
82
+
83
+ElevationExample.navigationOptions = {
84
+  title: 'Elevation',
85
+};
86
+
87
+export default ElevationExample;

+ 3
- 3
example/src/Offscreen.js View File

@@ -9,7 +9,7 @@ const OffscreenViewShot = ({ width, height, ...rest }) => (
9 9
   <ViewShot {...rest} style={{ width, height, position: 'absolute', right: -width - 5 }} />
10 10
 );
11 11
 
12
-const SvgUriExample = () => {
12
+const OffscreenExample = () => {
13 13
   const [source, setSource] = useState(null);
14 14
   const onCapture = useCallback(uri => setSource({ uri }), []);
15 15
 
@@ -33,8 +33,8 @@ const SvgUriExample = () => {
33 33
   );
34 34
 };
35 35
 
36
-SvgUriExample.navigationOptions = {
36
+OffscreenExample.navigationOptions = {
37 37
   title: 'Offscreen',
38 38
 };
39 39
 
40
-export default SvgUriExample;
40
+export default OffscreenExample;