From 7bc1922bb8e35f4a491d7c9fa0afda2e8424e4bc 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 | 26 +++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2ed4b31..6087624 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';
 
 type CustomRoute = Route & { initial?: boolean };
@@ -73,6 +74,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 73c6a77..5012ac9 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';
 import Card from './Card';
 import { SlideFromRightIOS } from '../TransitionConfigs/TransitionPresets';
@@ -33,6 +34,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>
@@ -89,7 +99,7 @@ export default class Stack<T extends Route> extends React.Component<
           }))}
           onGoBack={onGoBack}
         />
-        <View
+        <ScreenContainer
           style={styles.container}
           onLayout={this.handleLayout}
           pointerEvents={layout.height && layout.width ? 'box-none' : 'none'}
@@ -102,8 +112,14 @@ export default class Stack<T extends Route> extends React.Component<
               : 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'
@@ -126,10 +142,10 @@ export default class Stack<T extends Route> extends React.Component<
                     index,
                   })}
                 </Card>
-              </View>
+              </AnimatedScreen>
             );
           })}
-        </View>
+        </ScreenContainer>
       </React.Fragment>
     );
   }