react-native-screens 3.13.1 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "3.13.1",
+  "version": "3.15.0",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "check-types": "tsc --noEmit",
@@ -111,7 +111,7 @@
     "{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",
     "src/**/*.{js,ts,tsx}": "yarn lint-js",
     "android/**/*.kt": "yarn format-android",
-    "ios/**/*.{h,m,cpp}": "yarn format-ios"
+    "ios/**/*.{h,m,mm,cpp}": "yarn format-ios"
   },
   "@react-native-community/bob": {
     "source": "src",

package/src/fabric/FullWindowOverlayNativeComponent.js

@@ -0,0 +1,19 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNSFullWindowOverlay',
+  {}
+): ComponentType);

package/src/fabric/ScreenContainerNativeComponent.js

@@ -0,0 +1,19 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNSScreenContainer',
+  {}
+): ComponentType);

package/src/fabric/ScreenNativeComponent.js

@@ -19,7 +19,28 @@ type ScreenDismissedEvent = $ReadOnly<{|
   dismissCount: Int32,
 |}>;
 
-type StackPresentation = 'push' | 'modal' | 'transparentModal';
+type TransitionProgressEvent = $ReadOnly<{|
+  progress: Double,
+  closing: Int32,
+  goingForward: Int32,
+|}>;
+
+type GestureResponseDistanceType = $ReadOnly<{|
+  start: Float,
+  end: Float,
+  top: Float,
+  bottom: Float,
+|}>;
+
+type StackPresentation =
+  | 'push'
+  | 'modal'
+  | 'transparentModal'
+  | 'fullScreenModal'
+  | 'formSheet'
+  | 'containedModal'
+  | 'containedTransparentModal';
+
 type StackAnimation =
   | 'default'
   | 'flip'
@@ -31,6 +52,8 @@ type StackAnimation =
   | 'slide_from_bottom'
   | 'fade_from_bottom';
 
+type SwipeDirection = 'vertical' | 'horizontal';
+
 type ReplaceAnimation = 'pop' | 'push';
 
 export type NativeProps = $ReadOnly<{|
@@ -38,23 +61,33 @@ export type NativeProps = $ReadOnly<{|
   onAppear?: ?BubblingEventHandler<ScreenEvent>,
   onDisappear?: ?BubblingEventHandler<ScreenEvent>,
   onDismissed?: ?BubblingEventHandler<ScreenDismissedEvent>,
+  onNativeDismissCancelled?: ?BubblingEventHandler<ScreenDismissedEvent>,
   onWillAppear?: ?BubblingEventHandler<ScreenEvent>,
   onWillDisappear?: ?BubblingEventHandler<ScreenEvent>,
-  // TODO: implement this props on iOS
-  stackPresentation?: WithDefault<StackPresentation, 'push'>,
-  stackAnimation?: WithDefault<StackAnimation, 'default'>,
+  onTransitionProgress?: ?BubblingEventHandler<TransitionProgressEvent>,
+  customAnimationOnSwipe?: boolean,
+  fullScreenSwipeEnabled?: boolean,
+  homeIndicatorHidden?: boolean,
+  preventNativeDismiss?: boolean,
   gestureEnabled?: WithDefault<boolean, true>,
-  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>,
+  statusBarColor?: ColorValue,
+  statusBarHidden?: boolean,
   screenOrientation?: string,
   statusBarAnimation?: string,
-  statusBarColor?: ColorValue,
   statusBarStyle?: string,
   statusBarTranslucent?: boolean,
-  statusBarHidden?: boolean,
+  gestureResponseDistance?: GestureResponseDistanceType,
+  stackPresentation?: WithDefault<StackPresentation, 'push'>,
+  stackAnimation?: WithDefault<StackAnimation, 'default'>,
+  transitionDuration?: WithDefault<Int32, 350>,
+  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>,
+  swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>,
+  hideKeyboardOnSwipe?: boolean,
+  activityState?: WithDefault<Float, -1.0>,
+  // TODO: implement these props on iOS
   navigationBarColor?: ColorValue,
   navigationBarHidden?: boolean,
   nativeBackButtonDismissalEnabled?: boolean,
-  activityState?: WithDefault<Int32, -1>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

package/src/fabric/ScreenNavigationContainerNativeComponent.js

@@ -0,0 +1,19 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNSScreenNavigationContainer',
+  {}
+): ComponentType);

package/src/fabric/ScreenStackHeaderConfigNativeComponent.js

@@ -41,9 +41,9 @@ export type NativeProps = $ReadOnly<{|
   titleColor?: ColorValue,
   disableBackButtonMenu?: boolean,
   hideBackButton?: boolean,
+  backButtonInCustomView?: boolean,
   // TODO: implement this props on iOS
   topInsetEnabled?: boolean,
-  backButtonInCustomView?: boolean,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

package/src/fabric/ScreenStackNativeComponent.js

@@ -6,9 +6,13 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+type FinishTransitioningEvent = $ReadOnly<{||}>;
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
+  onFinishTransitioning?: ?DirectEventHandler<FinishTransitioningEvent>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

package/src/fabric/SearchBarNativeComponent.js

@@ -0,0 +1,62 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  WithDefault,
+  BubblingEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import { tintColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+
+type SearchBarEvent = $ReadOnly<{||}>;
+
+type SearchButtonPressedEvent = $ReadOnly<{|
+  text?: string,
+|}>;
+
+type ChangeTextEvent = $ReadOnly<{|
+  text?: string,
+|}>;
+
+type AutoCapitalizeType = 'none' | 'words' | 'sentences' | 'characters';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  onFocus?: ?BubblingEventHandler<SearchBarEvent>,
+  onBlur?: ?BubblingEventHandler<SearchBarEvent>,
+  onSearchButtonPress?: ?BubblingEventHandler<SearchButtonPressedEvent>,
+  onCancelButtonPress?: ?BubblingEventHandler<SearchBarEvent>,
+  onChangeText?: ?BubblingEventHandler<ChangeTextEvent>,
+  hideWhenScrolling?: boolean,
+  autoCapitalize?: WithDefault<AutoCapitalizeType, 'none'>,
+  placeholder?: string,
+  obscureBackground?: boolean,
+  hideNavigationBar?: boolean,
+  cancelButtonText?: string,
+  // TODO: implement these on iOS
+  barTintColor?: ColorValue,
+  tintColor?: ColorValue,
+  textColor?: ColorValue,
+
+  // Android only
+  disableBackButtonOverride?: boolean,
+  // TODO: consider creating enum here
+  inputType?: string,
+  onClose?: ?BubblingEventHandler<SearchBarEvent>,
+  onOpen?: ?BubblingEventHandler<SearchBarEvent>,
+  hintTextColor?: ColorValue,
+  headerIconColor?: ColorValue,
+  shouldShowHintSearchIcon?: WithDefault<boolean, true>,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNSSearchBar',
+  {}
+): ComponentType);

package/src/index.native.tsx

@@ -11,9 +11,6 @@ import {
   ViewProps,
 } from 'react-native';
 import { Freeze } from 'react-freeze';
-// @ts-ignore Getting private component
-// eslint-disable-next-line import/default
-import processColor from 'react-native/Libraries/StyleSheet/processColor';
 import { version } from 'react-native/package.json';
 
 import TransitionProgressContext from './TransitionProgressContext';
@@ -44,11 +41,6 @@ const isPlatformSupported =
 
 let ENABLE_SCREENS = isPlatformSupported;
 
-// @ts-expect-error nativeFabricUIManager is not yet included in the RN types
-const ENABLE_FABRIC = !!global?.nativeFabricUIManager;
-
-const FabricComponents = ENABLE_FABRIC ? require('./fabric') : {};
-
 function enableScreens(shouldEnableScreens = true): void {
   ENABLE_SCREENS = isPlatformSupported && shouldEnableScreens;
   if (ENABLE_SCREENS && !UIManager.getViewManagerConfig('RNSScreen')) {
@@ -97,9 +89,7 @@ let NativeFullWindowOverlay: React.ComponentType<View>;
 const ScreensNativeModules = {
   get NativeScreen() {
     NativeScreenValue =
-      NativeScreenValue ||
-      FabricComponents.Screen ||
-      requireNativeComponent('RNSScreen');
+      NativeScreenValue || requireNativeComponent('RNSScreen');
     return NativeScreenValue;
   },
 
@@ -121,16 +111,13 @@ const ScreensNativeModules = {
 
   get NativeScreenStack() {
     NativeScreenStack =
-      NativeScreenStack ||
-      FabricComponents.ScreenStack ||
-      requireNativeComponent('RNSScreenStack');
+      NativeScreenStack || requireNativeComponent('RNSScreenStack');
     return NativeScreenStack;
   },
 
   get NativeScreenStackHeaderConfig() {
     NativeScreenStackHeaderConfig =
       NativeScreenStackHeaderConfig ||
-      FabricComponents.ScreenStackHeaderConfig ||
       requireNativeComponent('RNSScreenStackHeaderConfig');
     return NativeScreenStackHeaderConfig;
   },
@@ -138,7 +125,6 @@ const ScreensNativeModules = {
   get NativeScreenStackHeaderSubview() {
     NativeScreenStackHeaderSubview =
       NativeScreenStackHeaderSubview ||
-      FabricComponents.ScreenStackHeaderSubview ||
       requireNativeComponent('RNSScreenStackHeaderSubview');
     return NativeScreenStackHeaderSubview;
   },
@@ -233,15 +219,9 @@ class Screen extends React.Component<ScreenProps> {
     const { enabled = ENABLE_SCREENS, ...rest } = this.props;
 
     if (enabled && isPlatformSupported) {
-      if (!AnimatedNativeScreen) {
-        if (ENABLE_FABRIC) {
-          AnimatedNativeScreen = ScreensNativeModules.NativeScreen;
-        } else {
-          AnimatedNativeScreen = Animated.createAnimatedComponent(
-            ScreensNativeModules.NativeScreen
-          ) as React.ComponentType<ScreenProps>;
-        }
-      }
+      AnimatedNativeScreen =
+        AnimatedNativeScreen ||
+        Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen);
 
       let {
         // Filter out active prop in this case because it is unused and
@@ -251,7 +231,7 @@ class Screen extends React.Component<ScreenProps> {
         activityState,
         children,
         isNativeStack,
-        statusBarColor,
+        gestureResponseDistance,
         ...props
       } = rest;
 
@@ -262,16 +242,12 @@ class Screen extends React.Component<ScreenProps> {
         activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
       }
 
-      const processedColor = processColor(statusBarColor);
-
       const handleRef = (ref: ViewConfig) => {
-        if (!ENABLE_FABRIC) {
-          if (ref?.viewConfig?.validAttributes?.style) {
-            ref.viewConfig.validAttributes.style = {
-              ...ref.viewConfig.validAttributes.style,
-              display: false,
-            };
-          }
+        if (ref?.viewConfig?.validAttributes?.style) {
+          ref.viewConfig.validAttributes.style = {
+            ...ref.viewConfig.validAttributes.style,
+            display: false,
+          };
           this.setRef(ref);
         }
       };
@@ -280,8 +256,13 @@ class Screen extends React.Component<ScreenProps> {
         <MaybeFreeze freeze={activityState === 0}>
           <AnimatedNativeScreen
             {...props}
-            statusBarColor={processedColor}
             activityState={activityState}
+            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}

package/src/native-stack/types.tsx

@@ -111,6 +111,12 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   gestureEnabled?: boolean;
+  /**
+   * Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside `fullScreenSwipeEnabled`.
+   *
+   * @platform ios
+   */
+  gestureResponseDistance?: ScreenProps['gestureResponseDistance'];
   /**
    * Title to display in the back button.
    * Only supported on iOS.
@@ -249,6 +255,12 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   homeIndicatorHidden?: boolean;
+  /**
+   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  hideKeyboardOnSwipe?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.

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

@@ -151,6 +151,7 @@ const RouteView = ({
   const {
     gestureEnabled,
     headerShown,
+    hideKeyboardOnSwipe,
     homeIndicatorHidden,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
@@ -169,6 +170,7 @@ const RouteView = ({
   let {
     customAnimationOnSwipe,
     fullScreenSwipeEnabled,
+    gestureResponseDistance,
     stackAnimation,
     stackPresentation = 'push',
   } = options;
@@ -218,8 +220,10 @@ const RouteView = ({
       style={StyleSheet.absoluteFill}
       customAnimationOnSwipe={customAnimationOnSwipe}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      hideKeyboardOnSwipe={hideKeyboardOnSwipe}
       homeIndicatorHidden={homeIndicatorHidden}
       gestureEnabled={isAndroid ? false : gestureEnabled}
+      gestureResponseDistance={gestureResponseDistance}
       nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
       navigationBarColor={navigationBarColor}
       navigationBarHidden={navigationBarHidden}

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -14,6 +14,11 @@ const AnimatedScreen = Animated.createAnimatedComponent(
   (Screen as unknown) as React.ComponentClass
 );
 
+// We use prop added to global by reanimated since it seems safer than the one from RN. See:
+// https://github.com/software-mansion/react-native-reanimated/blob/3fe8b35b05e82b2f2aefda1fb97799cf81e4b7bb/src/reanimated2/UpdateProps.ts#L46
+// @ts-expect-error nativeFabricUIManager is not yet included in the RN types
+const ENABLE_FABRIC = !!global?._IS_FABRIC;
+
 const ReanimatedNativeStackScreen = React.forwardRef<
   typeof AnimatedScreen,
   ScreenProps
@@ -39,6 +44,9 @@ const ReanimatedNativeStackScreen = React.forwardRef<
           // This should not be necessary, but is not properly managed by `react-native-reanimated`
           // @ts-ignore wrong type
           Platform.OS === 'android'
+            ? 'onTransitionProgress'
+            : // for some reason there is a difference in required event name between architectures
+            ENABLE_FABRIC
             ? 'onTransitionProgress'
             : 'topTransitionProgress',
         ]

package/src/types.tsx

@@ -70,6 +70,13 @@ export type TransitionProgressEventType = {
   goingForward: number;
 };
 
+export type GestureResponseDistanceType = {
+  start?: number;
+  end?: number;
+  top?: number;
+  bottom?: number;
+};
+
 export interface ScreenProps extends ViewProps {
   active?: 0 | 1 | Animated.AnimatedInterpolation;
   activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation;
@@ -102,12 +109,24 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   gestureEnabled?: boolean;
+  /**
+   * Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside `fullScreenSwipeEnabled`.
+   *
+   * @platform ios
+   */
+  gestureResponseDistance?: GestureResponseDistanceType;
   /**
    * Whether the home indicator should be hidden on this screen. Defaults to `false`.
    *
    * @platform ios
    */
   homeIndicatorHidden?: boolean;
+  /**
+   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  hideKeyboardOnSwipe?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.
@@ -425,6 +444,12 @@ export interface SearchBarProps {
    * The search field background color
    */
   barTintColor?: string;
+  /**
+   * The color for the cursor caret and cancel button text.
+   *
+   * @platform ios
+   */
+  tintColor?: string;
   /**
    * The text to be used instead of default `Cancel` button text
    *

package/ios/RNSFullWindowOverlay.m

@@ -1,105 +0,0 @@
-#import <UIKit/UIKit.h>
-
-#import "RNSFullWindowOverlay.h"
-
-#import <React/RCTTouchHandler.h>
-
-@implementation RNSFullWindowOverlayContainer
-
-- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
-{
-  for (UIView *view in [self subviews]) {
-    if (view.userInteractionEnabled && [view pointInside:[self convertPoint:point toView:view] withEvent:event]) {
-      return YES;
-    }
-  }
-  return NO;
-}
-
-@end
-
-@implementation RNSFullWindowOverlay {
-  __weak RCTBridge *_bridge;
-  RNSFullWindowOverlayContainer *_container;
-  CGRect _reactFrame;
-  RCTTouchHandler *_touchHandler;
-}
-
-- (instancetype)initWithBridge:(RCTBridge *)bridge
-{
-  if (self = [super init]) {
-    _bridge = bridge;
-    _reactFrame = CGRectNull;
-    _container = self.container;
-    [self show];
-  }
-
-  return self;
-}
-
-- (void)reactSetFrame:(CGRect)frame
-{
-  _reactFrame = frame;
-  [_container setFrame:frame];
-}
-
-- (void)addSubview:(UIView *)view
-{
-  [_container addSubview:view];
-}
-
-- (RNSFullWindowOverlayContainer *)container
-{
-  if (_container == nil) {
-    _container = [[RNSFullWindowOverlayContainer alloc] initWithFrame:_reactFrame];
-  }
-
-  return _container;
-}
-
-- (void)show
-{
-  UIWindow *window = RCTSharedApplication().delegate.window;
-  [window addSubview:_container];
-}
-
-- (void)hide
-{
-  if (!_container) {
-    return;
-  }
-
-  [_container removeFromSuperview];
-}
-
-- (void)didMoveToWindow
-{
-  if (self.window == nil) {
-    [self hide];
-    [_touchHandler detachFromView:_container];
-  } else {
-    if (_touchHandler == nil) {
-      _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge];
-    }
-    [_touchHandler attachToView:_container];
-  }
-}
-
-- (void)invalidate
-{
-  [self hide];
-  _container = nil;
-}
-
-@end
-
-@implementation RNSFullWindowOverlayManager
-
-RCT_EXPORT_MODULE()
-
-- (UIView *)view
-{
-  return [[RNSFullWindowOverlay alloc] initWithBridge:self.bridge];
-}
-
-@end

package/ios/RNSScreenComponentView.h

@@ -1,23 +0,0 @@
-#import <UIKit/UIKit.h>
-
-#import <React/RCTViewComponentView.h>
-#import "RNSScreenController.h"
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface RNSScreenComponentView : RCTViewComponentView
-
-@property (weak, nonatomic) UIView *reactSuperview;
-@property (weak, nonatomic) UIView *config;
-@property (nonatomic, retain) RNSScreenController *controller;
-
-- (void)notifyWillAppear;
-- (void)notifyWillDisappear;
-- (void)notifyAppear;
-- (void)notifyDisappear;
-- (void)updateBounds;
-- (void)notifyDismissedWithCount:(int)dismissCount;
-
-@end
-
-NS_ASSUME_NONNULL_END