react-native-screens 3.12.0 → 3.14.0

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/ScreenNavigationContainer.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ScreenNavigationContainerNativeComponent from './ScreenNavigationContainerNativeComponent';
+
+function ScreenNavigationContainer(props) {
+  return (
+    <ScreenNavigationContainerNativeComponent
+      {...props}
+      style={[
+        { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        props.style,
+      ]}
+    />
+  );
+}
+
+export default ScreenNavigationContainer;

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/ScreenStack.js

@@ -1,8 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import ScreenStackNativeComponent from './ScreenStackNativeComponent';
 
-export default function ScreenStack(props) {
+function ScreenStack(props) {
   return (
     <ScreenStackNativeComponent {...props} style={[{ flex: 1 }, props.style]} />
   );
 }
+
+export default ScreenStack;

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/ScreenStackHeaderSubview.js

@@ -13,8 +13,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function ScreenStackHeaderSubview(props) {
+function ScreenStackHeaderSubview(props) {
   return (
     <NativeScreenStackHeaderSubview {...props} style={styles.headerSubview} />
   );
 }
+
+export default ScreenStackHeaderSubview;

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/SearchBar.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import SearchBarNativeComponent from './SearchBarNativeComponent';
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  headerSubview: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+function SearchBar(props) {
+  return <SearchBarNativeComponent {...props} style={styles.headerSubview} />;
+}
+
+export default SearchBar;

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/fabric/index.js

@@ -2,10 +2,18 @@ import Screen from './Screen';
 import ScreenStackHeaderSubview from './ScreenStackHeaderSubview';
 import ScreenStackHeaderConfig from './ScreenStackHeaderConfigNativeComponent';
 import ScreenStack from './ScreenStack';
+import SearchBar from './SearchBar';
+import ScreenContainer from './ScreenContainer';
+import ScreenNavigationContainer from './ScreenNavigationContainer';
+import FullWindowOverlay from './FullWindowOverlay';
 
 export {
   Screen,
   ScreenStackHeaderSubview,
   ScreenStackHeaderConfig,
   ScreenStack,
+  SearchBar,
+  ScreenContainer,
+  ScreenNavigationContainer,
+  FullWindowOverlay,
 };

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';
@@ -106,6 +103,7 @@ const ScreensNativeModules = {
   get NativeScreenContainer() {
     NativeScreenContainerValue =
       NativeScreenContainerValue ||
+      FabricComponents.ScreenContainer ||
       requireNativeComponent('RNSScreenContainer');
     return NativeScreenContainerValue;
   },
@@ -114,7 +112,8 @@ const ScreensNativeModules = {
     NativeScreenNavigationContainerValue =
       NativeScreenNavigationContainerValue ||
       (Platform.OS === 'ios'
-        ? requireNativeComponent('RNSScreenNavigationContainer')
+        ? FabricComponents.ScreenNavigationContainer ||
+          requireNativeComponent('RNSScreenNavigationContainer')
         : this.NativeScreenContainer);
     return NativeScreenNavigationContainerValue;
   },
@@ -144,13 +143,18 @@ const ScreensNativeModules = {
   },
 
   get NativeSearchBar() {
-    NativeSearchBar = NativeSearchBar || requireNativeComponent('RNSSearchBar');
+    NativeSearchBar =
+      NativeSearchBar ||
+      FabricComponents.SearchBar ||
+      requireNativeComponent('RNSSearchBar');
     return NativeSearchBar;
   },
 
   get NativeFullWindowOverlay() {
     NativeFullWindowOverlay =
-      NativeFullWindowOverlay || requireNativeComponent('RNSFullWindowOverlay');
+      NativeFullWindowOverlay ||
+      FabricComponents.FullWindowOverlay ||
+      requireNativeComponent('RNSFullWindowOverlay');
     return NativeFullWindowOverlay;
   },
 };
@@ -233,15 +237,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 +249,6 @@ class Screen extends React.Component<ScreenProps> {
         activityState,
         children,
         isNativeStack,
-        statusBarColor,
         ...props
       } = rest;
 
@@ -262,8 +259,6 @@ 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) {
@@ -280,7 +275,6 @@ class Screen extends React.Component<ScreenProps> {
         <MaybeFreeze freeze={activityState === 0}>
           <AnimatedNativeScreen
             {...props}
-            statusBarColor={processedColor}
             activityState={activityState}
             // This prevents showing blank screen when navigating between multiple screens with freezing
             // https://github.com/software-mansion/react-native-screens/pull/1208

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;
@@ -190,6 +192,29 @@ const RouteView = ({
     }
   }
 
+  if (gestureResponseDistance === undefined) {
+    // default values, required for unification of Fabric & Paper implementation
+    gestureResponseDistance = {
+      start: -1,
+      end: -1,
+      top: -1,
+      bottom: -1,
+    };
+  } else {
+    if (gestureResponseDistance.start === undefined) {
+      gestureResponseDistance.start = -1;
+    }
+    if (gestureResponseDistance.end === undefined) {
+      gestureResponseDistance.end = -1;
+    }
+    if (gestureResponseDistance.top === undefined) {
+      gestureResponseDistance.top = -1;
+    }
+    if (gestureResponseDistance.bottom === undefined) {
+      gestureResponseDistance.bottom = -1;
+    }
+  }
+
   if (index === 0) {
     // first screen should always be treated as `push`, it resolves problems with no header animation
     // for navigator with first screen as `modal` and the next as `push`
@@ -218,8 +243,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,9 @@ const AnimatedScreen = Animated.createAnimatedComponent(
   (Screen as unknown) as React.ComponentClass
 );
 
+// @ts-expect-error nativeFabricUIManager is not yet included in the RN types
+const ENABLE_FABRIC = !!global?.nativeFabricUIManager;
+
 const ReanimatedNativeStackScreen = React.forwardRef<
   typeof AnimatedScreen,
   ScreenProps
@@ -39,6 +42,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