react-native-screens 3.7.2 → 3.10.1

package/android/src/main/java/com/swmansion/rnscreens/SearchViewFormatter.kt

@@ -0,0 +1,40 @@
+package com.swmansion.rnscreens
+
+import android.graphics.drawable.Drawable
+import android.view.View
+import android.widget.EditText
+import androidx.appcompat.widget.SearchView
+
+class SearchViewFormatter(var searchView: SearchView) {
+    private var mDefaultTextColor: Int? = null
+    private var mDefaultTintBackground: Drawable? = null
+
+    private val searchEditText
+        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_src_text) as? EditText
+    private val searchTextPlate
+        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_plate)
+
+    fun setTextColor(textColor: Int?) {
+        val currentDefaultTextColor = mDefaultTextColor
+        if (textColor != null) {
+            if (mDefaultTextColor == null) {
+                mDefaultTextColor = searchEditText?.textColors?.defaultColor
+            }
+            searchEditText?.setTextColor(textColor)
+        } else if (currentDefaultTextColor != null) {
+            searchEditText?.setTextColor(currentDefaultTextColor)
+        }
+    }
+
+    fun setTintColor(tintColor: Int?) {
+        val currentDefaultTintColor = mDefaultTintBackground
+        if (tintColor != null) {
+            if (mDefaultTintBackground == null) {
+                mDefaultTintBackground = searchTextPlate.background
+            }
+            searchTextPlate.setBackgroundColor(tintColor)
+        } else if (currentDefaultTintColor != null) {
+            searchTextPlate.background = currentDefaultTintColor
+        }
+    }
+}

package/ios/RNSScreen.h

@@ -65,6 +65,7 @@ typedef NS_ENUM(NSInteger, RNSWindowTrait) {
 
 - (instancetype)initWithView:(UIView *)view;
 - (void)notifyFinishTransitioning;
+- (UIViewController *)findChildVCForConfigAndTrait:(RNSWindowTrait)trait includingModals:(BOOL)includingModals;
 
 @end
 

package/ios/RNSScreen.m

@@ -564,6 +564,8 @@
     _shouldNotify = NO;
   }
 
+  [self hideHeaderIfNecessary];
+
   // as per documentation of these methods
   _goingForward = [self isBeingPresented] || [self isMovingToParentViewController];
 
@@ -575,6 +577,35 @@
   }
 }
 
+- (void)hideHeaderIfNecessary
+{
+#if !TARGET_OS_TV
+  // On iOS >=13, there is a bug when user transitions from screen with active search bar to screen without header
+  // In that case default iOS header will be shown. To fix this we hide header when the screens that appears has header
+  // hidden and search bar was active on previous screen. We need to do it asynchronously, because default header is
+  // added after viewWillAppear.
+  if (@available(iOS 13.0, *)) {
+    NSUInteger currentIndex = [self.navigationController.viewControllers indexOfObject:self];
+
+    if (currentIndex > 0 && [self.view.reactSubviews[0] isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
+      UINavigationItem *prevNavigationItem =
+          [self.navigationController.viewControllers objectAtIndex:currentIndex - 1].navigationItem;
+      RNSScreenStackHeaderConfig *config = ((RNSScreenStackHeaderConfig *)self.view.reactSubviews[0]);
+
+      BOOL wasSearchBarActive = prevNavigationItem.searchController.active;
+      BOOL shouldHideHeader = config.hide;
+
+      if (wasSearchBarActive && shouldHideHeader) {
+        dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, 0);
+        dispatch_after(popTime, dispatch_get_main_queue(), ^(void) {
+          [self.navigationController setNavigationBarHidden:YES animated:NO];
+        });
+      }
+    }
+  }
+#endif
+}
+
 - (void)viewWillDisappear:(BOOL)animated
 {
   [super viewWillDisappear:animated];
@@ -657,6 +688,10 @@
 
 - (void)traverseForScrollView:(UIView *)view
 {
+  if (![[self.view valueForKey:@"_bridge"] valueForKey:@"_jsThread"]) {
+    // we don't want to send `scrollViewDidEndDecelerating` event to JS before the JS thread is ready
+    return;
+  }
   if ([view isKindOfClass:[UIScrollView class]] &&
       ([[(UIScrollView *)view delegate] respondsToSelector:@selector(scrollViewDidEndDecelerating:)])) {
     [[(UIScrollView *)view delegate] scrollViewDidEndDecelerating:(id)view];

package/ios/RNSScreenContainer.h

@@ -13,6 +13,8 @@
 
 @interface RNScreensViewController : UIViewController <RNScreensViewControllerDelegate>
 
+- (UIViewController *)findActiveChildVC;
+
 @end
 
 @interface RNSScreenContainerManager : RCTViewManager

package/ios/RNSScreenStack.m

@@ -425,12 +425,12 @@
   // controller is still there
   BOOL firstTimePush = ![lastTop isKindOfClass:[RNSScreen class]];
 
-  BOOL shouldAnimate = !firstTimePush && ((RNSScreenView *)lastTop.view).stackAnimation != RNSScreenStackAnimationNone;
-
   if (firstTimePush) {
     // nothing pushed yet
     [_controller setViewControllers:controllers animated:NO];
   } else if (top != lastTop) {
+    // we always provide `animated:YES` since, if the user does not want the animation, he will provide
+    // `stackAnimation: 'none'`, which will resolve in no animation anyways.
     if (![controllers containsObject:lastTop]) {
       // if the previous top screen does not exist anymore and the new top was not on the stack before, probably replace
       // was called, so we check the animation
@@ -445,7 +445,7 @@
         NSMutableArray *newControllers = [NSMutableArray arrayWithArray:controllers];
         [newControllers addObject:lastTop];
         [_controller setViewControllers:newControllers animated:NO];
-        [_controller popViewControllerAnimated:shouldAnimate];
+        [_controller popViewControllerAnimated:YES];
       }
     } else if (![_controller.viewControllers containsObject:top]) {
       // new top controller is not on the stack
@@ -454,11 +454,11 @@
       NSMutableArray *newControllers = [NSMutableArray arrayWithArray:controllers];
       [newControllers removeLastObject];
       [_controller setViewControllers:newControllers animated:NO];
-      [_controller pushViewController:top animated:shouldAnimate];
+      [_controller pushViewController:top animated:YES];
     } else {
       // don't really know what this case could be, but may need to handle it
       // somehow
-      [_controller setViewControllers:controllers animated:shouldAnimate];
+      [_controller setViewControllers:controllers animated:NO];
     }
   } else {
     // change wasn't on the top of the stack. We don't need animation.
@@ -489,6 +489,23 @@
   [self setModalViewControllers:modalControllers];
 }
 
+// By default, the header buttons that are not inside the native hit area
+// cannot be clicked, so we check it by ourselves
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
+{
+  if (CGRectContainsPoint(_controller.navigationBar.frame, point)) {
+    // headerConfig should be the first subview of the topmost screen
+    UIView *headerConfig = [[_reactSubviews.lastObject reactSubviews] firstObject];
+    if ([headerConfig isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
+      UIView *headerHitTestResult = [headerConfig hitTest:point withEvent:event];
+      if (headerHitTestResult != nil) {
+        return headerHitTestResult;
+      }
+    }
+  }
+  return [super hitTest:point withEvent:event];
+}
+
 - (void)layoutSubviews
 {
   [super layoutSubviews];
@@ -555,7 +572,8 @@
 {
   RNSScreenView *topScreen = (RNSScreenView *)_controller.viewControllers.lastObject.view;
 
-  if (!topScreen.gestureEnabled || _controller.viewControllers.count < 2) {
+  if (![topScreen isKindOfClass:[RNSScreenView class]] || !topScreen.gestureEnabled ||
+      _controller.viewControllers.count < 2) {
     return NO;
   }
 

package/ios/RNSScreenStackHeaderConfig.m

@@ -118,6 +118,27 @@
   _screenView = nil;
 }
 
+// this method is never invoked by the system since this view
+// is not added to native view hierarchy so we can apply our logic
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
+{
+  for (RNSScreenStackHeaderSubview *subview in _reactSubviews) {
+    if (subview.type == RNSScreenStackHeaderSubviewTypeLeft || subview.type == RNSScreenStackHeaderSubviewTypeRight) {
+      // we wrap the headerLeft/Right component in a UIBarButtonItem
+      // so we need to use the only subview of it to retrieve the correct view
+      UIView *headerComponent = subview.subviews.firstObject;
+      // we convert the point to RNSScreenStackView since it always contains the header inside it
+      CGPoint convertedPoint = [_screenView.reactSuperview convertPoint:point toView:headerComponent];
+
+      UIView *hitTestResult = [headerComponent hitTest:convertedPoint withEvent:event];
+      if (hitTestResult != nil) {
+        return hitTestResult;
+      }
+    }
+  }
+  return nil;
+}
+
 - (void)updateViewControllerIfNeeded
 {
   UIViewController *vc = _screenView.controller;
@@ -138,10 +159,23 @@
   }
 }
 
+- (void)layoutNavigationControllerView
+{
+  UIViewController *vc = _screenView.controller;
+  UINavigationController *navctr = vc.navigationController;
+  [navctr.view setNeedsLayout];
+}
+
 - (void)didSetProps:(NSArray<NSString *> *)changedProps
 {
   [super didSetProps:changedProps];
   [self updateViewControllerIfNeeded];
+  // We need to layout navigation controller view after translucent prop changes, because otherwise
+  // frame of RNSScreen will not be changed and screen content will remain the same size.
+  // For more details look at https://github.com/software-mansion/react-native-screens/issues/1158
+  if ([changedProps containsObject:@"translucent"]) {
+    [self layoutNavigationControllerView];
+  }
 }
 
 - (void)didUpdateReactSubviews
@@ -444,8 +478,10 @@
 
   [navctr setNavigationBarHidden:shouldHide animated:animated];
 
-  if (config.direction == UISemanticContentAttributeForceLeftToRight ||
-      config.direction == UISemanticContentAttributeForceRightToLeft) {
+  if ((config.direction == UISemanticContentAttributeForceLeftToRight ||
+       config.direction == UISemanticContentAttributeForceRightToLeft) &&
+      // iOS 12 cancels swipe gesture when direction is changed. See #1091
+      navctr.view.semanticContentAttribute != config.direction) {
     navctr.view.semanticContentAttribute = config.direction;
     navctr.navigationBar.semanticContentAttribute = config.direction;
   }
@@ -554,6 +590,13 @@
         break;
       }
       case RNSScreenStackHeaderSubviewTypeSearchBar: {
+        if (subview.subviews == nil || [subview.subviews count] == 0) {
+          RCTLogWarn(
+              @"Failed to attach search bar to the header. We recommend using `useLayoutEffect` when managing "
+               "searchBar properties dynamically. \n\nSee: github.com/software-mansion/react-native-screens/issues/1188");
+          break;
+        }
+
         if ([subview.subviews[0] isKindOfClass:[RNSSearchBar class]]) {
 #if !TARGET_OS_TV
           if (@available(iOS 11.0, *)) {

package/ios/RNSScreenWindowTraits.h

@@ -17,4 +17,9 @@
 + (UIInterfaceOrientationMask)maskFromOrientation:(UIInterfaceOrientation)orientation;
 #endif
 
++ (BOOL)shouldAskScreensForTrait:(RNSWindowTrait)trait
+                 includingModals:(BOOL)includingModals
+                inViewController:(UIViewController *)vc;
++ (BOOL)shouldAskScreensForScreenOrientationInViewController:(UIViewController *)vc;
+
 @end

package/ios/RNSScreenWindowTraits.m

@@ -1,5 +1,7 @@
 #import "RNSScreenWindowTraits.h"
 #import "RNSScreen.h"
+#import "RNSScreenContainer.h"
+#import "RNSScreenStack.h"
 
 @implementation RNSScreenWindowTraits
 
@@ -190,4 +192,31 @@
 }
 #endif
 
+// method to be used in Expo for checking if RNScreens have trait set
++ (BOOL)shouldAskScreensForTrait:(RNSWindowTrait)trait
+                 includingModals:(BOOL)includingModals
+                inViewController:(UIViewController *)vc
+{
+  UIViewController *lastViewController = [[vc childViewControllers] lastObject];
+  if ([lastViewController conformsToProtocol:@protocol(RNScreensViewControllerDelegate)]) {
+    UIViewController *vc = nil;
+    if ([lastViewController isKindOfClass:[RNScreensViewController class]]) {
+      vc = [(RNScreensViewController *)lastViewController findActiveChildVC];
+    } else if ([lastViewController isKindOfClass:[RNScreensNavigationController class]]) {
+      vc = [(RNScreensNavigationController *)lastViewController topViewController];
+    }
+    return [vc isKindOfClass:[RNSScreen class]] &&
+        [(RNSScreen *)vc findChildVCForConfigAndTrait:trait includingModals:includingModals] != nil;
+  }
+  return NO;
+}
+
+// same method as above, but directly for orientation
++ (BOOL)shouldAskScreensForScreenOrientationInViewController:(UIViewController *)vc
+{
+  return [RNSScreenWindowTraits shouldAskScreensForTrait:RNSWindowTraitOrientation
+                                         includingModals:YES
+                                        inViewController:vc];
+}
+
 @end

package/lib/commonjs/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   enableScreens: true,
   screensEnabled: true,
+  enableFreeze: true,
   NativeScreen: true,
   Screen: true,
   ScreenContext: true,
@@ -23,16 +24,31 @@ var _exportNames = {
   SearchBar: true,
   ScreenStackHeaderSubview: true,
   shouldUseActivityState: true,
-  useTransitionProgress: true
+  useTransitionProgress: true,
+  isSearchBarAvailableForCurrentPlatform: true,
+  executeNativeBackPress: true
 };
 exports.enableScreens = enableScreens;
 exports.screensEnabled = screensEnabled;
+exports.enableFreeze = enableFreeze;
 Object.defineProperty(exports, "useTransitionProgress", {
   enumerable: true,
   get: function () {
     return _useTransitionProgress.default;
   }
 });
+Object.defineProperty(exports, "isSearchBarAvailableForCurrentPlatform", {
+  enumerable: true,
+  get: function () {
+    return _utils.isSearchBarAvailableForCurrentPlatform;
+  }
+});
+Object.defineProperty(exports, "executeNativeBackPress", {
+  enumerable: true,
+  get: function () {
+    return _utils.executeNativeBackPress;
+  }
+});
 exports.shouldUseActivityState = exports.ScreenStackHeaderSubview = exports.SearchBar = exports.ScreenStackHeaderConfig = exports.ScreenStackHeaderSearchBarView = exports.ScreenStackHeaderCenterView = exports.ScreenStackHeaderLeftView = exports.ScreenStackHeaderRightView = exports.ScreenStackHeaderBackButtonImage = exports.FullWindowOverlay = exports.ScreenStack = exports.NativeScreenNavigationContainer = exports.NativeScreenContainer = exports.ScreenContainer = exports.ScreenContext = exports.Screen = exports.NativeScreen = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -55,6 +71,8 @@ Object.keys(_types).forEach(function (key) {
 
 var _useTransitionProgress = _interopRequireDefault(require("./useTransitionProgress"));
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -67,6 +85,11 @@ function enableScreens(shouldEnableScreens = true) {
 
 function screensEnabled() {
   return ENABLE_SCREENS;
+} // @ts-ignore function stub, freezing logic is located in index.native.tsx
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+function enableFreeze(shouldEnableReactFreeze = true) {// noop
 }
 
 class NativeScreen extends _react.default.Component {

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["ENABLE_SCREENS","enableScreens","shouldEnableScreens","screensEnabled","NativeScreen","React","Component","render","active","activityState","style","enabled","rest","props","undefined","display","Screen","Animated","createAnimatedComponent","ScreenContext","createContext","ScreenContainer","View","NativeScreenContainer","NativeScreenNavigationContainer","ScreenStack","FullWindowOverlay","ScreenStackHeaderBackButtonImage","ScreenStackHeaderRightView","ScreenStackHeaderLeftView","ScreenStackHeaderCenterView","ScreenStackHeaderSearchBarView","ScreenStackHeaderConfig","SearchBar","ScreenStackHeaderSubview","shouldUseActivityState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAUA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;;;AAEA,IAAIA,cAAc,GAAG,IAArB;;AAEO,SAASC,aAAT,CAAuBC,mBAAmB,GAAG,IAA7C,EAAyD;AAC9DF,EAAAA,cAAc,GAAGE,mBAAjB;AACD;;AAEM,SAASC,cAAT,GAAmC;AACxC,SAAOH,cAAP;AACD;;AAEM,MAAMI,YAAN,SAA2BC,eAAMC,SAAjC,CAAwD;AAC7DC,EAAAA,MAAM,GAAgB;AACpB,QAAI;AACFC,MAAAA,MADE;AAEFC,MAAAA,aAFE;AAGFC,MAAAA,KAHE;AAIFC,MAAAA,OAAO,GAAGX,cAJR;AAKF,SAAGY;AALD,QAMA,KAAKC,KANT;;AAQA,QAAIF,OAAJ,EAAa;AACX,UAAIH,MAAM,KAAKM,SAAX,IAAwBL,aAAa,KAAKK,SAA9C,EAAyD;AACvDL,QAAAA,aAAa,GAAGD,MAAM,KAAK,CAAX,GAAe,CAAf,GAAmB,CAAnC,CADuD,CACjB;AACvC;;AACD,0BACE,6BAAC,iBAAD,CACE;AADF;AAEE,QAAA,MAAM,EAAEC,aAAa,KAAK,CAF5B;AAGE,QAAA,KAAK,EAAE,CAACC,KAAD,EAAQ;AAAEK,UAAAA,OAAO,EAAEN,aAAa,KAAK,CAAlB,GAAsB,MAAtB,GAA+B;AAA1C,SAAR;AAHT,SAIMG,IAJN,EADF;AAQD;;AAED,wBAAO,6BAAC,iBAAD,EAAUA,IAAV,CAAP;AACD;;AAzB4D;;;;AA4BxD,MAAMI,MAAM,GAAGC,sBAASC,uBAAT,CAAiCd,YAAjC,CAAf;;;;AAEA,MAAMe,aAAa,gBAAGd,eAAMe,aAAN,CAAoBJ,MAApB,CAAtB;;;AAEA,MAAMK,eAA0D,GAAGC,iBAAnE;;AAEA,MAAMC,qBAAgE,GAAGD,iBAAzE;;AAEA,MAAME,+BAA0E,GAAGF,iBAAnF;;AAEA,MAAMG,WAAkD,GAAGH,iBAA3D;;AAEA,MAAMI,iBAAiB,GAAGJ,iBAA1B;;;AAEA,MAAMK,gCAAgC,GAC3Cd,KAD8C,iBAG9C,6BAAC,iBAAD,qBACE,6BAAC,kBAAD;AAAO,EAAA,UAAU,EAAC,QAAlB;AAA2B,EAAA,YAAY,EAAE;AAAzC,GAAgDA,KAAhD,EADF,CAHK;;;;AAQA,MAAMe,0BAA0B,GACrCf,KADwC,iBAExB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMgB,yBAAyB,GACpChB,KADuC,iBAEvB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMiB,2BAA2B,GACtCjB,KADyC,iBAEzB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMkB,8BAA8B,GACzClB,KAD4C,iBAE5B,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;AAIA,MAAMmB,uBAA0E,GAAGV,iBAAnF,C,CAEP;;;AACO,MAAMW,SAA8C,GAAGX,iBAAvD;;AAEA,MAAMY,wBAEX,GAAGZ,iBAFE;;AAIA,MAAMa,sBAAsB,GAAG,IAA/B","sourcesContent":["import React from 'react';\nimport { Animated, View, ViewProps, ImageProps, Image } from 'react-native';\nimport {\n  ScreenProps,\n  ScreenContainerProps,\n  ScreenStackProps,\n  ScreenStackHeaderConfigProps,\n  HeaderSubviewTypes,\n  SearchBarProps,\n} from './types';\n\nexport * from './types';\nexport { default as useTransitionProgress } from './useTransitionProgress';\n\nlet ENABLE_SCREENS = true;\n\nexport function enableScreens(shouldEnableScreens = true): void {\n  ENABLE_SCREENS = shouldEnableScreens;\n}\n\nexport function screensEnabled(): boolean {\n  return ENABLE_SCREENS;\n}\n\nexport class NativeScreen extends React.Component<ScreenProps> {\n  render(): JSX.Element {\n    let {\n      active,\n      activityState,\n      style,\n      enabled = ENABLE_SCREENS,\n      ...rest\n    } = this.props;\n\n    if (enabled) {\n      if (active !== undefined && activityState === undefined) {\n        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx\n      }\n      return (\n        <View\n          // @ts-expect-error: hidden exists on web, but not in React Native\n          hidden={activityState === 0}\n          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}\n          {...rest}\n        />\n      );\n    }\n\n    return <View {...rest} />;\n  }\n}\n\nexport const Screen = Animated.createAnimatedComponent(NativeScreen);\n\nexport const ScreenContext = React.createContext(Screen);\n\nexport const ScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const ScreenStack: React.ComponentType<ScreenStackProps> = View;\n\nexport const FullWindowOverlay = View;\n\nexport const ScreenStackHeaderBackButtonImage = (\n  props: ImageProps\n): JSX.Element => (\n  <View>\n    <Image resizeMode=\"center\" fadeDuration={0} {...props} />\n  </View>\n);\n\nexport const ScreenStackHeaderRightView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderLeftView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderCenterView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderSearchBarView = (\n  props: React.PropsWithChildren<SearchBarProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> = View;\n\n// @ts-expect-error: search bar props have no common props with View\nexport const SearchBar: React.ComponentType<SearchBarProps> = View;\n\nexport const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<\n  ViewProps & { type?: HeaderSubviewTypes }\n>> = View;\n\nexport const shouldUseActivityState = true;\n"]}
+{"version":3,"sources":["index.tsx"],"names":["ENABLE_SCREENS","enableScreens","shouldEnableScreens","screensEnabled","enableFreeze","shouldEnableReactFreeze","NativeScreen","React","Component","render","active","activityState","style","enabled","rest","props","undefined","display","Screen","Animated","createAnimatedComponent","ScreenContext","createContext","ScreenContainer","View","NativeScreenContainer","NativeScreenNavigationContainer","ScreenStack","FullWindowOverlay","ScreenStackHeaderBackButtonImage","ScreenStackHeaderRightView","ScreenStackHeaderLeftView","ScreenStackHeaderCenterView","ScreenStackHeaderSearchBarView","ScreenStackHeaderConfig","SearchBar","ScreenStackHeaderSubview","shouldUseActivityState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAUA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;;;;;AAKA,IAAIA,cAAc,GAAG,IAArB;;AAEO,SAASC,aAAT,CAAuBC,mBAAmB,GAAG,IAA7C,EAAyD;AAC9DF,EAAAA,cAAc,GAAGE,mBAAjB;AACD;;AAEM,SAASC,cAAT,GAAmC;AACxC,SAAOH,cAAP;AACD,C,CAED;AACA;;;AACO,SAASI,YAAT,CAAsBC,uBAAuB,GAAG,IAAhD,EAA4D,CACjE;AACD;;AAEM,MAAMC,YAAN,SAA2BC,eAAMC,SAAjC,CAAwD;AAC7DC,EAAAA,MAAM,GAAgB;AACpB,QAAI;AACFC,MAAAA,MADE;AAEFC,MAAAA,aAFE;AAGFC,MAAAA,KAHE;AAIFC,MAAAA,OAAO,GAAGb,cAJR;AAKF,SAAGc;AALD,QAMA,KAAKC,KANT;;AAQA,QAAIF,OAAJ,EAAa;AACX,UAAIH,MAAM,KAAKM,SAAX,IAAwBL,aAAa,KAAKK,SAA9C,EAAyD;AACvDL,QAAAA,aAAa,GAAGD,MAAM,KAAK,CAAX,GAAe,CAAf,GAAmB,CAAnC,CADuD,CACjB;AACvC;;AACD,0BACE,6BAAC,iBAAD,CACE;AADF;AAEE,QAAA,MAAM,EAAEC,aAAa,KAAK,CAF5B;AAGE,QAAA,KAAK,EAAE,CAACC,KAAD,EAAQ;AAAEK,UAAAA,OAAO,EAAEN,aAAa,KAAK,CAAlB,GAAsB,MAAtB,GAA+B;AAA1C,SAAR;AAHT,SAIMG,IAJN,EADF;AAQD;;AAED,wBAAO,6BAAC,iBAAD,EAAUA,IAAV,CAAP;AACD;;AAzB4D;;;;AA4BxD,MAAMI,MAAM,GAAGC,sBAASC,uBAAT,CAAiCd,YAAjC,CAAf;;;;AAEA,MAAMe,aAAa,gBAAGd,eAAMe,aAAN,CAAoBJ,MAApB,CAAtB;;;AAEA,MAAMK,eAA0D,GAAGC,iBAAnE;;AAEA,MAAMC,qBAAgE,GAAGD,iBAAzE;;AAEA,MAAME,+BAA0E,GAAGF,iBAAnF;;AAEA,MAAMG,WAAkD,GAAGH,iBAA3D;;AAEA,MAAMI,iBAAiB,GAAGJ,iBAA1B;;;AAEA,MAAMK,gCAAgC,GAC3Cd,KAD8C,iBAG9C,6BAAC,iBAAD,qBACE,6BAAC,kBAAD;AAAO,EAAA,UAAU,EAAC,QAAlB;AAA2B,EAAA,YAAY,EAAE;AAAzC,GAAgDA,KAAhD,EADF,CAHK;;;;AAQA,MAAMe,0BAA0B,GACrCf,KADwC,iBAExB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMgB,yBAAyB,GACpChB,KADuC,iBAEvB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMiB,2BAA2B,GACtCjB,KADyC,iBAEzB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMkB,8BAA8B,GACzClB,KAD4C,iBAE5B,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;AAIA,MAAMmB,uBAA0E,GAAGV,iBAAnF,C,CAEP;;;AACO,MAAMW,SAA8C,GAAGX,iBAAvD;;AAEA,MAAMY,wBAEX,GAAGZ,iBAFE;;AAIA,MAAMa,sBAAsB,GAAG,IAA/B","sourcesContent":["import React from 'react';\nimport { Animated, View, ViewProps, ImageProps, Image } from 'react-native';\nimport {\n  ScreenProps,\n  ScreenContainerProps,\n  ScreenStackProps,\n  ScreenStackHeaderConfigProps,\n  HeaderSubviewTypes,\n  SearchBarProps,\n} from './types';\n\nexport * from './types';\nexport { default as useTransitionProgress } from './useTransitionProgress';\nexport {\n  isSearchBarAvailableForCurrentPlatform,\n  executeNativeBackPress,\n} from './utils';\n\nlet ENABLE_SCREENS = true;\n\nexport function enableScreens(shouldEnableScreens = true): void {\n  ENABLE_SCREENS = shouldEnableScreens;\n}\n\nexport function screensEnabled(): boolean {\n  return ENABLE_SCREENS;\n}\n\n// @ts-ignore function stub, freezing logic is located in index.native.tsx\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function enableFreeze(shouldEnableReactFreeze = true): void {\n  // noop\n}\n\nexport class NativeScreen extends React.Component<ScreenProps> {\n  render(): JSX.Element {\n    let {\n      active,\n      activityState,\n      style,\n      enabled = ENABLE_SCREENS,\n      ...rest\n    } = this.props;\n\n    if (enabled) {\n      if (active !== undefined && activityState === undefined) {\n        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx\n      }\n      return (\n        <View\n          // @ts-expect-error: hidden exists on web, but not in React Native\n          hidden={activityState === 0}\n          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}\n          {...rest}\n        />\n      );\n    }\n\n    return <View {...rest} />;\n  }\n}\n\nexport const Screen = Animated.createAnimatedComponent(NativeScreen);\n\nexport const ScreenContext = React.createContext(Screen);\n\nexport const ScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const ScreenStack: React.ComponentType<ScreenStackProps> = View;\n\nexport const FullWindowOverlay = View;\n\nexport const ScreenStackHeaderBackButtonImage = (\n  props: ImageProps\n): JSX.Element => (\n  <View>\n    <Image resizeMode=\"center\" fadeDuration={0} {...props} />\n  </View>\n);\n\nexport const ScreenStackHeaderRightView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderLeftView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderCenterView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderSearchBarView = (\n  props: React.PropsWithChildren<SearchBarProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> = View;\n\n// @ts-expect-error: search bar props have no common props with View\nexport const SearchBar: React.ComponentType<SearchBarProps> = View;\n\nexport const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<\n  ViewProps & { type?: HeaderSubviewTypes }\n>> = View;\n\nexport const shouldUseActivityState = true;\n"]}

package/lib/commonjs/index.native.js

@@ -4,12 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _reactFreeze = require("react-freeze");
+
 var _processColor = _interopRequireDefault(require("react-native/Libraries/StyleSheet/processColor"));
 
+var _package = require("react-native/package.json");
+
 var _TransitionProgressContext = _interopRequireDefault(require("./TransitionProgressContext"));
 
 var _useTransitionProgress = _interopRequireDefault(require("./useTransitionProgress"));
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -26,6 +32,19 @@ function enableScreens(shouldEnableScreens = true) {
   if (ENABLE_SCREENS && !_reactNative.UIManager.getViewManagerConfig('RNSScreen')) {
     console.error(`Screen native module hasn't been linked. Please check the react-native-screens README for more details`);
   }
+}
+
+let ENABLE_FREEZE = false;
+
+function enableFreeze(shouldEnableReactFreeze = true) {
+  const minor = parseInt(_package.version.split('.')[1]); // eg. takes 66 from '0.66.0'
+  // react-freeze requires react-native >=0.64, react-native from main is 0.0.0
+
+  if (!(minor === 0 || minor >= 64) && shouldEnableReactFreeze) {
+    console.warn('react-freeze library requires at least react-native 0.64. Please upgrade your react-native version in order to use this feature.');
+  }
+
+  ENABLE_FREEZE = shouldEnableReactFreeze;
 } // const that tells if the library should use new implementation, will be undefined for older versions
 
 
@@ -58,7 +77,7 @@ const ScreensNativeModules = {
   },
 
   get NativeScreenNavigationContainer() {
-    NativeScreenNavigationContainerValue = NativeScreenNavigationContainerValue || (0, _reactNative.requireNativeComponent)('RNSScreenNavigationContainer');
+    NativeScreenNavigationContainerValue = NativeScreenNavigationContainerValue || (_reactNative.Platform.OS === 'ios' ? (0, _reactNative.requireNativeComponent)('RNSScreenNavigationContainer') : this.NativeScreenContainer);
     return NativeScreenNavigationContainerValue;
   },
 
@@ -89,6 +108,63 @@ const ScreensNativeModules = {
 
 };
 
+// This component allows one more render before freezing the screen.
+// Allows activityState to reach the native side and useIsFocused to work correctly.
+function DelayedFreeze({
+  freeze,
+  children
+}) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = _react.default.useState(false);
+
+  if (freeze !== freezeState) {
+    // setImmediate is executed at the end of the JS execution block.
+    // Used here for changing the state right after the render.
+    setImmediate(() => {
+      setFreezeState(freeze);
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactFreeze.Freeze, {
+    freeze: freeze ? freezeState : false
+  }, children);
+}
+
+function MaybeFreeze({
+  freeze,
+  children
+}) {
+  if (ENABLE_FREEZE) {
+    return /*#__PURE__*/_react.default.createElement(DelayedFreeze, {
+      freeze: freeze
+    }, children);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+}
+
+function ScreenStack(props) {
+  if (ENABLE_FREEZE) {
+    const {
+      children,
+      ...rest
+    } = props;
+
+    const size = _react.default.Children.count(children); // freezes all screens except the top one
+
+
+    const childrenWithFreeze = _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(DelayedFreeze, {
+      freeze: size - index > 1
+    }, child));
+
+    return /*#__PURE__*/_react.default.createElement(ScreensNativeModules.NativeScreenStack, rest, childrenWithFreeze);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ScreensNativeModules.NativeScreenStack, props);
+} // Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+
+
 class Screen extends _react.default.Component {
   constructor(...args) {
     super(...args);
@@ -141,10 +217,24 @@ class Screen extends _react.default.Component {
       }
 
       const processedColor = (0, _processColor.default)(statusBarColor);
-      return /*#__PURE__*/_react.default.createElement(AnimatedNativeScreen, _extends({}, props, {
+      return /*#__PURE__*/_react.default.createElement(MaybeFreeze, {
+        freeze: activityState === 0
+      }, /*#__PURE__*/_react.default.createElement(AnimatedNativeScreen, _extends({}, props, {
         statusBarColor: processedColor,
-        activityState: activityState,
-        ref: this.setRef,
+        activityState: activityState // This prevents showing blank screen when navigating between multiple screens with freezing
+        // https://github.com/software-mansion/react-native-screens/pull/1208
+        ,
+        ref: ref => {
+          var _ref$viewConfig, _ref$viewConfig$valid;
+
+          if (ref !== null && ref !== void 0 && (_ref$viewConfig = ref.viewConfig) !== null && _ref$viewConfig !== void 0 && (_ref$viewConfig$valid = _ref$viewConfig.validAttributes) !== null && _ref$viewConfig$valid !== void 0 && _ref$viewConfig$valid.style) {
+            ref.viewConfig.validAttributes.style = { ...ref.viewConfig.validAttributes.style,
+              display: false
+            };
+          }
+
+          this.setRef(ref);
+        },
         onTransitionProgress: !isNativeStack ? undefined : _reactNative.Animated.event([{
           nativeEvent: {
             progress: this.progress,
@@ -161,7 +251,7 @@ class Screen extends _react.default.Component {
           closing: this.closing,
           goingForward: this.goingForward
         }
-      }, children));
+      }, children)));
     } else {
       // same reason as above
       let {
@@ -255,6 +345,7 @@ module.exports = {
   Screen,
   ScreenContainer,
   ScreenContext,
+  ScreenStack,
 
   get NativeScreen() {
     return ScreensNativeModules.NativeScreen;
@@ -265,15 +356,7 @@ module.exports = {
   },
 
   get NativeScreenNavigationContainer() {
-    if (_reactNative.Platform.OS === 'ios') {
-      return ScreensNativeModules.NativeScreenNavigationContainer;
-    }
-
-    return ScreensNativeModules.NativeScreenContainer;
-  },
-
-  get ScreenStack() {
-    return ScreensNativeModules.NativeScreenStack;
+    return ScreensNativeModules.NativeScreenNavigationContainer;
   },
 
   get ScreenStackHeaderConfig() {
@@ -285,8 +368,8 @@ module.exports = {
   },
 
   get SearchBar() {
-    if (_reactNative.Platform.OS !== 'ios') {
-      console.warn('Importing SearchBar is only valid on iOS devices.');
+    if (!_utils.isSearchBarAvailableForCurrentPlatform) {
+      console.warn('Importing SearchBar is only valid on iOS and Android devices.');
       return _reactNative.View;
     }
 
@@ -310,8 +393,11 @@ module.exports = {
   ScreenStackHeaderCenterView,
   ScreenStackHeaderSearchBarView,
   enableScreens,
+  enableFreeze,
   screensEnabled,
   shouldUseActivityState,
-  useTransitionProgress: _useTransitionProgress.default
+  useTransitionProgress: _useTransitionProgress.default,
+  isSearchBarAvailableForCurrentPlatform: _utils.isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress: _utils.executeNativeBackPress
 };
 //# sourceMappingURL=index.native.js.map