chore: drop support for older versions of react-native-screens

packages/bottom-tabs/src/views/ScreenFallback.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { Platform, StyleProp, ViewStyle } from 'react-native';
-import {
-  Screen,
-  screensEnabled,
-  // @ts-ignore
-  shouldUseActivityState,
-} from 'react-native-screens';
+import { Screen, screensEnabled } from 'react-native-screens';
 import { ResourceSavingView } from '@react-navigation/elements';
 
 type Props = {
@@ -18,19 +13,11 @@ type Props = {
 export default function ScreenFallback({ visible, children, ...rest }: Props) {
   // react-native-screens is buggy on web
   if (screensEnabled?.() && Platform.OS !== 'web') {
-    if (shouldUseActivityState) {
-      return (
-        <Screen activityState={visible ? 2 : 0} {...rest}>
-          {children}
-        </Screen>
-      );
-    } else {
-      return (
-        <Screen active={visible ? 1 : 0} {...rest}>
-          {children}
-        </Screen>
-      );
-    }
+    return (
+      <Screen activityState={visible ? 2 : 0} {...rest}>
+        {children}
+      </Screen>
+    );
   }
 
   return (

packages/drawer/src/views/ScreenFallback.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { Platform, StyleProp, ViewStyle } from 'react-native';
-import {
-  Screen,
-  screensEnabled,
-  // @ts-ignore
-  shouldUseActivityState,
-} from 'react-native-screens';
+import { Screen, screensEnabled } from 'react-native-screens';
 import { ResourceSavingView } from '@react-navigation/elements';
 
 type Props = {
@@ -18,19 +13,11 @@ type Props = {
 export default function ScreenFallback({ visible, children, ...rest }: Props) {
   // react-native-screens is buggy on web
   if (screensEnabled?.() && Platform.OS !== 'web') {
-    if (shouldUseActivityState) {
-      return (
-        <Screen activityState={visible ? 2 : 0} {...rest}>
-          {children}
-        </Screen>
-      );
-    } else {
-      return (
-        <Screen active={visible ? 1 : 0} {...rest}>
-          {children}
-        </Screen>
-      );
-    }
+    return (
+      <Screen activityState={visible ? 2 : 0} {...rest}>
+        {children}
+      </Screen>
+    );
   }
 
   return (

packages/stack/src/views/Screens.tsx

@@ -9,8 +9,6 @@ try {
   // Ignore
 }
 
-export const shouldUseActivityState = Screens?.shouldUseActivityState;
-
 // So we use our custom implementation to handle a11y better
 class WebScreen extends React.Component<
   ViewProps & {
@@ -65,13 +63,9 @@ export const MaybeScreen = ({
   }
 
   if (enabled && Screens?.screensEnabled()) {
-    if (shouldUseActivityState) {
-      return (
-        <Screens.Screen enabled={enabled} activityState={active} {...rest} />
-      );
-    } else {
-      return <Screens.Screen enabled={enabled} active={active} {...rest} />;
-    }
+    return (
+      <Screens.Screen enabled={enabled} activityState={active} {...rest} />
+    );
   }
 
   return <View {...rest} />;

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

@@ -18,11 +18,7 @@ import {
   Background,
 } from '@react-navigation/elements';
 
-import {
-  MaybeScreenContainer,
-  MaybeScreen,
-  shouldUseActivityState,
-} from '../Screens';
+import { MaybeScreenContainer, MaybeScreen } from '../Screens';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import CardContainer from './CardContainer';
 import {
@@ -467,9 +463,7 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureCancel,
       // Enable on new versions of `react-native-screens`
       // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction.
-      detachInactiveScreens = Platform.OS === 'web'
-        ? true
-        : shouldUseActivityState ?? false,
+      detachInactiveScreens = true,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;
@@ -551,34 +545,24 @@ export default class CardStack extends React.Component<Props, State> {
             // For the old implementation, it stays the same it was
             let isScreenActive: Animated.AnimatedInterpolation | 2 | 1 | 0 = 1;
 
-            if (shouldUseActivityState || Platform.OS === 'web') {
-              if (index < self.length - activeScreensLimit - 1) {
-                // screen should be inactive because it is too deep in the stack
-                isScreenActive = STATE_INACTIVE;
-              } else {
-                const sceneForActivity = scenes[self.length - 1];
-                const outputValue =
-                  index === self.length - 1
-                    ? STATE_ON_TOP // the screen is on top after the transition
-                    : index >= self.length - activeScreensLimit
-                    ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
-                    : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
-                isScreenActive = sceneForActivity
-                  ? sceneForActivity.progress.current.interpolate({
-                      inputRange: [0, 1 - EPSILON, 1],
-                      outputRange: [1, 1, outputValue],
-                      extrapolate: 'clamp',
-                    })
-                  : STATE_TRANSITIONING_OR_BELOW_TOP;
-              }
+            if (index < self.length - activeScreensLimit - 1) {
+              // screen should be inactive because it is too deep in the stack
+              isScreenActive = STATE_INACTIVE;
             } else {
-              isScreenActive = scene.progress.next
-                ? scene.progress.next.interpolate({
+              const sceneForActivity = scenes[self.length - 1];
+              const outputValue =
+                index === self.length - 1
+                  ? STATE_ON_TOP // the screen is on top after the transition
+                  : index >= self.length - activeScreensLimit
+                  ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
+                  : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
+              isScreenActive = sceneForActivity
+                ? sceneForActivity.progress.current.interpolate({
                     inputRange: [0, 1 - EPSILON, 1],
-                    outputRange: [1, 1, 0],
+                    outputRange: [1, 1, outputValue],
                     extrapolate: 'clamp',
                   })
-                : 1;
+                : STATE_TRANSITIONING_OR_BELOW_TOP;
             }
 
             const {