react-native-screens 3.31.1 → 3.33.0

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

@@ -41,7 +41,7 @@ function NativeStackNavigator({
     // @ts-ignore navigation.dangerouslyGetParent was removed in v6
     if (navigation?.dangerouslyGetParent === undefined) {
       console.warn(
-        'Looks like you are importing `native-stack` from `react-native-screens/native-stack`. Since version 6 of `react-navigation`, it should be imported from `@react-navigation/native-stack`.'
+        'Looks like you are importing `native-stack` from `react-native-screens/native-stack`. Since version 6 of `react-navigation`, it should be imported from `@react-navigation/native-stack`.',
       );
     }
   }, [navigation]);
@@ -70,9 +70,9 @@ function NativeStackNavigator({
               });
             }
           });
-        }
+        },
       ),
-    [navigation, state.index, state.key]
+    [navigation, state.index, state.key],
   );
 
   return (

package/src/native-stack/types.tsx

@@ -56,7 +56,7 @@ export type NativeStackNavigationEventMap = {
 
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = string,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -68,7 +68,7 @@ export type NativeStackNavigationProp<
 
 export type NativeStackScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = string,
 > = {
   navigation: NativeStackNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -112,6 +112,15 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   disableBackButtonMenu?: boolean;
+  /**
+   * How the back button behaves by default (when not customized). Available on iOS>=14, and is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` or `backTitle` is set.
+   * The following values are currently supported (they correspond to https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc):
+   * - "default" – show given back button previous controller title, system generic or just icon based on available space
+   * - "generic" – show given system generic or just icon based on available space
+   * - "minimal" – show just an icon
+   * @platform ios
+   */
+  backButtonDisplayMode?: ScreenStackHeaderConfigProps['backButtonDisplayMode'];
   /**
    * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
    * Defaults to `true` when `enableFreeze()` is run at the top of the application.
@@ -125,6 +134,16 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   fullScreenSwipeEnabled?: boolean;
+  /**
+   * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+   * doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
+   * default iOS shadow. Defaults to `false`.
+   *
+   * This does not affect the behavior of transitions that don't use gestures, enabled by `fullScreenGestureEnabled` prop.
+   *
+   * @platform ios
+   */
+  fullScreenSwipeShadowEnabled?: boolean;
   /**
    * Whether you can use gestures to dismiss this screen. Defaults to `true`.
    * Only supported on iOS.
@@ -296,6 +315,12 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   navigationBarColor?: ColorValue;
+  /**
+   * Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -509,11 +534,11 @@ export interface MeasuredDimensions {
 export type AnimatedScreenTransition = {
   topScreenStyle: (
     event: PanGestureHandlerEventPayload,
-    screenSize: MeasuredDimensions
+    screenSize: MeasuredDimensions,
   ) => Record<string, unknown>;
   belowTopScreenStyle: (
     event: PanGestureHandlerEventPayload,
-    screenSize: MeasuredDimensions
+    screenSize: MeasuredDimensions,
   ) => Record<string, unknown>;
 };
 

package/src/native-stack/utils/getDefaultHeaderHeight.tsx

@@ -8,7 +8,7 @@ export default function getDefaultHeaderHeight(
   layout: Layout,
   statusBarHeight: number,
   stackPresentation: StackPresentationTypes,
-  isLargeHeader = false
+  isLargeHeader = false,
 ): number {
   // default header heights
   let headerHeight = Platform.OS === 'android' ? 56 : 64;

package/src/native-stack/utils/getStatusBarHeight.tsx

@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 export default function getStatusBarHeight(
   topInset: number,
   dimensions: Rect,
-  isStatusBarTranslucent: boolean
+  isStatusBarTranslucent: boolean,
 ) {
   if (Platform.OS === 'ios') {
     // It looks like some iOS devices don't have strictly set status bar height to 44.

package/src/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -7,7 +7,7 @@ export default function useAnimatedHeaderHeight() {
 
   if (animatedValue === undefined) {
     throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?",
     );
   }
 

package/src/native-stack/utils/useBackPressSubscription.tsx

@@ -35,7 +35,7 @@ export function useBackPressSubscription({
       subscription.current?.remove();
       subscription.current = BackHandler.addEventListener(
         'hardwareBackPress',
-        onBackPress
+        onBackPress,
       );
       setIsActive(true);
     }

package/src/native-stack/utils/useHeaderHeight.tsx

@@ -7,7 +7,7 @@ export default function useHeaderHeight() {
 
   if (height === undefined) {
     throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?",
     );
   }
 

package/src/native-stack/views/FontProcessor.tsx

@@ -3,7 +3,7 @@
 import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
 
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+  fontFamilies: (string | undefined)[],
 ): (string | undefined)[] {
   // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
   const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;

package/src/native-stack/views/HeaderConfig.tsx

@@ -27,6 +27,7 @@ export default function HeaderConfig({
   backButtonInCustomView,
   direction,
   disableBackButtonMenu,
+  backButtonDisplayMode = 'default',
   headerBackTitle,
   headerBackTitleStyle = {},
   headerBackTitleVisible = true,
@@ -103,7 +104,7 @@ export default function HeaderConfig({
   warnOnce(
     isVisionOS &&
       (headerTitleStyle.color !== undefined || headerTintColor !== undefined),
-    'headerTitleStyle.color and headerTintColor are not supported on visionOS.'
+    'headerTitleStyle.color and headerTintColor are not supported on visionOS.',
   );
 
   return (
@@ -120,6 +121,7 @@ export default function HeaderConfig({
       color={tintColor}
       direction={direction}
       disableBackButtonMenu={disableBackButtonMenu}
+      backButtonDisplayMode={backButtonDisplayMode}
       hidden={headerShown === false}
       hideBackButton={headerHideBackButton}
       hideShadow={headerHideShadow}

package/src/native-stack/views/NativeStackView.tsx

@@ -44,7 +44,7 @@ let Container = View;
 
 if (__DEV__) {
   const DebugContainer = (
-    props: ViewProps & { stackPresentation: StackPresentationTypes }
+    props: ViewProps & { stackPresentation: StackPresentationTypes },
   ) => {
     const { stackPresentation, ...rest } = props;
     if (Platform.OS === 'ios' && stackPresentation !== 'push') {
@@ -87,7 +87,7 @@ const MaybeNestedStack = ({
       !isAndroid &&
         stackPresentation !== 'push' &&
         headerShownPreviousRef.current !== headerShown,
-      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`
+      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`,
     );
 
     headerShownPreviousRef.current = headerShown;
@@ -119,7 +119,7 @@ const MaybeNestedStack = ({
   const statusBarHeight = getStatusBarHeight(
     topInset,
     dimensions,
-    isStatusBarTranslucent
+    isStatusBarTranslucent,
   );
 
   const hasLargeHeader = options.headerLargeTitle ?? false;
@@ -128,7 +128,7 @@ const MaybeNestedStack = ({
     dimensions,
     statusBarHeight,
     stackPresentation,
-    hasLargeHeader
+    hasLargeHeader,
   );
 
   if (isHeaderInModal) {
@@ -152,7 +152,7 @@ const MaybeNestedStack = ({
 
 type NavigationRoute<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
+  RouteName extends keyof ParamList,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
   state?: NavigationState | PartialState<NavigationState>;
 };
@@ -174,6 +174,7 @@ const RouteView = ({
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
   const {
+    fullScreenSwipeShadowEnabled = false,
     gestureEnabled,
     headerShown,
     hideKeyboardOnSwipe,
@@ -185,6 +186,7 @@ const RouteView = ({
     sheetExpandsWhenScrolledToEdge = true,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
+    navigationBarTranslucent,
     navigationBarHidden,
     replaceAnimation = 'pop',
     screenOrientation,
@@ -235,7 +237,7 @@ const RouteView = ({
   const statusBarHeight = getStatusBarHeight(
     topInset,
     dimensions,
-    isStatusBarTranslucent
+    isStatusBarTranslucent,
   );
 
   const hasLargeHeader = options.headerLargeTitle ?? false;
@@ -244,7 +246,7 @@ const RouteView = ({
     dimensions,
     statusBarHeight,
     stackPresentation,
-    hasLargeHeader
+    hasLargeHeader,
   );
 
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
@@ -262,7 +264,7 @@ const RouteView = ({
   const animatedHeaderHeight = React.useRef(
     new Animated.Value(staticHeaderHeight, {
       useNativeDriver: true,
-    })
+    }),
   ).current;
 
   const Screen = React.useContext(ScreenContext);
@@ -293,12 +295,14 @@ const RouteView = ({
       customAnimationOnSwipe={customAnimationOnSwipe}
       freezeOnBlur={freezeOnBlur}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      fullScreenSwipeShadowEnabled={fullScreenSwipeShadowEnabled}
       hideKeyboardOnSwipe={hideKeyboardOnSwipe}
       homeIndicatorHidden={homeIndicatorHidden}
       gestureEnabled={isAndroid ? false : gestureEnabled}
       gestureResponseDistance={gestureResponseDistance}
       nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
       navigationBarColor={navigationBarColor}
+      navigationBarTranslucent={navigationBarTranslucent}
       navigationBarHidden={navigationBarHidden}
       replaceAnimation={replaceAnimation}
       screenOrientation={screenOrientation}
@@ -439,7 +443,7 @@ function NativeStackViewInner({
       goBackGesture !== undefined
     ) {
       console.warn(
-        'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.'
+        'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.',
       );
     }
   }, [ScreenGestureDetector.name, goBackGesture]);

package/src/reanimated/ReanimatedHeaderHeightContext.tsx

@@ -3,5 +3,5 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 export default React.createContext<Animated.SharedValue<number> | undefined>(
-  undefined
+  undefined,
 );

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -19,7 +19,7 @@ import getStatusBarHeight from '../native-stack/utils/getStatusBarHeight';
 import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
-  InnerScreen as unknown as React.ComponentClass
+  InnerScreen as unknown as React.ComponentClass,
 );
 
 // We use prop added to global by reanimated since it seems safer than the one from RN. See:
@@ -40,7 +40,7 @@ const ReanimatedNativeStackScreen = React.forwardRef<
   const statusBarHeight = getStatusBarHeight(
     topInset,
     dimensions,
-    isStatusBarTranslucent
+    isStatusBarTranslucent,
   );
 
   // Default header height, normally used in `useHeaderHeight` hook.
@@ -49,7 +49,7 @@ const ReanimatedNativeStackScreen = React.forwardRef<
     dimensions,
     statusBarHeight,
     stackPresentation,
-    hasLargeHeader
+    hasLargeHeader,
   );
 
   const cachedHeaderHeight = React.useRef(defaultHeaderHeight);
@@ -79,7 +79,7 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             ENABLE_FABRIC
             ? 'onTransitionProgress'
             : 'topTransitionProgress',
-        ]
+        ],
       )}
       onHeaderHeightChangeReanimated={useEvent(
         (event: HeaderHeightChangeEventType) => {
@@ -96,7 +96,7 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             : ENABLE_FABRIC
             ? 'onHeaderHeightChange'
             : 'topHeaderHeightChange',
-        ]
+        ],
       )}
       {...rest}>
       <ReanimatedHeaderHeightContext.Provider value={headerHeight}>

package/src/reanimated/ReanimatedScreen.tsx

@@ -5,7 +5,7 @@ import { InnerScreen, ScreenProps } from 'react-native-screens';
 import Animated from 'react-native-reanimated';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
-  InnerScreen as unknown as React.ComponentClass
+  InnerScreen as unknown as React.ComponentClass,
 );
 
 const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(
@@ -17,7 +17,7 @@ const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(
         {...props}
       />
     );
-  }
+  },
 );
 
 ReanimatedScreen.displayName = 'ReanimatedScreen';

package/src/reanimated/ReanimatedScreenProvider.tsx

@@ -31,7 +31,7 @@ class ReanimatedScreenWrapper extends React.Component<ScreenProps> {
 }
 
 export default function ReanimatedScreenProvider(
-  props: PropsWithChildren<unknown>
+  props: PropsWithChildren<unknown>,
 ) {
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/reanimated/useReanimatedHeaderHeight.tsx

@@ -6,7 +6,7 @@ export default function useReanimatedHeaderHeight() {
 
   if (height === undefined) {
     throw new Error(
-      "Couldn't find the header height using Reanimated. Are you inside a screen in a navigator with a header and your NavigationContainer is wrapped in ReanimatedScreenProvider?"
+      "Couldn't find the header height using Reanimated. Are you inside a screen in a navigator with a header and your NavigationContainer is wrapped in ReanimatedScreenProvider?",
     );
   }
 

package/src/reanimated/useReanimatedTransitionProgress.tsx

@@ -6,7 +6,7 @@ export default function useReanimatedTransitionProgress() {
 
   if (progress === undefined) {
     throw new Error(
-      "Couldn't find values for reanimated transition progress. Are you inside a screen in Native Stack?"
+      "Couldn't find values for reanimated transition progress. Are you inside a screen in Native Stack?",
     );
   }
 

package/src/types.tsx

@@ -19,6 +19,7 @@ export type SearchBarCommands = {
   cancelSearch: () => void;
 };
 
+export type BackButtonDisplayMode = 'default' | 'generic' | 'minimal';
 export type StackPresentationTypes =
   | 'push'
   | 'modal'
@@ -132,6 +133,16 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   fullScreenSwipeEnabled?: boolean;
+  /**
+   * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+   * doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
+   * default iOS shadow. Defaults to `false`.
+   *
+   * This does not affect the behavior of transitions that don't use gestures, enabled by `fullScreenGestureEnabled` prop.
+   *
+   * @platform ios
+   */
+  fullScreenSwipeShadowEnabled?: boolean;
   /**
    * Whether you can use gestures to dismiss this screen. Defaults to `true`.
    *
@@ -170,6 +181,12 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   navigationBarColor?: ColorValue;
+  /**
+   * Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -194,7 +211,7 @@ export interface ScreenProps extends ViewProps {
    * A callback that gets called when the header height has changed.
    */
   onHeaderHeightChange?: (
-    e: NativeSyntheticEvent<HeaderHeightChangeEventType>
+    e: NativeSyntheticEvent<HeaderHeightChangeEventType>,
   ) => void;
   /**
    * A callback that gets called after swipe back is canceled.
@@ -212,13 +229,13 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   onNativeDismissCancelled?: (
-    e: NativeSyntheticEvent<{ dismissCount: number }>
+    e: NativeSyntheticEvent<{ dismissCount: number }>,
   ) => void;
   /**
    * An internal callback called every frame during the transition of screens of `native-stack`, used to feed transition context.
    */
   onTransitionProgress?: (
-    e: NativeSyntheticEvent<TransitionProgressEventType>
+    e: NativeSyntheticEvent<TransitionProgressEventType>,
   ) => void;
   /**
    * A callback that gets called when the current screen will appear. This is called as soon as the transition begins.
@@ -396,7 +413,7 @@ export interface ScreenContainerProps extends ViewProps {
 
 export interface GestureDetectorBridge {
   stackUseEffectCallback: (
-    stackRef: React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>
+    stackRef: React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>,
   ) => void;
 }
 
@@ -461,6 +478,15 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
    * @platform ios
    */
   disableBackButtonMenu?: boolean;
+  /**
+   * How the back button behaves by default (when not customized). Available on iOS>=14, and is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` or `backTitle` is set.
+   * The following values are currently supported (they correspond to https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc):
+   * - "default" – show given back button previous controller title, system generic or just icon based on available space
+   * - "generic" – show given system generic or just icon based on available space
+   * - "minimal" – show just an icon
+   * @platform ios
+   */
+  backButtonDisplayMode?: BackButtonDisplayMode;
   /**
    * When set to true the header will be hidden while the parent Screen is on the top of the stack. The default value is false.
    */
@@ -659,7 +685,7 @@ export interface SearchBarProps {
    * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
    */
   onSearchButtonPress?: (
-    e: NativeSyntheticEvent<TextInputFocusEventData>
+    e: NativeSyntheticEvent<TextInputFocusEventData>,
   ) => void;
   /**
    * Text displayed when search field is empty

package/src/useTransitionProgress.tsx

@@ -7,7 +7,7 @@ export default function useTransitionProgress() {
 
   if (progress === undefined) {
     throw new Error(
-      "Couldn't find values for transition progress. Are you inside a screen in Native Stack?"
+      "Couldn't find values for transition progress. Are you inside a screen in Native Stack?",
     );
   }
 

package/windows/README.md

@@ -1,12 +1,15 @@
 # react-native-screens Windows Implementation
 
 ## Module Installation
+
 You can either use autolinking on react-native-windows 0.63 and later or manually link the module on earlier releases.
 
 ## Automatic install with autolinking on RNW >= 0.63
+
 RNScreens supports autolinking. Just call: `npm i react-native-screens --save`
 
 ## Manual installation on RNW >= 0.62
+
 1. `npm install react-native-screens --save`
 2. Open your solution in Visual Studio 2019 (eg. `windows\yourapp.sln`)
 3. Right-click Solution icon in Solution Explorer > Add > Existing Project...
@@ -22,4 +25,4 @@ If you want to contribute to this module Windows implementation, first you must
 
 You must temporarily install the `react-native-windows` package. Versions of `react-native-windows` and `react-native` must match, e.g. if the module uses `react-native@0.62`, install `npm i react-native-windows@^0.62 --dev`.
 
-Now, you will be able to open corresponding `RNScreens...sln` file, e.g. `RNScreens62.sln` for `react-native-windows@0.62`.
+Now, you will be able to open corresponding `RNScreens...sln` file, e.g. `RNScreens62.sln` for `react-native-windows@0.62`.