add Elevation example to reproduce the elevation issue

example/src/App.js

@@ -1,6 +1,14 @@
 // @flow
 import React, { Component, Fragment } from 'react';
-import { SafeAreaView, StatusBar, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  SafeAreaView,
+  StatusBar,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 
@@ -20,6 +28,7 @@ import ARTScreen from './ART';
 import FSScreen from './FS';
 import ModalScreen from './Modal';
 import OffscreenScreen from './Offscreen';
+import ElevationScreen from './Elevation';
 
 const screens = {
   Full: {
@@ -64,6 +73,9 @@ const screens = {
   Offscreen: {
     screen: OffscreenScreen,
   },
+  Elevation: {
+    screen: ElevationScreen,
+  },
 };
 
 ///////////////////////////////////////////////////
@@ -78,17 +90,19 @@ class HomeScreen extends Component {
       <Fragment>
         <StatusBar barStyle="dark-content" />
         <SafeAreaView>
-          {Object.keys(screens).map(key => (
-            <TouchableOpacity key={key} onPress={() => navigation.navigate(key)}>
-              <View style={styles.entry}>
-                <Text style={styles.entryText}>
-                  {(screens[key].screen.navigationOptions &&
-                    screens[key].screen.navigationOptions.title) ||
-                    key}
-                </Text>
-              </View>
-            </TouchableOpacity>
-          ))}
+          <ScrollView>
+            {Object.keys(screens).map(key => (
+              <TouchableOpacity key={key} onPress={() => navigation.navigate(key)}>
+                <View style={styles.entry}>
+                  <Text style={styles.entryText}>
+                    {(screens[key].screen.navigationOptions &&
+                      screens[key].screen.navigationOptions.title) ||
+                      key}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
         </SafeAreaView>
       </Fragment>
     );

example/src/Blur.js

@@ -7,7 +7,7 @@ import Desc from './Desc';
 
 const dimension = { width: 300, height: 300 };
 
-const SvgUriExample = () => {
+const BlurExample = () => {
   const [source, setSource] = useState(null);
   const [viewHandle, setRefHandle] = useState(null);
   const onCapture = useCallback(uri => setSource({ uri }), []);
@@ -38,8 +38,8 @@ const SvgUriExample = () => {
   );
 };
 
-SvgUriExample.navigationOptions = {
+BlurExample.navigationOptions = {
   title: 'react-native-community/blur',
 };
 
-export default SvgUriExample;
+export default BlurExample;

example/src/Elevation.js

@@ -0,0 +1,87 @@
+//@flow
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { SafeAreaView, View, Image } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import Desc from './Desc';
+
+const dimension = { width: 200, height: 200 };
+
+const ElevationExample = () => {
+  const [source, setSource] = useState(null);
+  const [viewHandle, setRefHandle] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  const viewRef = useRef();
+  const ref = useRef();
+  return (
+    <SafeAreaView>
+      <ViewShot ref={ref} captureMode="mount" onCapture={onCapture} style={dimension}>
+        <View
+          style={{
+            position: 'absolute',
+            backgroundColor: 'white',
+            width: 80,
+            height: 80,
+            top: 40,
+            left: 40,
+            elevation: 1,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            backgroundColor: 'white',
+            width: 80,
+            height: 80,
+            top: 80,
+            left: 80,
+            elevation: 4,
+          }}
+        />
+
+        <View
+          style={{
+            position: 'absolute',
+            backgroundColor: 'white',
+            width: 10,
+            height: 10,
+            top: 20,
+            left: 140,
+            elevation: 1,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            backgroundColor: 'white',
+            width: 10,
+            height: 10,
+            top: 40,
+            left: 140,
+            elevation: 2,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            backgroundColor: 'white',
+            width: 10,
+            height: 10,
+            top: 60,
+            left: 140,
+            elevation: 3,
+          }}
+        />
+      </ViewShot>
+
+      <Desc desc="" />
+
+      <Image fadeDuration={0} source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+ElevationExample.navigationOptions = {
+  title: 'Elevation',
+};
+
+export default ElevationExample;

example/src/Offscreen.js

@@ -9,7 +9,7 @@ const OffscreenViewShot = ({ width, height, ...rest }) => (
   <ViewShot {...rest} style={{ width, height, position: 'absolute', right: -width - 5 }} />
 );
 
-const SvgUriExample = () => {
+const OffscreenExample = () => {
   const [source, setSource] = useState(null);
   const onCapture = useCallback(uri => setSource({ uri }), []);
 
@@ -33,8 +33,8 @@ const SvgUriExample = () => {
   );
 };
 
-SvgUriExample.navigationOptions = {
+OffscreenExample.navigationOptions = {
   title: 'Offscreen',
 };
 
-export default SvgUriExample;
+export default OffscreenExample;