refact: remove mixed CJS/ESM, refactorize index.native.tsx

native-stack/package.json

@@ -2,5 +2,5 @@
   "main": "../lib/commonjs/native-stack/index",
   "module": "../lib/module/native-stack/index",
   "react-native": "../src/native-stack/index",
-  "types": "../lib/typescript/native-stack/index"
+  "types": "../lib/typescript/native-stack/index.d.ts"
 }

package.json

@@ -20,7 +20,7 @@
   "module": "lib/module/index",
   "react-native": "src/index",
   "source": "src/index",
-  "types": "lib/typescript/index",
+  "types": "lib/typescript/index.d.ts",
   "files": [
     "src/",
     "common/",
@@ -67,17 +67,16 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "7.22.15",
-    "@react-native-community/bob": "^0.17.1",
+    "@react-native-community/cli": "^11.3.6",
+    "@react-native-community/cli-platform-android": "^11.3.6",
+    "@react-native-community/cli-platform-ios": "^11.3.6",
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
     "@types/jest": "^29.3.1",
     "@types/react": "^18.2.21",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
-    "@react-native-community/cli": "^11.3.6",
-    "@react-native-community/cli-platform-android": "^11.3.6",
-    "@react-native-community/cli-platform-ios": "^11.3.6",
     "babel-jest": "^29.6.4",
     "clang-format": "^1.8.0",
     "eslint": "^8.19.0",
@@ -98,6 +97,7 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.72.4",
+    "react-native-builder-bob": "^0.23.2",
     "react-native-reanimated": "^2.2.0",
     "react-native-safe-area-context": "^4.8.1",
     "react-native-windows": "^0.64.8",
@@ -117,7 +117,19 @@
     "android/**/*.kt": "yarn format-android",
     "ios/**/*.{h,m,mm,cpp}": "yarn format-ios"
   },
-  "@react-native-community/bob": {
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "codegenConfig": {
+    "name": "rnscreens",
+    "type": "components",
+    "jsSrcsDir": "./src/fabric",
+    "android": {
+      "javaPackageName": "com.swmansion.rnscreens"
+    }
+  },
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [
@@ -130,17 +142,5 @@
         }
       ]
     ]
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
-  "codegenConfig": {
-    "name": "rnscreens",
-    "type": "components",
-    "jsSrcsDir": "./src/fabric",
-    "android": {
-      "javaPackageName": "com.swmansion.rnscreens"
-    }
   }
 }

reanimated/package.json

@@ -2,5 +2,5 @@
   "main": "../lib/commonjs/reanimated/index",
   "module": "../lib/module/reanimated/index",
   "react-native": "../src/reanimated/index",
-  "types": "../lib/typescript/reanimated/index"
+  "types": "../lib/typescript/reanimated/index.d.ts"
 }

src/components/FullWindowOverlay.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Platform, StyleProp, View, ViewStyle } from 'react-native';
+
+// Native components
+import FullWindowOverlayNativeComponent from '../fabric/FullWindowOverlayNativeComponent';
+const NativeFullWindowOverlay: React.ComponentType<
+  PropsWithChildren<{
+    style: StyleProp<ViewStyle>;
+  }>
+> = FullWindowOverlayNativeComponent as any;
+
+function FullWindowOverlay(props: { children: ReactNode }) {
+  if (Platform.OS !== 'ios') {
+    console.warn('Importing FullWindowOverlay is only valid on iOS devices.');
+    return <View {...props} />;
+  }
+  return (
+    <NativeFullWindowOverlay
+      style={{ position: 'absolute', width: '100%', height: '100%' }}>
+      {props.children}
+    </NativeFullWindowOverlay>
+  );
+}
+
+export default FullWindowOverlay;

src/components/FullWindowOverlay.web.tsx

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+import React, { ReactNode } from 'react';
+
+export default View as React.ComponentType<{
+  children: ReactNode;
+}>;

src/components/Screen.tsx

@@ -0,0 +1,194 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import React from 'react';
+import { Animated, View } from 'react-native';
+
+import TransitionProgressContext from '../TransitionProgressContext';
+import DelayedFreeze from './helpers/DelayedFreeze';
+import { ScreenProps } from 'react-native-screens';
+
+import {
+  freezeEnabled,
+  isNativePlatformSupported,
+  screensEnabled,
+} from '../core';
+
+// Native components
+import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
+
+export const NativeScreen: React.ComponentType<ScreenProps> =
+  ScreenNativeComponent as any;
+let AnimatedNativeScreen: React.ComponentType<ScreenProps>;
+
+// Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+interface ViewConfig extends View {
+  viewConfig: {
+    validAttributes: {
+      style: {
+        display: boolean;
+      };
+    };
+  };
+}
+
+export class InnerScreen extends React.Component<ScreenProps> {
+  private ref: React.ElementRef<typeof View> | null = null;
+  private closing = new Animated.Value(0);
+  private progress = new Animated.Value(0);
+  private goingForward = new Animated.Value(0);
+
+  setNativeProps(props: ScreenProps): void {
+    this.ref?.setNativeProps(props);
+  }
+
+  setRef = (ref: React.ElementRef<typeof View> | null): void => {
+    this.ref = ref;
+    this.props.onComponentRef?.(ref);
+  };
+
+  render() {
+    const {
+      enabled = screensEnabled(),
+      freezeOnBlur = freezeEnabled(),
+      ...rest
+    } = this.props;
+
+    // To maintain default behavior of formSheet stack presentation style and to have reasonable
+    // defaults for new medium-detent iOS API we need to set defaults here
+    const {
+      sheetAllowedDetents = 'large',
+      sheetLargestUndimmedDetent = 'all',
+      sheetGrabberVisible = false,
+      sheetCornerRadius = -1.0,
+      sheetExpandsWhenScrolledToEdge = true,
+    } = rest;
+
+    if (enabled && isNativePlatformSupported) {
+      AnimatedNativeScreen =
+        AnimatedNativeScreen || Animated.createAnimatedComponent(NativeScreen);
+
+      let {
+        // Filter out active prop in this case because it is unused and
+        // can cause problems depending on react-native version:
+        // https://github.com/react-navigation/react-navigation/issues/4886
+        active,
+        activityState,
+        children,
+        isNativeStack,
+        gestureResponseDistance,
+        onGestureCancel,
+        ...props
+      } = rest;
+
+      if (active !== undefined && activityState === undefined) {
+        console.warn(
+          'It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens'
+        );
+        activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
+      }
+
+      const handleRef = (ref: ViewConfig) => {
+        if (ref?.viewConfig?.validAttributes?.style) {
+          ref.viewConfig.validAttributes.style = {
+            ...ref.viewConfig.validAttributes.style,
+            display: false,
+          };
+          this.setRef(ref);
+        }
+      };
+
+      return (
+        <DelayedFreeze freeze={freezeOnBlur && activityState === 0}>
+          <AnimatedNativeScreen
+            {...props}
+            activityState={activityState}
+            sheetAllowedDetents={sheetAllowedDetents}
+            sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+            sheetGrabberVisible={sheetGrabberVisible}
+            sheetCornerRadius={sheetCornerRadius}
+            sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
+            gestureResponseDistance={{
+              start: gestureResponseDistance?.start ?? -1,
+              end: gestureResponseDistance?.end ?? -1,
+              top: gestureResponseDistance?.top ?? -1,
+              bottom: gestureResponseDistance?.bottom ?? -1,
+            }}
+            // This prevents showing blank screen when navigating between multiple screens with freezing
+            // https://github.com/software-mansion/react-native-screens/pull/1208
+            ref={handleRef}
+            onTransitionProgress={
+              !isNativeStack
+                ? undefined
+                : Animated.event(
+                    [
+                      {
+                        nativeEvent: {
+                          progress: this.progress,
+                          closing: this.closing,
+                          goingForward: this.goingForward,
+                        },
+                      },
+                    ],
+                    { useNativeDriver: true }
+                  )
+            }
+            onGestureCancel={
+              onGestureCancel ??
+              (() => {
+                // for internal use
+              })
+            }>
+            {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
+              children
+            ) : (
+              <TransitionProgressContext.Provider
+                value={{
+                  progress: this.progress,
+                  closing: this.closing,
+                  goingForward: this.goingForward,
+                }}>
+                {children}
+              </TransitionProgressContext.Provider>
+            )}
+          </AnimatedNativeScreen>
+        </DelayedFreeze>
+      );
+    } else {
+      // same reason as above
+      let {
+        active,
+        activityState,
+        style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onComponentRef,
+        ...props
+      } = rest;
+
+      if (active !== undefined && activityState === undefined) {
+        activityState = active !== 0 ? 2 : 0;
+      }
+      return (
+        <Animated.View
+          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
+          ref={this.setRef}
+          {...props}
+        />
+      );
+    }
+  }
+}
+
+// context to be used when the user wants to use enhanced implementation
+// e.g. to use `useReanimatedTransitionProgress` (see `reanimated` folder in repo)
+export const ScreenContext = React.createContext(InnerScreen);
+
+class Screen extends React.Component<ScreenProps> {
+  static contextType = ScreenContext;
+
+  render() {
+    const ScreenWrapper = (this.context || InnerScreen) as React.ElementType;
+    return <ScreenWrapper {...this.props} />;
+  }
+}
+
+export default Screen;

src/components/Screen.web.tsx

@@ -0,0 +1,43 @@
+import { ScreenProps } from 'react-native-screens';
+import { Animated, View } from 'react-native';
+import React from 'react';
+
+import { screensEnabled } from '../core';
+
+export const InnerScreen = View;
+
+// We're using class component here because of the error from reanimated:
+// createAnimatedComponent` does not support stateless functional components; use a class component instead.
+export class NativeScreen extends React.Component<ScreenProps> {
+  render(): JSX.Element {
+    let {
+      active,
+      activityState,
+      style,
+      enabled = screensEnabled(),
+      ...rest
+    } = this.props;
+
+    if (enabled) {
+      if (active !== undefined && activityState === undefined) {
+        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx
+      }
+      return (
+        <View
+          // @ts-expect-error: hidden exists on web, but not in React Native
+          hidden={activityState === 0}
+          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
+          {...rest}
+        />
+      );
+    }
+
+    return <View {...rest} />;
+  }
+}
+
+const Screen = Animated.createAnimatedComponent(NativeScreen);
+
+export const ScreenContext = React.createContext(Screen);
+
+export default Screen;

src/components/ScreenContainer.tsx

@@ -0,0 +1,33 @@
+import { Platform, View } from 'react-native';
+import React from 'react';
+import { ScreenContainerProps } from 'react-native-screens';
+import { isNativePlatformSupported, screensEnabled } from '../core';
+
+// Native components
+import ScreenContainerNativeComponent from '../fabric/ScreenContainerNativeComponent';
+import ScreenNavigationContainerNativeComponent from '../fabric/ScreenNavigationContainerNativeComponent';
+
+export const NativeScreenContainer: React.ComponentType<ScreenContainerProps> =
+  Platform.OS !== 'web' ? (ScreenContainerNativeComponent as any) : View;
+export const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> =
+  Platform.OS !== 'web'
+    ? (ScreenNavigationContainerNativeComponent as any)
+    : View;
+
+function ScreenContainer(props: ScreenContainerProps) {
+  const { enabled = screensEnabled(), hasTwoStates, ...rest } = props;
+
+  if (enabled && isNativePlatformSupported) {
+    if (hasTwoStates) {
+      const ScreenNavigationContainer =
+        Platform.OS === 'ios'
+          ? NativeScreenNavigationContainer
+          : NativeScreenContainer;
+      return <ScreenNavigationContainer {...rest} />;
+    }
+    return <NativeScreenContainer {...rest} />;
+  }
+  return <View {...rest} />;
+}
+
+export default ScreenContainer;