fix: enable screens only on supported platforms (#9494)

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import { ScreenContainer } from 'react-native-screens';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import {
@@ -40,7 +40,9 @@ export default function BottomTabView(props: Props) {
     navigation,
     descriptors,
     safeAreaInsets,
-    detachInactiveScreens = true,
+    detachInactiveScreens = Platform.OS === 'web' ||
+      Platform.OS === 'android' ||
+      Platform.OS === 'ios',
     sceneContainerStyle,
   } = props;
 

packages/drawer/src/views/DrawerView.tsx

@@ -76,7 +76,9 @@ function DrawerViewBase({
   drawerContent = (props: DrawerContentComponentProps) => (
     <DrawerContent {...props} />
   ),
-  detachInactiveScreens = true,
+  detachInactiveScreens = Platform.OS === 'web' ||
+    Platform.OS === 'android' ||
+    Platform.OS === 'ios',
   // Running in chrome debugger
   // @ts-expect-error
   useLegacyImplementation = !global.nativeCallSyncHook ||

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

@@ -461,9 +461,9 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureStart,
       onGestureEnd,
       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 = true,
+      detachInactiveScreens = Platform.OS === 'web' ||
+        Platform.OS === 'android' ||
+        Platform.OS === 'ios',
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;