diff --git a/src/App.tsx b/src/App.tsx
index c4a11ca..0c693a3 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import { View, Text, Button, Platform, StyleSheet } from 'react-native';
+import { useScreens } from 'react-native-screens';
 import Stack, { SceneProps, Route } from './components/Stack';
 import Card from './components/Card';
 import { SlideFromRightIOS } from './TransitionConfigs/TransitionPresets';
@@ -71,6 +72,8 @@ export default class App extends React.Component<{}, State> {
   }
 }
 
+useScreens(true);
+
 const styles = StyleSheet.create({
   item: {
     margin: 8,
diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
index b280060..4665990 100755
--- a/src/components/Stack.tsx
+++ b/src/components/Stack.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { View, StyleSheet, LayoutChangeEvent } from 'react-native';
+import { StyleSheet, LayoutChangeEvent, ViewProps } from 'react-native';
+import { Screen, ScreenContainer } from 'react-native-screens';
 import Animated from 'react-native-reanimated';
 
 export type Route = { key: string };
@@ -28,6 +29,15 @@ type State<T> = {
   layout: Layout;
 };
 
+const { cond, eq } = Animated;
+
+// @ts-ignore
+const AnimatedScreen = Animated.createAnimatedComponent(
+  Screen
+) as React.ComponentType<
+  ViewProps & { active: number | Animated.Node<number> }
+>;
+
 export default class Stack<T extends Route> extends React.Component<
   Props<T>,
   State<T>
@@ -67,17 +77,27 @@ export default class Stack<T extends Route> extends React.Component<
     const { layout, progress } = this.state;
 
     return (
-      <View
+      <ScreenContainer
         style={styles.container}
         onLayout={this.handleLayout}
         pointerEvents={layout.height && layout.width ? 'box-none' : 'none'}
       >
         {routes.map((route, index, self) => {
           const focused = index === self.length - 1;
+          const current = progress[route.key];
+          const next = self[index + 1]
+            ? progress[self[index + 1].key]
+            : undefined;
 
           return (
-            <View
+            <AnimatedScreen
               key={route.key}
+              active={
+                // Mark focused screen to be always active
+                // Mark unfocused screen as active if the next screen is currently transitioning
+                // Coz the screen will be visible underneath next screen when it's transitioning
+                focused ? 1 : next ? cond(eq(next, 1), 0, 1) : 1
+              }
               accessibilityElementsHidden={!focused}
               importantForAccessibility={
                 focused ? 'auto' : 'no-hide-descendants'
@@ -89,17 +109,15 @@ export default class Stack<T extends Route> extends React.Component<
                 {
                   route,
                   layout,
-                  current: progress[route.key],
-                  next: self[index + 1]
-                    ? progress[self[index + 1].key]
-                    : undefined,
+                  current,
+                  next,
                 },
                 index
               )}
-            </View>
+            </AnimatedScreen>
           );
         })}
-      </View>
+      </ScreenContainer>
     );
   }
 }