Try to setup react-native-screens

This seems super-buggy atm.

On Android, initially this seems to work, but as soon as you start swiping and then release, no gestures such as touch work after that.
Same issue can also be reproduced if you just leave all screens active. Seems to be software-mansion/react-native-screens#61

On iOS, I get `undefined is not an object (evaluating 'this._ref.setNativeProps')`.
The `ref` is undefined for some reason only on iOS: https://github.com/kmagiera/react-native-screens/blob/acf80e640c584bf4019cfaf9356ee44b09e7dc99/src/screens.native.js#L44

If you do `active={focused ? 1 : 0}`, it works as expected on Android (though not desirable).
However, on iOS, no gestures such as touch seem to work.

Author: satya164

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,

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 ? 'auto' : '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'
@@ -88,17 +108,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>
     );
   }
 }