react-native-screens 4.0.0-beta.12 → 4.0.0-beta.14

package/lib/typescript/utils.d.ts

@@ -1,4 +1,29 @@
 export declare const isSearchBarAvailableForCurrentPlatform: boolean;
 export declare function executeNativeBackPress(): boolean;
-export declare const isNewBackTitleImplementation = true;
+/**
+ * Exposes information useful for downstream navigation library implementers,
+ * so they can keep reasonable backward compatibility, if desired.
+ *
+ * We don't mean for this object to only grow in number of fields, however at the same time
+ * we won't be very hasty to reduce it. Expect gradual changes.
+ */
+export declare const compatibilityFlags: {
+    /**
+     * Because of a bug introduced in https://github.com/software-mansion/react-native-screens/pull/1646
+     * react-native-screens v3.21 changed how header's backTitle handles whitespace strings in https://github.com/software-mansion/react-native-screens/pull/1726
+     * To allow for backwards compatibility in @react-navigation/native-stack we need a way to check if this version or newer is used.
+     * See https://github.com/react-navigation/react-navigation/pull/11423 for more context.
+     */
+    isNewBackTitleImplementation: boolean;
+    /**
+     * With version 4.0.0 the header implementation has been changed. To allow for backward compat
+     * with native-stack@v6 we want to expose a way to check whether the new implementation
+     * is in use or not.
+     *
+     * See:
+     * * https://github.com/software-mansion/react-native-screens/pull/2325
+     * * https://github.com/react-navigation/react-navigation/pull/12125
+     */
+    usesHeaderFlexboxImplementation: boolean;
+};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sCAAsC,SAG5B,CAAC;AAExB,wBAAgB,sBAAsB,YAIrC;AAMD,eAAO,MAAM,4BAA4B,OAAO,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sCAAsC,SAG5B,CAAC;AAExB,wBAAgB,sBAAsB,YAIrC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;;;;OAKG;;IAGH;;;;;;;;OAQG;;CAEJ,CAAC"}

package/native-stack/README.md

@@ -1,6 +1,7 @@
 # Native Stack Navigator
 
-> **_NOTE:_** This README is dedicated for using `native-stack` with React Navigation **v5**. For using `native-stack` in React Navigation **v6** please refer to the [Native Stack Navigator part of React Navigation documentation](https://reactnavigation.org/docs/native-stack-navigator).
+> [!CAUTION]
+> NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
 
 Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
 

package/native-stack/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0-beta.14",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",

package/src/components/FullWindowOverlay.tsx

@@ -1,5 +1,12 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { Platform, StyleProp, View, ViewStyle } from 'react-native';
+import {
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native';
 
 // Native components
 import FullWindowOverlayNativeComponent from '../fabric/FullWindowOverlayNativeComponent';
@@ -10,13 +17,14 @@ const NativeFullWindowOverlay: React.ComponentType<
 > = FullWindowOverlayNativeComponent as any;
 
 function FullWindowOverlay(props: { children: ReactNode }) {
+  const { width, height } = useWindowDimensions();
   if (Platform.OS !== 'ios') {
     console.warn('Using FullWindowOverlay is only valid on iOS devices.');
     return <View {...props} />;
   }
   return (
     <NativeFullWindowOverlay
-      style={{ position: 'absolute', width: '100%', height: '100%' }}>
+      style={[StyleSheet.absoluteFill, { width, height }]}>
       {props.children}
     </NativeFullWindowOverlay>
   );

package/src/components/Screen.tsx

@@ -5,7 +5,7 @@ import { Animated, View, Platform } from 'react-native';
 
 import TransitionProgressContext from '../TransitionProgressContext';
 import DelayedFreeze from './helpers/DelayedFreeze';
-import { ScreenProps } from 'react-native-screens';
+import { ScreenProps } from '../types';
 
 import {
   freezeEnabled,
@@ -14,23 +14,20 @@ import {
 } from '../core';
 
 // Native components
-import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
-import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
+import ScreenNativeComponent, {
+  NativeProps as ScreenNativeComponentProps,
+} from '../fabric/ScreenNativeComponent';
+import ModalScreenNativeComponent, {
+  NativeProps as ModalScreenNativeComponentProps,
+} from '../fabric/ModalScreenNativeComponent';
 import { usePrevious } from './helpers/usePrevious';
 
-type NativeScreenProps = Omit<
-  ScreenProps,
-  'sheetInitialDetentIndex' | 'sheetLargestUndimmedDetentIndex'
-> & {
-  sheetInitialDetent: number;
-  sheetLargestUndimmedDetent: number;
-};
-
-export const NativeScreen: React.ComponentType<NativeScreenProps> =
-  ScreenNativeComponent as React.ComponentType<NativeScreenProps>;
-const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);
+type NativeProps = ScreenNativeComponentProps | ModalScreenNativeComponentProps;
+const AnimatedNativeScreen = Animated.createAnimatedComponent(
+  ScreenNativeComponent,
+);
 const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
-  ModalScreenNativeComponent as React.ComponentType<NativeScreenProps>,
+  ModalScreenNativeComponent,
 );
 
 // Incomplete type, all accessible properties available at:
@@ -196,6 +193,11 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
       sheetInitialDetentIndex = 0,
       // Other
       stackPresentation,
+      // Events for override
+      onAppear,
+      onDisappear,
+      onWillAppear,
+      onWillDisappear,
     } = rest;
 
     if (enabled && isNativePlatformSupported) {
@@ -273,6 +275,22 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
         <DelayedFreeze freeze={freezeOnBlur && activityState === 0}>
           <AnimatedScreen
             {...props}
+            /**
+             * This messy override is to conform NativeProps used by codegen and
+             * our Public API. To see reasoning go to this PR:
+             * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
+             */
+            onAppear={onAppear as NativeProps['onAppear']}
+            onDisappear={onDisappear as NativeProps['onDisappear']}
+            onWillAppear={onWillAppear as NativeProps['onWillAppear']}
+            onWillDisappear={onWillDisappear as NativeProps['onWillDisappear']}
+            onGestureCancel={
+              (onGestureCancel as NativeProps['onGestureCancel']) ??
+              (() => {
+                // for internal use
+              })
+            }
+            //
             // Hierarchy of screens is handled on the native side and setting zIndex value causes this issue:
             // https://github.com/software-mansion/react-native-screens/issues/2345
             // With below change of zIndex, we force RN diffing mechanism to NOT include detaching and attaching mutation in one transaction.
@@ -310,12 +328,6 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
                     ],
                     { useNativeDriver: true },
                   )
-            }
-            onGestureCancel={
-              onGestureCancel ??
-              (() => {
-                // for internal use
-              })
             }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
@@ -361,10 +373,15 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
 // e.g. to use `useReanimatedTransitionProgress` (see `reanimated` folder in repo)
 export const ScreenContext = React.createContext(InnerScreen);
 
-const Screen: React.FC<ScreenProps> = props => {
-  const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
+const Screen =  React.forwardRef<View, ScreenProps>(
+  (props, ref) => {
+    const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
+
+    return <ScreenWrapper {...props} ref={ref} />;
+  }
+);
+
+Screen.displayName = 'Screen';
 
-  return <ScreenWrapper {...props} />;
-};
 
 export default Screen;

package/src/components/Screen.web.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ScreenProps } from 'react-native-screens';
+import { ScreenProps } from '../types';
 import { Animated, View } from 'react-native';
 import React from 'react';
 

package/src/components/ScreenContainer.tsx

@@ -2,20 +2,13 @@
 
 import { Platform, View } from 'react-native';
 import React from 'react';
-import { ScreenContainerProps } from 'react-native-screens';
+import { ScreenContainerProps } from '../types';
 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;
 
@@ -23,11 +16,11 @@ function ScreenContainer(props: ScreenContainerProps) {
     if (hasTwoStates) {
       const ScreenNavigationContainer =
         Platform.OS === 'ios'
-          ? NativeScreenNavigationContainer
-          : NativeScreenContainer;
+          ? ScreenNavigationContainerNativeComponent
+          : ScreenContainerNativeComponent;
       return <ScreenNavigationContainer {...rest} />;
     }
-    return <NativeScreenContainer {...rest} />;
+    return <ScreenContainerNativeComponent {...rest} />;
   }
   return <View {...rest} />;
 }

package/src/components/ScreenContainer.web.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 
-export const NativeScreenContainer = View;
-export const NativeScreenNavigationContainer = View;
+const ScreenContainer = View;
 
-export default View;
+export default ScreenContainer;

package/src/components/ScreenContentWrapper.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Platform, View, ViewProps } from 'react-native';
+import { ViewProps } from 'react-native';
 import ScreenContentWrapperNativeComponent from '../fabric/ScreenContentWrapperNativeComponent';
 
-export const NativeScreenContentWrapper: React.ComponentType<ViewProps> =
-  Platform.OS !== 'web' ? (ScreenContentWrapperNativeComponent as any) : View;
-
 function ScreenContentWrapper(props: ViewProps) {
-  return <NativeScreenContentWrapper collapsable={false} {...props} />;
+  return <ScreenContentWrapperNativeComponent collapsable={false} {...props} />;
 }
 
 export default ScreenContentWrapper;

package/src/components/ScreenContentWrapper.web.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 
-export const NativeScreenContentWrapper = View;
-
 const ScreenContentWrapper = View;
+
 export default ScreenContentWrapper;

package/src/components/ScreenFooter.tsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import { Platform, View, ViewProps } from 'react-native';
+import { ViewProps } from 'react-native';
 import ScreenFooterNativeComponent from '../fabric/ScreenFooterNativeComponent';
 
-/**
- * Unstable API
- */
-export const NativeScreenFooter: React.ComponentType<ViewProps> =
-  Platform.OS !== 'web' ? (ScreenFooterNativeComponent as any) : View;
-
 /**
  * Unstable API
  */
 function ScreenFooter(props: ViewProps) {
-  return <NativeScreenFooter {...props} />;
+  return <ScreenFooterNativeComponent {...props} />;
 }
 
 export default ScreenFooter;

package/src/components/ScreenFooter.web.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 
-export const NativeScreenFooter = View;
-
 const ScreenFooter = View;
+
 export default ScreenFooter;

package/src/components/ScreenStack.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import React from 'react';
-import { ScreenStackProps, freezeEnabled } from 'react-native-screens';
+import { ScreenStackProps } from '../types';
+import { freezeEnabled } from '../core';
 import DelayedFreeze from './helpers/DelayedFreeze';
 
 // Native components

package/src/components/ScreenStack.web.tsx

@@ -1,3 +1,5 @@
 import { View } from 'react-native';
 
-export default View;
+const ScreenStack = View;
+
+export default ScreenStack;

package/src/components/ScreenStackHeaderConfig.tsx

@@ -5,7 +5,7 @@ import {
   HeaderSubviewTypes,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
-} from 'react-native-screens';
+} from '../types';
 import { Image, ImageProps, StyleSheet, ViewProps } from 'react-native';
 
 // Native components

package/src/components/ScreenStackHeaderConfig.web.tsx

@@ -4,7 +4,7 @@ import {
   HeaderSubviewTypes,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
-} from 'react-native-screens';
+} from '../types';
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps,

package/src/components/SearchBar.tsx

@@ -1,11 +1,8 @@
 'use client';
 
 import React from 'react';
-import {
-  isSearchBarAvailableForCurrentPlatform,
-  SearchBarCommands,
-  SearchBarProps,
-} from 'react-native-screens';
+import { SearchBarCommands, SearchBarProps } from '../types';
+import { isSearchBarAvailableForCurrentPlatform } from '../utils';
 import { View } from 'react-native';
 
 // Native components
@@ -18,13 +15,13 @@ import SearchBarNativeComponent, {
 } from '../fabric/SearchBarNativeComponent';
 import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 
-export const NativeSearchBar: React.ComponentType<
+const NativeSearchBar: React.ComponentType<
   SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands> }
 > &
   typeof NativeSearchBarCommands =
   SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
     SearchBarCommandsType;
-export const NativeSearchBarCommands: SearchBarCommandsType =
+const NativeSearchBarCommands: SearchBarCommandsType =
   SearchBarNativeCommands as SearchBarCommandsType;
 
 type NativeSearchBarRef = React.ElementRef<typeof NativeSearchBar>;

package/src/components/SearchBar.web.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 
-export const NativeSearchBar = View;
-export const NativeSearchBarCommands = View;
+const SearchBar = View;
 
-export default View;
+export default SearchBar;

package/src/core.ts

@@ -2,9 +2,6 @@
 
 import { Platform, UIManager } from 'react-native';
 
-// const that tells if the library should use new implementation, will be undefined for older versions
-export const shouldUseActivityState = true;
-
 export const isNativePlatformSupported =
   Platform.OS === 'ios' ||
   Platform.OS === 'android' ||

package/src/fabric/ModalScreenNativeComponent.ts

@@ -27,6 +27,11 @@ type HeaderHeightChangeEvent = Readonly<{
   headerHeight: Double;
 }>;
 
+type SheetDetentChangedEvent = Readonly<{
+  index: Int32;
+  isStable: boolean;
+}>;
+
 type GestureResponseDistanceType = Readonly<{
   start: Float;
   end: Float;
@@ -53,7 +58,8 @@ type StackAnimation =
   | 'slide_from_left'
   | 'slide_from_bottom'
   | 'fade_from_bottom'
-  | 'ios';
+  | 'ios_from_right'
+  | 'ios_from_left';
 
 type SwipeDirection = 'vertical' | 'horizontal';
 
@@ -70,12 +76,14 @@ export interface NativeProps extends ViewProps {
   onTransitionProgress?: DirectEventHandler<TransitionProgressEvent>;
   onGestureCancel?: DirectEventHandler<ScreenEvent>;
   onHeaderBackButtonClicked?: DirectEventHandler<ScreenEvent>;
+  onSheetDetentChanged?: DirectEventHandler<SheetDetentChangedEvent>;
   sheetAllowedDetents?: number[];
   sheetLargestUndimmedDetent?: WithDefault<Int32, -1>;
   sheetGrabberVisible?: WithDefault<boolean, false>;
   sheetCornerRadius?: WithDefault<Float, -1.0>;
   sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
   sheetInitialDetent?: WithDefault<Int32, 0>;
+  sheetElevation?: WithDefault<Int32, 24>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
   fullScreenSwipeShadowEnabled?: boolean;

package/src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -18,6 +18,7 @@ type OnDetachedEvent = Readonly<{}>;
 type BackButtonDisplayMode = 'minimal' | 'default' | 'generic';
 
 type BlurEffect =
+  | 'none'
   | 'extraLight'
   | 'light'
   | 'dark'
@@ -68,7 +69,7 @@ export interface NativeProps extends ViewProps {
   backButtonDisplayMode?: WithDefault<BackButtonDisplayMode, 'default'>;
   hideBackButton?: boolean;
   backButtonInCustomView?: boolean;
-  blurEffect?: WithDefault<BlurEffect, 'extraLight'>;
+  blurEffect?: WithDefault<BlurEffect, 'none'>;
   // TODO: implement this props on iOS
   topInsetEnabled?: boolean;
 }

package/src/gesture-handler/GestureDetectorProvider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GHContext } from 'react-native-screens';
+import { GHContext } from '../native-stack/contexts/GHContext';
 import ScreenGestureDetector from './ScreenGestureDetector';
 import type { GestureProviderProps } from '../native-stack/types';
 

package/src/index.tsx

@@ -8,7 +8,6 @@ export {
   enableFreeze,
   screensEnabled,
   freezeEnabled,
-  shouldUseActivityState,
 } from './core';
 
 /**
@@ -16,19 +15,10 @@ export {
  */
 export {
   default as Screen,
-  NativeScreen,
   InnerScreen,
   ScreenContext,
 } from './components/Screen';
 
-export {
-  default as ScreenContainer,
-  NativeScreenContainer,
-  NativeScreenNavigationContainer,
-} from './components/ScreenContainer';
-
-export { default as ScreenStack } from './components/ScreenStack';
-
 export {
   ScreenStackHeaderConfig,
   ScreenStackHeaderSubview,
@@ -39,28 +29,12 @@ export {
   ScreenStackHeaderSearchBarView,
 } from './components/ScreenStackHeaderConfig';
 
-export {
-  default as SearchBar,
-  NativeSearchBar,
-  NativeSearchBarCommands,
-} from './components/SearchBar';
-
+export { default as SearchBar } from './components/SearchBar';
+export { default as ScreenContainer } from './components/ScreenContainer';
+export { default as ScreenStack } from './components/ScreenStack';
 export { default as FullWindowOverlay } from './components/FullWindowOverlay';
-
-export {
-  default as ScreenFooter,
-  NativeScreenFooter,
-} from './components/ScreenFooter';
-
-export {
-  default as ScreenContentWrapper,
-  NativeScreenContentWrapper,
-} from './components/ScreenContentWrapper';
-
-/**
- * Modules
- */
-export { default as NativeScreensModule } from './fabric/NativeScreensModule';
+export { default as ScreenFooter } from './components/ScreenFooter';
+export { default as ScreenContentWrapper } from './components/ScreenContentWrapper';
 
 /**
  * Contexts
@@ -72,7 +46,7 @@ export { GHContext } from './native-stack/contexts/GHContext';
  */
 export {
   isSearchBarAvailableForCurrentPlatform,
-  isNewBackTitleImplementation,
+  compatibilityFlags,
   executeNativeBackPress,
 } from './utils';
 

package/src/native-stack/navigators/createNativeStackNavigator.tsx

@@ -85,6 +85,9 @@ function NativeStackNavigator({
   );
 }
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export default createNavigatorFactory<
   StackNavigationState<ParamListBase>,
   NativeStackNavigationOptions,