refactor: use react-native-screens for web as well

example/src/index.tsx

@@ -61,7 +61,7 @@ if (Platform.OS !== 'web') {
   LogBox.ignoreLogs(['Require cycle:']);
 }
 
-enableScreens();
+enableScreens(false);
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

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

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

packages/drawer/src/views/ScreenFallback.tsx

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

packages/stack/src/views/Screens.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, View, Platform, ViewProps } from 'react-native';
+import { Animated, View, ViewProps } from 'react-native';
 
 let Screens: typeof import('react-native-screens') | undefined;
 
@@ -9,29 +9,6 @@ try {
   // Ignore
 }
 
-// So we use our custom implementation to handle a11y better
-class WebScreen extends React.Component<
-  ViewProps & {
-    active: number;
-    children: React.ReactNode;
-  }
-> {
-  render() {
-    const { active, style, ...rest } = this.props;
-
-    return (
-      <View
-        // @ts-expect-error: hidden exists on web, but not in React Native
-        hidden={!active}
-        style={[style, { display: active ? 'flex' : 'none' }]}
-        {...rest}
-      />
-    );
-  }
-}
-
-const AnimatedWebScreen = Animated.createAnimatedComponent(WebScreen);
-
 export const MaybeScreenContainer = ({
   enabled,
   ...rest
@@ -39,7 +16,7 @@ export const MaybeScreenContainer = ({
   enabled: boolean;
   children: React.ReactNode;
 }) => {
-  if (enabled && Platform.OS !== 'web' && Screens?.screensEnabled()) {
+  if (Screens != null) {
     return (
       // @ts-ignore
       <Screens.ScreenContainer enabled={enabled} {...rest} />
@@ -58,11 +35,7 @@ export const MaybeScreen = ({
   active: 0 | 1 | Animated.AnimatedInterpolation;
   children: React.ReactNode;
 }) => {
-  if (enabled && Platform.OS === 'web') {
-    return <AnimatedWebScreen active={active} {...rest} />;
-  }
-
-  if (enabled && Screens?.screensEnabled()) {
+  if (Screens != null) {
     return (
       <Screens.Screen enabled={enabled} activityState={active} {...rest} />
     );