fix: screens integration on Android (#294)

example/package.json

@@ -24,7 +24,7 @@
     "react-native-paper": "^3.5.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.25",
+    "react-native-screens": "^2.0.0-alpha.31",
     "react-native-tab-view": "2.11.0",
     "react-native-unimodules": "^0.7.0",
     "react-native-web": "^0.11.7"

packages/drawer/package.json

@@ -45,7 +45,7 @@
     "react-native-gesture-handler": "^1.5.3",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.25",
+    "react-native-screens": "^2.0.0-alpha.31",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
@@ -55,7 +55,7 @@
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
     "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.31"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/native-stack/package.json

@@ -31,14 +31,14 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.8.0",
     "del-cli": "^3.0.0",
-    "react-native-screens": "^2.0.0-alpha.25",
+    "react-native-screens": "^2.0.0-alpha.31",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": "^2.0.0-alpha.25"
+    "react-native-screens": "^2.0.0-alpha.31"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/package.json

@@ -45,7 +45,7 @@
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.5.3",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.25",
+    "react-native-screens": "^2.0.0-alpha.31",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
@@ -55,7 +55,7 @@
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.31"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/src/views/Stack/CardContainer.tsx

@@ -55,6 +55,8 @@ type Props = TransitionPreset & {
   }) => void;
 };
 
+const EPSILON = 0.01;
+
 function CardContainer({
   active,
   cardOverlayEnabled,
@@ -128,6 +130,24 @@ function CardContainer({
 
   const { colors } = useTheme();
 
+  const [pointerEvents, setPointerEvents] = React.useState<'box-none' | 'none'>(
+    'box-none'
+  );
+
+  React.useEffect(() => {
+    const valueListenerCallback = ({ value }: { value: number }) => {
+      setPointerEvents(value <= EPSILON ? 'box-none' : 'none');
+    };
+    // @ts-ignore
+    const listener = scene.progress.next?.addListener(valueListenerCallback);
+    return () => {
+      if (listener) {
+        // @ts-ignore
+        scene.progress.next?.removeListener(listener);
+      }
+    };
+  }, [pointerEvents, scene.progress.next]);
+
   return (
     <Card
       index={index}
@@ -152,7 +172,7 @@ function CardContainer({
       styleInterpolator={cardStyleInterpolator}
       accessibilityElementsHidden={!focused}
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
-      pointerEvents="box-none"
+      pointerEvents={active ? 'box-none' : pointerEvents}
       containerStyle={
         headerMode === 'float' && !headerTransparent && headerShown !== false
           ? { marginTop: headerHeight }

packages/stack/src/views/Stack/CardStack.tsx

@@ -38,6 +38,14 @@ type GestureValues = {
   [key: string]: Animated.Value;
 };
 
+// @ts-ignore
+const maybeExpoVersion = global.Expo?.Constants.manifest.sdkVersion.split(
+  '.'
+)[0];
+const isInsufficientExpoVersion = maybeExpoVersion
+  ? Number(maybeExpoVersion) <= 36
+  : false;
+
 type Props = {
   mode: StackCardMode;
   insets: EdgeInsets;
@@ -74,7 +82,7 @@ type State = {
   headerHeights: Record<string, number>;
 };
 
-const EPSILON = 1e-5;
+const EPSILON = 0.01;
 const FAR_FAR_AWAY = 9000;
 
 const dimensions = Dimensions.get('window');
@@ -437,7 +445,7 @@ export default class CardStack extends React.Component<Props, State> {
 
     // Screens is buggy on iOS, so we don't enable it there
     // For modals, usually we want the screen underneath to be visible, so also disable it there
-    const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
+    const isScreensEnabled = Platform.OS !== 'ios';
 
     return (
       <React.Fragment>
@@ -452,21 +460,25 @@ export default class CardStack extends React.Component<Props, State> {
             const scene = scenes[index];
 
             // Display current screen and a screen beneath.
-            // On Android screen beneath is hidden on animation finished bs of RNS's issue.
-            const isScreenActive =
-              index === self.length - 1
-                ? 1
-                : Platform.OS === 'android'
-                ? scene.progress.next
-                  ? scene.progress.next.interpolate({
-                      inputRange: [0, 1 - EPSILON, 1],
-                      outputRange: [1, 1, 0],
-                      extrapolate: 'clamp',
-                    })
-                  : 1
-                : index === self.length - 2
-                ? 1
-                : 0;
+
+            let isScreenActive: Animated.AnimatedInterpolation | 0 | 1 =
+              index >= self.length - 2 ? 1 : 0;
+            if (isInsufficientExpoVersion) {
+              isScreenActive =
+                index === self.length - 1
+                  ? 1
+                  : Platform.OS === 'android'
+                  ? scene.progress.next
+                    ? scene.progress.next.interpolate({
+                        inputRange: [0, 1 - EPSILON, 1],
+                        outputRange: [1, 1, 0],
+                        extrapolate: 'clamp',
+                      })
+                    : 1
+                  : index === self.length - 2
+                  ? 1
+                  : 0;
+            }
 
             const {
               safeAreaInsets,

yarn.lock

@@ -13588,10 +13588,10 @@ react-native-safe-area-view@^0.14.6:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@^2.0.0-alpha.25:
-  version "2.0.0-alpha.25"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.25.tgz#790d273b41d8dde37aa3e43bc662444aff18cd20"
-  integrity sha512-IxKOqPxIWwyJhFOvfkxU/NSFzM5PRiyWWL8g0WCPozVU1KNEtJQp7j0sONkTLGQDkGwLbDu0kuGawT1zXMnE5A==
+react-native-screens@^2.0.0-alpha.31:
+  version "2.0.0-alpha.31"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.31.tgz#399f9fbd882730b4df72e102ce5563109009eb3f"
+  integrity sha512-eHYjWBnKSSMtxxzT9o/RYxNL80wWIuXWSGbbb2uxjvpbZdQByq2tl84m+wXFyTz1rbJqqIHrcqWD/hEW58CQsg==
   dependencies:
     debounce "^1.2.0"