react-native-screens 3.13.1 → 3.14.0

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

package/ios/RNSScreenComponentView.mm

@@ -1,159 +0,0 @@
-#import "RNSScreenComponentView.h"
-#import "RNSScreenStackHeaderConfigComponentView.h"
-
-#import <React/RCTConversions.h>
-#import <React/RCTMountingTransactionObserving.h>
-
-#import <react/renderer/components/rnscreens/EventEmitters.h>
-#import <react/renderer/components/rnscreens/Props.h>
-#import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
-#import <rnscreens/RNSScreenComponentDescriptor.h>
-
-#import "RCTFabricComponentsPlugins.h"
-
-using namespace facebook::react;
-
-@interface RNSScreenComponentView () <RCTRNSScreenViewProtocol, RCTMountingTransactionObserving>
-@end
-
-@implementation RNSScreenComponentView {
-  RNSScreenController *_controller;
-  RNSScreenShadowNode::ConcreteState::Shared _state;
-}
-
-- (instancetype)initWithFrame:(CGRect)frame
-{
-  if (self = [super initWithFrame:frame]) {
-    static const auto defaultProps = std::make_shared<const RNSScreenProps>();
-    _props = defaultProps;
-    _controller = [[RNSScreenController alloc] initWithView:self];
-  }
-
-  return self;
-}
-
-- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
-{
-  [super mountChildComponentView:childComponentView index:index];
-  if ([childComponentView isKindOfClass:[RNSScreenStackHeaderConfigComponentView class]]) {
-    _config = childComponentView;
-    ((RNSScreenStackHeaderConfigComponentView *)childComponentView).screenView = self;
-  }
-}
-
-- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
-{
-  [self.controller setViewToSnapshot];
-  if ([childComponentView isKindOfClass:[RNSScreenStackHeaderConfigComponentView class]]) {
-    _config = nil;
-  }
-  [super unmountChildComponentView:childComponentView index:index];
-}
-
-- (void)updateBounds
-{
-  if (_state != nullptr) {
-    auto boundsSize = self.bounds.size;
-    auto newState = RNSScreenState{RCTSizeFromCGSize(boundsSize)};
-    _state->updateState(std::move(newState));
-    UINavigationController *navctr = _controller.navigationController;
-    [navctr.view setNeedsLayout];
-  }
-}
-
-- (UIView *)reactSuperview
-{
-  return _reactSuperview;
-}
-
-- (void)notifyWillAppear
-{
-  // If screen is already unmounted then there will be no event emitter
-  // it will be cleaned in prepareForRecycle
-  if (_eventEmitter != nullptr) {
-    std::dynamic_pointer_cast<const RNSScreenEventEmitter>(_eventEmitter)
-        ->onWillAppear(RNSScreenEventEmitter::OnWillAppear{});
-  }
-}
-
-- (void)notifyWillDisappear
-{
-  // If screen is already unmounted then there will be no event emitter
-  // it will be cleaned in prepareForRecycle
-  if (_eventEmitter != nullptr) {
-    std::dynamic_pointer_cast<const RNSScreenEventEmitter>(_eventEmitter)
-        ->onWillDisappear(RNSScreenEventEmitter::OnWillDisappear{});
-  }
-}
-
-- (void)notifyAppear
-{
-  // If screen is already unmounted then there will be no event emitter
-  // it will be cleaned in prepareForRecycle
-  if (_eventEmitter != nullptr) {
-    std::dynamic_pointer_cast<const RNSScreenEventEmitter>(_eventEmitter)->onAppear(RNSScreenEventEmitter::OnAppear{});
-  }
-}
-
-- (void)notifyDismissedWithCount:(int)dismissCount
-{
-  // If screen is already unmounted then there will be no event emitter
-  // it will be cleaned in prepareForRecycle
-  if (_eventEmitter != nullptr) {
-    std::dynamic_pointer_cast<const RNSScreenEventEmitter>(_eventEmitter)
-        ->onDismissed(RNSScreenEventEmitter::OnDismissed{dismissCount : dismissCount});
-  }
-}
-
-- (void)notifyDisappear
-{
-  // If screen is already unmounted then there will be no event emitter
-  // it will be cleaned in prepareForRecycle
-  if (_eventEmitter != nullptr) {
-    std::dynamic_pointer_cast<const RNSScreenEventEmitter>(_eventEmitter)
-        ->onDisappear(RNSScreenEventEmitter::OnDisappear{});
-  }
-}
-
-#pragma mark - RCTMountingTransactionObserving
-
-- (void)mountingTransactionWillMountWithMetadata:(MountingTransactionMetadata const &)metadata
-{
-  [self.controller takeSnapshot];
-}
-
-#pragma mark - RCTComponentViewProtocol
-
-- (void)prepareForRecycle
-{
-  [super prepareForRecycle];
-  // TODO: Make sure that there is no edge case when this should be uncommented
-  // _controller=nil;
-  _state.reset();
-}
-
-+ (ComponentDescriptorProvider)componentDescriptorProvider
-{
-  return concreteComponentDescriptorProvider<RNSScreenComponentDescriptor>();
-}
-
-- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
-{
-  const auto &oldScreenProps = *std::static_pointer_cast<const RNSScreenProps>(_props);
-  const auto &newScreenProps = *std::static_pointer_cast<const RNSScreenProps>(props);
-
-  [super updateProps:props oldProps:oldProps];
-}
-
-- (void)updateState:(facebook::react::State::Shared const &)state
-           oldState:(facebook::react::State::Shared const &)oldState
-{
-  _state = std::static_pointer_cast<const RNSScreenShadowNode::ConcreteState>(state);
-}
-
-@end
-
-Class<RCTComponentViewProtocol> RNSScreenCls(void)
-{
-  return RNSScreenComponentView.class;
-}

package/ios/RNSScreenController.h

@@ -1,10 +0,0 @@
-#import <UIKit/UIKit.h>
-
-@interface RNSScreenController : UIViewController
-
-- (instancetype)initWithView:(UIView *)view;
-- (void)takeSnapshot;
-- (void)setViewToSnapshot;
-- (void)resetViewToScreen;
-
-@end