From 6694a6147a51ee3c0036acc514200c9d06dfbd5a Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Sun, 19 May 2019 22:33:38 +0200
Subject: [PATCH] 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 https://github.com/kmagiera/react-native-screens/issues/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.
---
 src/App.tsx              |  5 ++++-
 src/components/Stack.tsx | 36 +++++++++++++++++++++++++++---------
 2 files changed, 31 insertions(+), 10 deletions(-)

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>
     );
   }
 }