react-native-screens 3.31.1 → 3.33.0

package/src/components/Screen.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 import React from 'react';
 import { Animated, View, Platform } from 'react-native';
 
@@ -17,10 +16,10 @@ import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
 import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
 
 export const NativeScreen: React.ComponentType<ScreenProps> =
-  ScreenNativeComponent as any;
+  ScreenNativeComponent as React.ComponentType<ScreenProps>;
 const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);
 const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
-  ModalScreenNativeComponent as React.ComponentType<ScreenProps>
+  ModalScreenNativeComponent as React.ComponentType<ScreenProps>,
 );
 
 // Incomplete type, all accessible properties available at:
@@ -42,27 +41,25 @@ interface ViewConfig extends View {
   };
 }
 
-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);
+export const InnerScreen = React.forwardRef<View, ScreenProps>(
+  function InnerScreen(props, ref) {
+    const innerRef = React.useRef<ViewConfig | null>(null);
+    React.useImperativeHandle(ref, () => innerRef.current!, []);
 
-  setNativeProps(props: ScreenProps): void {
-    this.ref?.setNativeProps(props);
-  }
+    const setRef = (ref: ViewConfig) => {
+      innerRef.current = ref;
+      props.onComponentRef?.(ref);
+    };
 
-  setRef = (ref: React.ElementRef<typeof View> | null): void => {
-    this.ref = ref;
-    this.props.onComponentRef?.(ref);
-  };
+    const closing = React.useRef(new Animated.Value(0)).current;
+    const progress = React.useRef(new Animated.Value(0)).current;
+    const goingForward = React.useRef(new Animated.Value(0)).current;
 
-  render() {
     const {
       enabled = screensEnabled(),
       freezeOnBlur = freezeEnabled(),
       ...rest
-    } = this.props;
+    } = 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
@@ -101,7 +98,7 @@ export class InnerScreen extends React.Component<ScreenProps> {
 
       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'
+          '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
       }
@@ -112,13 +109,13 @@ export class InnerScreen extends React.Component<ScreenProps> {
             ...ref.viewConfig.validAttributes.style,
             display: false,
           };
-          this.setRef(ref);
+          setRef(ref);
         } else if (ref?._viewConfig?.validAttributes?.style) {
           ref._viewConfig.validAttributes.style = {
             ...ref._viewConfig.validAttributes.style,
             display: false,
           };
-          this.setRef(ref);
+          setRef(ref);
         }
       };
 
@@ -148,13 +145,13 @@ export class InnerScreen extends React.Component<ScreenProps> {
                     [
                       {
                         nativeEvent: {
-                          progress: this.progress,
-                          closing: this.closing,
-                          goingForward: this.goingForward,
+                          progress,
+                          closing,
+                          goingForward,
                         },
                       },
                     ],
-                    { useNativeDriver: true }
+                    { useNativeDriver: true },
                   )
             }
             onGestureCancel={
@@ -168,9 +165,9 @@ export class InnerScreen extends React.Component<ScreenProps> {
             ) : (
               <TransitionProgressContext.Provider
                 value={{
-                  progress: this.progress,
-                  closing: this.closing,
-                  goingForward: this.goingForward,
+                  progress,
+                  closing,
+                  goingForward,
                 }}>
                 {children}
               </TransitionProgressContext.Provider>
@@ -195,25 +192,22 @@ export class InnerScreen extends React.Component<ScreenProps> {
       return (
         <Animated.View
           style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
-          ref={this.setRef}
+          ref={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;
+const Screen: React.FC<ScreenProps> = props => {
+  const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
 
-  render() {
-    const ScreenWrapper = (this.context || InnerScreen) as React.ElementType;
-    return <ScreenWrapper {...this.props} />;
-  }
-}
+  return <ScreenWrapper {...props} />;
+};
 
 export default Screen;

package/src/components/ScreenStack.tsx

@@ -7,6 +7,10 @@ import ScreenStackNativeComponent from '../fabric/ScreenStackNativeComponent';
 const NativeScreenStack: React.ComponentType<ScreenStackProps> =
   ScreenStackNativeComponent as any;
 
+function isFabric() {
+  return 'nativeFabricUIManager' in global;
+}
+
 function ScreenStack(props: ScreenStackProps) {
   const { children, gestureDetectorBridge, ...rest } = props;
   const ref = React.useRef(null);
@@ -19,8 +23,14 @@ function ScreenStack(props: ScreenStackProps) {
     const isFreezeEnabled =
       descriptor?.options?.freezeOnBlur ?? freezeEnabled();
 
+    // On Fabric, when screen is frozen, animated and reanimated values are not updated
+    // due to component being unmounted. To avoid this, we don't freeze the previous screen there
+    const freezePreviousScreen = isFabric()
+      ? size - index > 2
+      : size - index > 1;
+
     return (
-      <DelayedFreeze freeze={isFreezeEnabled && size - index > 1}>
+      <DelayedFreeze freeze={isFreezeEnabled && freezePreviousScreen}>
         {child}
       </DelayedFreeze>
     );

package/src/components/ScreenStackHeaderConfig.tsx

@@ -17,7 +17,7 @@ export const ScreenStackHeaderSubview: React.ComponentType<
 > = ScreenStackHeaderSubviewNativeComponent as any;
 
 export const ScreenStackHeaderBackButtonImage = (
-  props: ImageProps
+  props: ImageProps,
 ): JSX.Element => (
   <ScreenStackHeaderSubview type="back" style={styles.headerSubview}>
     <Image resizeMode="center" fadeDuration={0} {...props} />
@@ -25,7 +25,7 @@ export const ScreenStackHeaderBackButtonImage = (
 );
 
 export const ScreenStackHeaderRightView = (
-  props: React.PropsWithChildren<ViewProps>
+  props: React.PropsWithChildren<ViewProps>,
 ): JSX.Element => (
   <ScreenStackHeaderSubview
     {...props}
@@ -35,7 +35,7 @@ export const ScreenStackHeaderRightView = (
 );
 
 export const ScreenStackHeaderLeftView = (
-  props: React.PropsWithChildren<ViewProps>
+  props: React.PropsWithChildren<ViewProps>,
 ): JSX.Element => (
   <ScreenStackHeaderSubview
     {...props}
@@ -45,7 +45,7 @@ export const ScreenStackHeaderLeftView = (
 );
 
 export const ScreenStackHeaderCenterView = (
-  props: React.PropsWithChildren<ViewProps>
+  props: React.PropsWithChildren<ViewProps>,
 ): JSX.Element => (
   <ScreenStackHeaderSubview
     {...props}
@@ -55,7 +55,7 @@ export const ScreenStackHeaderCenterView = (
 );
 
 export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<SearchBarProps>
+  props: React.PropsWithChildren<SearchBarProps>,
 ): JSX.Element => (
   <ScreenStackHeaderSubview
     {...props}

package/src/components/ScreenStackHeaderConfig.web.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native-screens';
 
 export const ScreenStackHeaderBackButtonImage = (
-  props: ImageProps
+  props: ImageProps,
 ): JSX.Element => (
   <View>
     <Image resizeMode="center" fadeDuration={0} {...props} />
@@ -15,23 +15,23 @@ export const ScreenStackHeaderBackButtonImage = (
 );
 
 export const ScreenStackHeaderRightView = (
-  props: React.PropsWithChildren<ViewProps>
+  props: React.PropsWithChildren<ViewProps>,
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderLeftView = (
-  props: React.PropsWithChildren<ViewProps>
+  props: React.PropsWithChildren<ViewProps>,
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderCenterView = (
-  props: React.PropsWithChildren<ViewProps>
+  props: React.PropsWithChildren<ViewProps>,
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>
+  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>,
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderConfig = (
-  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>
+  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>,
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderSubview: React.ComponentType<

package/src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import {
   isSearchBarAvailableForCurrentPlatform,
   SearchBarCommands,
@@ -9,83 +9,95 @@ import { View } from 'react-native';
 // Native components
 import SearchBarNativeComponent, {
   Commands as SearchBarNativeCommands,
+  NativeProps as SearchBarNativeProps,
+  SearchBarEvent,
+  SearchButtonPressedEvent,
+  ChangeTextEvent,
 } from '../fabric/SearchBarNativeComponent';
+import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 
-export const NativeSearchBar: React.ComponentType<SearchBarProps> &
-  typeof NativeSearchBarCommands = SearchBarNativeComponent as any;
+export const NativeSearchBar: React.ComponentType<
+  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands> }
+> &
+  typeof NativeSearchBarCommands =
+  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
+    SearchBarCommandsType;
 export const NativeSearchBarCommands: SearchBarCommandsType =
-  SearchBarNativeCommands as any;
+  SearchBarNativeCommands as SearchBarCommandsType;
+
+type NativeSearchBarRef = React.ElementRef<typeof NativeSearchBar>;
 
 type SearchBarCommandsType = {
-  blur: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
-  focus: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
-  clearText: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
-  toggleCancelButton: (
-    viewRef: React.ElementRef<typeof NativeSearchBar>,
-    flag: boolean
-  ) => void;
-  setText: (
-    viewRef: React.ElementRef<typeof NativeSearchBar>,
-    text: string
-  ) => void;
-  cancelSearch: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
+  blur: (viewRef: NativeSearchBarRef) => void;
+  focus: (viewRef: NativeSearchBarRef) => void;
+  clearText: (viewRef: NativeSearchBarRef) => void;
+  toggleCancelButton: (viewRef: NativeSearchBarRef, flag: boolean) => void;
+  setText: (viewRef: NativeSearchBarRef, text: string) => void;
+  cancelSearch: (viewRef: NativeSearchBarRef) => void;
 };
 
-class SearchBar extends React.Component<SearchBarProps> {
-  nativeSearchBarRef: React.RefObject<SearchBarCommands>;
-
-  constructor(props: SearchBarProps) {
-    super(props);
-    this.nativeSearchBarRef = React.createRef();
-  }
+function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
+  const searchBarRef = React.useRef<SearchBarCommands | null>(null);
 
-  _callMethodWithRef(method: (ref: SearchBarCommands) => void) {
-    const ref = this.nativeSearchBarRef.current;
-    if (ref) {
-      method(ref);
-    } else {
-      console.warn(
-        'Reference to native search bar component has not been updated yet'
+  React.useImperativeHandle(ref, () => ({
+    blur: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.blur(ref));
+    },
+    focus: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.focus(ref));
+    },
+    toggleCancelButton: (flag: boolean) => {
+      _callMethodWithRef(ref =>
+        NativeSearchBarCommands.toggleCancelButton(ref, flag),
       );
-    }
-  }
+    },
+    clearText: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.clearText(ref));
+    },
+    setText: (text: string) => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.setText(ref, text));
+    },
+    cancelSearch: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.cancelSearch(ref));
+    },
+  }));
 
-  blur() {
-    this._callMethodWithRef(ref => NativeSearchBarCommands.blur(ref));
-  }
-
-  focus() {
-    this._callMethodWithRef(ref => NativeSearchBarCommands.focus(ref));
-  }
+  const _callMethodWithRef = React.useCallback(
+    (method: (ref: SearchBarCommands) => void) => {
+      const ref = searchBarRef.current;
+      if (ref) {
+        method(ref);
+      } else {
+        console.warn(
+          'Reference to native search bar component has not been updated yet',
+        );
+      }
+    },
+    [searchBarRef],
+  );
 
-  toggleCancelButton(flag: boolean) {
-    this._callMethodWithRef(ref =>
-      NativeSearchBarCommands.toggleCancelButton(ref, flag)
+  if (!isSearchBarAvailableForCurrentPlatform) {
+    console.warn(
+      'Importing SearchBar is only valid on iOS and Android devices.',
     );
+    return View as unknown as React.ReactNode;
   }
 
-  clearText() {
-    this._callMethodWithRef(ref => NativeSearchBarCommands.clearText(ref));
-  }
-
-  setText(text: string) {
-    this._callMethodWithRef(ref => NativeSearchBarCommands.setText(ref, text));
-  }
-
-  cancelSearch() {
-    this._callMethodWithRef(ref => NativeSearchBarCommands.cancelSearch(ref));
-  }
-
-  render() {
-    if (!isSearchBarAvailableForCurrentPlatform) {
-      console.warn(
-        'Importing SearchBar is only valid on iOS and Android devices.'
-      );
-      return View as any as ReactNode;
-    }
-
-    return <NativeSearchBar {...this.props} ref={this.nativeSearchBarRef} />;
-  }
+  return (
+    <NativeSearchBar
+      ref={searchBarRef}
+      {...props}
+      onSearchFocus={props.onFocus as DirectEventHandler<SearchBarEvent>}
+      onSearchBlur={props.onBlur as DirectEventHandler<SearchBarEvent>}
+      onSearchButtonPress={
+        props.onSearchButtonPress as DirectEventHandler<SearchButtonPressedEvent>
+      }
+      onCancelButtonPress={
+        props.onCancelButtonPress as DirectEventHandler<SearchBarEvent>
+      }
+      onChangeText={props.onChangeText as DirectEventHandler<ChangeTextEvent>}
+    />
+  );
 }
 
-export default SearchBar;
+export default React.forwardRef<SearchBarCommands, SearchBarProps>(SearchBar);

package/src/core.ts

@@ -19,7 +19,7 @@ export function enableScreens(shouldEnableScreens = true) {
 
   if (ENABLE_SCREENS && !UIManager.getViewManagerConfig('RNSScreen')) {
     console.error(
-      `Screen native module hasn't been linked. Please check the react-native-screens README for more details`
+      `Screen native module hasn't been linked. Please check the react-native-screens README for more details`,
     );
   }
 }

package/src/fabric/ModalScreenNativeComponent.ts

@@ -77,6 +77,7 @@ export interface NativeProps extends ViewProps {
   sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: boolean;
   homeIndicatorHidden?: boolean;
   preventNativeDismiss?: boolean;
   gestureEnabled?: WithDefault<boolean, true>;
@@ -95,6 +96,7 @@ export interface NativeProps extends ViewProps {
   hideKeyboardOnSwipe?: boolean;
   activityState?: WithDefault<Float, -1.0>;
   navigationBarColor?: ColorValue;
+  navigationBarTranslucent?: boolean;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
 }

package/src/fabric/ScreenNativeComponent.ts

@@ -77,6 +77,7 @@ export interface NativeProps extends ViewProps {
   sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: boolean;
   homeIndicatorHidden?: boolean;
   preventNativeDismiss?: boolean;
   gestureEnabled?: WithDefault<boolean, true>;
@@ -95,6 +96,7 @@ export interface NativeProps extends ViewProps {
   hideKeyboardOnSwipe?: boolean;
   activityState?: WithDefault<Float, -1.0>;
   navigationBarColor?: ColorValue;
+  navigationBarTranslucent?: boolean;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
 }

package/src/fabric/ScreenNavigationContainerNativeComponent.ts

@@ -5,5 +5,5 @@ interface NativeProps extends ViewProps {}
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenNavigationContainer',
-  {}
+  {},
 );

package/src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -13,6 +13,8 @@ type OnAttachedEvent = Readonly<{}>;
 // eslint-disable-next-line @typescript-eslint/ban-types
 type OnDetachedEvent = Readonly<{}>;
 
+type BackButtonDisplayMode = 'minimal' | 'default' | 'generic';
+
 export interface NativeProps extends ViewProps {
   onAttached?: DirectEventHandler<OnAttachedEvent>;
   onDetached?: DirectEventHandler<OnDetachedEvent>;
@@ -39,6 +41,7 @@ export interface NativeProps extends ViewProps {
   titleFontWeight?: string;
   titleColor?: ColorValue;
   disableBackButtonMenu?: boolean;
+  backButtonDisplayMode?: WithDefault<BackButtonDisplayMode, 'default'>;
   hideBackButton?: boolean;
   backButtonInCustomView?: boolean;
   // TODO: implement this props on iOS
@@ -47,5 +50,5 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderConfig',
-  {}
+  {},
 );

package/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts

@@ -16,5 +16,5 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderSubview',
-  {}
+  {},
 );

package/src/fabric/SearchBarNativeComponent.ts

@@ -7,13 +7,13 @@ import type {
 } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 
-type SearchBarEvent = Readonly<{}>;
+export type SearchBarEvent = Readonly<{}>;
 
-type SearchButtonPressedEvent = Readonly<{
+export type SearchButtonPressedEvent = Readonly<{
   text?: string;
 }>;
 
-type ChangeTextEvent = Readonly<{
+export type ChangeTextEvent = Readonly<{
   text?: string;
 }>;
 
@@ -21,9 +21,9 @@ type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';
 
 type AutoCapitalizeType = 'none' | 'words' | 'sentences' | 'characters';
 
-interface NativeProps extends ViewProps {
-  onFocus?: DirectEventHandler<SearchBarEvent> | null;
-  onBlur?: DirectEventHandler<SearchBarEvent> | null;
+export interface NativeProps extends ViewProps {
+  onSearchFocus?: DirectEventHandler<SearchBarEvent> | null;
+  onSearchBlur?: DirectEventHandler<SearchBarEvent> | null;
   onSearchButtonPress?: DirectEventHandler<SearchButtonPressedEvent> | null;
   onCancelButtonPress?: DirectEventHandler<SearchBarEvent> | null;
   onChangeText?: DirectEventHandler<ChangeTextEvent> | null;
@@ -58,7 +58,7 @@ interface NativeCommands {
   clearText: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleCancelButton: (
     viewRef: React.ElementRef<ComponentType>,
-    flag: boolean
+    flag: boolean,
   ) => void;
   setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
   cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;

package/src/gesture-handler/ScreenGestureDetector.tsx

@@ -40,7 +40,7 @@ const ScreenGestureDetector = ({
   const canPerformUpdates = makeMutable(false);
   const transitionAnimation = getAnimationForTransition(
     goBackGesture,
-    customTransitionAnimation
+    customTransitionAnimation,
   );
   const screenTransitionConfig = makeMutable({
     stackTag: -1,
@@ -90,7 +90,7 @@ const ScreenGestureDetector = ({
   }, [currentRouteKey]);
 
   function computeProgress(
-    event: GestureUpdateEvent<PanGestureHandlerEventPayload>
+    event: GestureUpdateEvent<PanGestureHandlerEventPayload>,
   ) {
     'worklet';
     let progress = 0;
@@ -114,10 +114,10 @@ const ScreenGestureDetector = ({
       progress = Math.abs(event.translationY / screenDimensions.height / 2);
     } else if (goBackGesture === 'twoDimensionalSwipe') {
       const progressX = Math.abs(
-        event.translationX / screenDimensions.width / 2
+        event.translationX / screenDimensions.width / 2,
       );
       const progressY = Math.abs(
-        event.translationY / screenDimensions.height / 2
+        event.translationY / screenDimensions.height / 2,
       );
       progress = Math.max(progressX, progressY);
     }
@@ -194,7 +194,7 @@ const ScreenGestureDetector = ({
       distanceX,
       requiredXDistance,
       distanceY,
-      requiredYDistance
+      requiredYDistance,
     );
     const stackTag = screenTransitionConfig.value.stackTag;
     screenTransitionConfig.value.onFinishAnimation = () => {

package/src/gesture-handler/constraints.ts

@@ -19,14 +19,14 @@ const SupportedGestures = [
 
 export function getAnimationForTransition(
   goBackGesture: GoBackGesture | undefined,
-  customTransitionAnimation: AnimatedScreenTransition | undefined
+  customTransitionAnimation: AnimatedScreenTransition | undefined,
 ) {
   let transitionAnimation = ScreenTransition.SwipeRight;
   if (customTransitionAnimation) {
     transitionAnimation = customTransitionAnimation;
     if (!goBackGesture) {
       throw new Error(
-        '[RNScreens] You have to specify `goBackGesture` when using `transitionAnimation`.'
+        '[RNScreens] You have to specify `goBackGesture` when using `transitionAnimation`.',
       );
     }
   } else {
@@ -34,7 +34,7 @@ export function getAnimationForTransition(
       transitionAnimation = AnimationForGesture[goBackGesture];
     } else if (goBackGesture !== undefined) {
       throw new Error(
-        `[RNScreens] Unknown goBackGesture parameter has been specified: ${goBackGesture}.`
+        `[RNScreens] Unknown goBackGesture parameter has been specified: ${goBackGesture}.`,
       );
     }
   }
@@ -43,7 +43,7 @@ export function getAnimationForTransition(
 
 export function checkBoundaries(
   goBackGesture: string | undefined,
-  event: GestureUpdateEvent<PanGestureHandlerEventPayload>
+  event: GestureUpdateEvent<PanGestureHandlerEventPayload>,
 ) {
   'worklet';
   if (goBackGesture === 'swipeRight' && event.translationX < 0) {
@@ -62,7 +62,7 @@ export function checkIfTransitionCancelled(
   distanceX: number,
   requiredXDistance: number,
   distanceY: number,
-  requiredYDistance: number
+  requiredYDistance: number,
 ) {
   'worklet';
   let isTransitionCanceled = false;

package/src/gesture-handler/fabricUtils.ts

@@ -29,7 +29,7 @@ if (isFabric()) {
 }
 
 export function getShadowNodeWrapperAndTagFromRef(
-  ref: React.Ref<NativeStackNavigatorProps> | React.Component
+  ref: React.Ref<NativeStackNavigatorProps> | React.Component,
 ) {
   const hostInstance = findHostInstance(ref as React.Component);
   return {

package/src/native-stack/contexts/GHContext.tsx

@@ -3,5 +3,5 @@ import { GestureProviderProps } from '../types';
 
 // context to be used when the user wants full screen swipe (see `gesture-handler` folder in repo)
 export const GHContext = React.createContext(
-  (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>
+  (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>,
 );