react-native-screens 4.7.0-beta.1 → 4.7.0-beta.3

package/android/build.gradle

@@ -95,6 +95,14 @@ def safeAppExtGet(prop, fallback) {
     appProject?.ext?.has(prop) ? appProject.ext.get(prop) : fallback
 }
 
+def reactNativeRootDir = resolveReactNativeDirectory()
+
+def reactProperties = new Properties()
+file("$reactNativeRootDir/ReactAndroid/gradle.properties").withInputStream { reactProperties.load(it) }
+
+def REACT_NATIVE_VERSION = reactProperties.getProperty("VERSION_NAME")
+def REACT_NATIVE_MINOR_VERSION = REACT_NATIVE_VERSION.startsWith("0.0.0-") ? 1000 : REACT_NATIVE_VERSION.split("\\.")[1].toInteger()
+
 def IS_NEW_ARCHITECTURE_ENABLED = isNewArchitectureEnabled()
 
 android {
@@ -166,6 +174,7 @@ android {
     sourceSets.main {
         ext.androidResDir = "src/main/res"
         java {
+            // Architecture specific
             if (IS_NEW_ARCHITECTURE_ENABLED) {
                 srcDirs += [
                     "src/fabric/java",
@@ -175,6 +184,15 @@ android {
                     "src/paper/java",
                 ]
             }
+
+            // Background color resolving
+            if (REACT_NATIVE_MINOR_VERSION <= 74) {
+                srcDirs += "src/versioned/backgroundcolor/74"
+            } else if (REACT_NATIVE_MINOR_VERSION <= 76) {
+                srcDirs += "src/versioned/backgroundcolor/76"
+            } else {
+                srcDirs += "src/versioned/backgroundcolor/latest"
+            }
         }
         res {
             if (safeExtGet(['compileSdkVersion', 'compileSdk'], rnsDefaultCompileSdkVersion) >= 33) {
@@ -188,7 +206,7 @@ android {
 
 repositories {
     maven {
-        url "${resolveReactNativeDirectory()}/android"
+        url "${reactNativeRootDir}/android"
     }
 
     mavenCentral()

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

@@ -25,7 +25,6 @@ import android.widget.LinearLayout
 import androidx.annotation.RequiresApi
 import androidx.appcompat.widget.Toolbar
 import androidx.coordinatorlayout.widget.CoordinatorLayout
-import androidx.core.animation.addListener
 import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.PointerEvents
@@ -51,6 +50,7 @@ import com.swmansion.rnscreens.events.ScreenEventDelegate
 import com.swmansion.rnscreens.ext.recycle
 import com.swmansion.rnscreens.transition.ExternalBoundaryValuesEvaluator
 import com.swmansion.rnscreens.utils.DeviceUtils
+import com.swmansion.rnscreens.utils.resolveBackgroundColor
 
 sealed class KeyboardState
 
@@ -574,6 +574,24 @@ class ScreenStackFragment :
     private fun createAndConfigureBottomSheetBehaviour(): BottomSheetBehavior<Screen> =
         configureBottomSheetBehaviour(createBottomSheetBehaviour())
 
+    private fun resolveBackgroundColor(screen: Screen): Int? {
+        val screenColor =
+            (screen.background as? ColorDrawable?)?.color
+                ?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
+
+        if (screenColor != null) {
+            return screenColor
+        }
+
+        val contentWrapper = screen.contentWrapper.get()
+        if (contentWrapper == null) {
+            return null
+        }
+
+        val contentWrapperColor = contentWrapper.resolveBackgroundColor()
+        return contentWrapperColor
+    }
+
     private fun attachShapeToScreen(screen: Screen) {
         val cornerSize = PixelUtil.toPixelFromDIP(screen.sheetCornerRadius)
         val shapeAppearanceModel =
@@ -584,10 +602,8 @@ class ScreenStackFragment :
                     setTopRightCorner(CornerFamily.ROUNDED, cornerSize)
                 }.build()
         val shape = MaterialShapeDrawable(shapeAppearanceModel)
-        val currentColor =
-            (screen.background as? ColorDrawable?)?.color
-                ?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
-        shape.setTint(currentColor ?: Color.TRANSPARENT)
+        val backgroundColor = resolveBackgroundColor(screen)
+        shape.setTint(backgroundColor ?: Color.TRANSPARENT)
         screen.background = shape
     }
 

package/android/src/versioned/backgroundcolor/74/ViewBackgroundUtils.kt

@@ -0,0 +1,6 @@
+package com.swmansion.rnscreens.utils
+
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+internal fun ReactViewGroup.resolveBackgroundColor(): Int? = (this.background as? ReactViewBackgroundDrawable)?.color

package/android/src/versioned/backgroundcolor/76/ViewBackgroundUtils.kt

@@ -0,0 +1,9 @@
+package com.swmansion.rnscreens.utils
+
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+@OptIn(UnstableReactNativeAPI::class)
+internal fun ReactViewGroup.resolveBackgroundColor(): Int? = (this.background as? CSSBackgroundDrawable)?.color
+

package/android/src/versioned/backgroundcolor/latest/ViewBackgroundUtils.kt

@@ -0,0 +1,9 @@
+package com.swmansion.rnscreens.utils
+
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.BackgroundStyleApplicator
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+internal fun ReactViewGroup.resolveBackgroundColor(): Int? = BackgroundStyleApplicator.getBackgroundColor(this)
+

package/ios/RNSScreen.h

@@ -3,6 +3,7 @@
 
 #import "RNSEnums.h"
 #import "RNSScreenContainer.h"
+#import "RNSScreenContentWrapper.h"
 
 #if RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
@@ -54,6 +55,7 @@ namespace react = facebook::react;
 #else
     RCTView
 #endif
+    <RNSScreenContentWrapperDelegate>
 
 @property (nonatomic) BOOL fullScreenSwipeEnabled;
 @property (nonatomic) BOOL fullScreenSwipeShadowEnabled;
@@ -126,9 +128,12 @@ namespace react = facebook::react;
 - (void)updateBounds;
 - (void)notifyDismissedWithCount:(int)dismissCount;
 - (instancetype)initWithFrame:(CGRect)frame;
-/// Tell `Screen` that it will be unmounted in next transaction.
-/// The component needs this so that we can later decide whether to
-/// replace it with snapshot or not.
+
+/**
+ * Tell `Screen` that it will be unmounted in next transaction.
+ * The component needs this so that we can later decide whether to
+ * replace it with snapshot or not.
+ */
 - (void)willBeUnmountedInUpcomingTransaction;
 #else
 - (instancetype)initWithBridge:(RCTBridge *)bridge;
@@ -147,9 +152,17 @@ namespace react = facebook::react;
  */
 - (void)invalidate;
 
-/// Looks for header configuration in instance's `reactSubviews` and returns it. If not present returns `nil`.
+/**
+ * Looks for header configuration in instance's `reactSubviews` and returns it. If not present returns `nil`.
+ */
 - (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig;
 
+/**
+ * Returns `YES` if the wrapper has been registered and it should not attempt to register on screen views higher in the
+ * tree.
+ */
+- (BOOL)registerContentWrapper:(nonnull RNSScreenContentWrapper *)contentWrapper contentHeightErrata:(float)errata;
+
 @end
 
 @interface UIView (RNSScreen)

package/ios/RNSScreen.mm

@@ -44,9 +44,13 @@ namespace react = facebook::react;
 constexpr NSInteger SHEET_FIT_TO_CONTENTS = -1;
 constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
 
+struct ContentWrapperBox {
+  __weak RNSScreenContentWrapper *contentWrapper{nil};
+  float contentHeightErrata{0.f};
+};
+
 @interface RNSScreenView () <
     UIAdaptivePresentationControllerDelegate,
-    RNSScreenContentWrapperDelegate,
 #if !TARGET_OS_TV
     UISheetPresentationControllerDelegate,
 #endif
@@ -62,12 +66,12 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
 @implementation RNSScreenView {
   __weak ReactScrollViewBase *_sheetsScrollView;
   BOOL _didSetSheetAllowedDetentsOnController;
+  ContentWrapperBox _contentWrapperBox;
 #ifdef RCT_NEW_ARCH_ENABLED
   RCTSurfaceTouchHandler *_touchHandler;
   react::RNSScreenShadowNode::ConcreteState::Shared _state;
   // on fabric, they are not available by default so we need them exposed here too
   NSMutableArray<UIView *> *_reactSubviews;
-  __weak RNSScreenContentWrapper *_contentWrapper;
 #else
   __weak RCTBridge *_bridge;
   RCTTouchHandler *_touchHandler;
@@ -89,7 +93,7 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
     static const auto defaultProps = std::make_shared<const react::RNSScreenProps>();
     _props = defaultProps;
     _reactSubviews = [NSMutableArray new];
-    _contentWrapper = nil;
+    _contentWrapperBox = {};
     [self initCommonProps];
   }
   return self;
@@ -384,8 +388,19 @@ RNS_IGNORE_SUPER_CALL_BEGIN
 }
 RNS_IGNORE_SUPER_CALL_END
 
+- (BOOL)registerContentWrapper:(RNSScreenContentWrapper *)contentWrapper contentHeightErrata:(float)errata;
+{
+  if (self.stackPresentation != RNSScreenStackPresentationFormSheet) {
+    return NO;
+  }
+  _contentWrapperBox = {.contentWrapper = contentWrapper, .contentHeightErrata = errata};
+  contentWrapper.delegate = self;
+  [contentWrapper triggerDelegateUpdate];
+  return YES;
+}
+
 /// This is RNSScreenContentWrapperDelegate method, where we do get notified when React did update frame of our child.
-- (void)reactDidSetFrame:(CGRect)reactFrame forContentWrapper:(RNSScreenContentWrapper *)contentWrapepr
+- (void)contentWrapper:(RNSScreenContentWrapper *)contentWrapper receivedReactFrame:(CGRect)reactFrame
 {
   if (self.stackPresentation != RNSScreenStackPresentationFormSheet || _didSetSheetAllowedDetentsOnController == YES) {
     return;
@@ -403,7 +418,8 @@ RNS_IGNORE_SUPER_CALL_END
     }
 
     if (_sheetAllowedDetents.count > 0 && _sheetAllowedDetents[0].intValue == SHEET_FIT_TO_CONTENTS) {
-      auto detents = [self detentsFromMaxHeights:@[ [NSNumber numberWithFloat:reactFrame.size.height] ]];
+      auto detents = [self detentsFromMaxHeights:@[ [NSNumber numberWithFloat:reactFrame.size.height +
+                                                              _contentWrapperBox.contentHeightErrata] ]];
       [self setAllowedDetentsForSheet:sheetController to:detents animate:YES];
     }
   }
@@ -416,6 +432,7 @@ RNS_IGNORE_SUPER_CALL_END
   if ([view isKindOfClass:RNSScreenContentWrapper.class] &&
       self.stackPresentation == RNSScreenStackPresentationFormSheet) {
     auto contentWrapper = (RNSScreenContentWrapper *)view;
+    _contentWrapperBox.contentWrapper = contentWrapper;
     contentWrapper.delegate = self;
   }
 
@@ -902,6 +919,7 @@ RNS_IGNORE_SUPER_CALL_END
   if (_stackPresentation != RNSScreenStackPresentationFormSheet) {
     return;
   }
+
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_15_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_15_0
   int firstDimmedDetentIndex = _sheetAllowedDetents.count;
@@ -926,8 +944,10 @@ RNS_IGNORE_SUPER_CALL_END
           // Paper: we do not set anything here, we will set once React computed layout of our React's children, namely
           // RNSScreenContentWrapper, which in case of formSheet presentation style does have exactly the same frame as
           // actual content. The update will be triggered once our child is mounted and laid out by React.
-          // Fabric: in this very moment our children are already mounted & laid out. In the very end of this method,
-          // after all other configuration is applied we trigger content wrapper to send us update on its frame.
+          // Fabric: no nested stack: in this very moment our children are already mounted & laid out. In the very end
+          // of this method, after all other configuration is applied we trigger content wrapper to send us update on
+          // its frame. Fabric: nested stack: we wait until nested content wrapper registers itself with this view and
+          // then update the dimensions.
         } else {
           [self setAllowedDetentsForSheet:sheet
                                        to:[self detentsFromMaxHeightFractions:_sheetAllowedDetents]
@@ -1030,7 +1050,7 @@ RNS_IGNORE_SUPER_CALL_END
 #ifdef RCT_NEW_ARCH_ENABLED
   // We trigger update from content wrapper, because on Fabric we update props after the children are mounted & laid
   // out.
-  [self->_contentWrapper triggerDelegateUpdate];
+  [self->_contentWrapperBox.contentWrapper triggerDelegateUpdate];
 #endif // RCT_NEW_ARCH_ENABLED
 #endif // Check for iOS >= 15
 }
@@ -1122,9 +1142,8 @@ RNS_IGNORE_SUPER_CALL_END
   if ([childComponentView isKindOfClass:RNSScreenContentWrapper.class]) {
     auto contentWrapper = (RNSScreenContentWrapper *)childComponentView;
     contentWrapper.delegate = self;
-    _contentWrapper = contentWrapper;
-  }
-  if ([childComponentView isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
+    _contentWrapperBox.contentWrapper = contentWrapper;
+  } else if ([childComponentView isKindOfClass:RNSScreenStackHeaderConfig.class]) {
     _config = (RNSScreenStackHeaderConfig *)childComponentView;
     _config.screenView = self;
   }
@@ -1138,8 +1157,8 @@ RNS_IGNORE_SUPER_CALL_END
     _config = nil;
   }
   if ([childComponentView isKindOfClass:[RNSScreenContentWrapper class]]) {
-    _contentWrapper.delegate = nil;
-    _contentWrapper = nil;
+    _contentWrapperBox.contentWrapper.delegate = nil;
+    _contentWrapperBox.contentWrapper = nil;
   }
   [_reactSubviews removeObject:childComponentView];
   [super unmountChildComponentView:childComponentView index:index];

package/ios/RNSScreenContentWrapper.h

@@ -15,9 +15,9 @@ NS_ASSUME_NONNULL_BEGIN
 @protocol RNSScreenContentWrapperDelegate <NSObject>
 
 /**
- * This method is called by the content wrapper on a delegate when React Native updates the layout.
+ * Called by the content wrapper on a delegate when React Native updates the layout.
  */
-- (void)reactDidSetFrame:(CGRect)reactFrame forContentWrapper:(RNSScreenContentWrapper *)contentWrapepr;
+- (void)contentWrapper:(RNSScreenContentWrapper *)contentWrapper receivedReactFrame:(CGRect)reactFrame;
 
 @end
 

package/ios/RNSScreenContentWrapper.mm

@@ -1,7 +1,10 @@
 #import "RNSScreenContentWrapper.h"
+#import "RNSScreen.h"
+#import "RNSScreenStack.h"
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
+#import <React/RCTLog.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/Props.h>
@@ -12,34 +15,82 @@ namespace react = facebook::react;
 
 @implementation RNSScreenContentWrapper
 
+#ifndef RCT_NEW_ARCH_ENABLED
+
 - (void)reactSetFrame:(CGRect)frame
 {
   [super reactSetFrame:frame];
   if (self.delegate != nil) {
-    [self.delegate reactDidSetFrame:frame forContentWrapper:self];
+    [self.delegate contentWrapper:self receivedReactFrame:frame];
   }
 }
 
+#endif // !RCT_NEW_ARCH_ENABLED
+
+- (void)notifyDelegateWithFrame:(CGRect)frame
+{
+  [self.delegate contentWrapper:self receivedReactFrame:frame];
+}
+
 - (void)triggerDelegateUpdate
 {
-  [self.delegate reactDidSetFrame:self.frame forContentWrapper:self];
+  [self notifyDelegateWithFrame:self.frame];
 }
 
-#ifdef RCT_NEW_ARCH_ENABLED
+- (void)willMoveToWindow:(UIWindow *)newWindow
+{
+  if (newWindow == nil) {
+    return;
+  }
+  [self attachToAncestorScreenView];
+}
 
-- (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics
-           oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics
+/**
+ * Searches for first `RNSScreen` instance that uses `formSheet` presentation and returns it together with accumulated
+ * heights of navigation bars discovered along tree path up.
+ *
+ * TODO: Such travelsal method could be defined as its own algorithm in separate helper methods set.
+ */
+- (void)attachToAncestorScreenViewStartingFrom:(nonnull RNSScreen *)screenCtrl
 {
-  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
-  if (self.delegate != nil) {
-    [self.delegate reactDidSetFrame:RCTCGRectFromRect(layoutMetrics.frame) forContentWrapper:self];
+  UIViewController *controller = screenCtrl;
+  float headerHeightErrata = 0.f;
+
+  do {
+    if ([controller isKindOfClass:RNSScreen.class]) {
+      RNSScreen *currentScreen = static_cast<RNSScreen *>(controller);
+      if ([currentScreen.screenView registerContentWrapper:self contentHeightErrata:headerHeightErrata]) {
+        break;
+      }
+    } else if ([controller isKindOfClass:RNSNavigationController.class]) {
+      UINavigationBar *navigationBar = static_cast<RNSNavigationController *>(controller).navigationBar;
+      headerHeightErrata += navigationBar.frame.size.height * !navigationBar.isHidden;
+    }
+
+    controller = controller.parentViewController;
+  } while (controller != nil);
+}
+
+- (void)attachToAncestorScreenView
+{
+  if (![self.reactSuperview isKindOfClass:RNSScreenView.class]) {
+    RCTLogError(@"Expected reactSuperview to be a RNSScreenView. Found %@", self.reactSuperview);
+    return;
   }
+
+  RNSScreen *screen = (RNSScreen *)[self.reactSuperview reactViewController];
+  [self attachToAncestorScreenViewStartingFrom:screen];
 }
 
-// Needed because of this: https://github.com/facebook/react-native/pull/37274
-+ (void)load
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#pragma mark - RCTComponentViewProtocol
+
+- (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics
 {
-  [super load];
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+  [self notifyDelegateWithFrame:RCTCGRectFromRect(layoutMetrics.frame)];
 }
 
 + (react::ComponentDescriptorProvider)componentDescriptorProvider
@@ -51,6 +102,12 @@ Class<RCTComponentViewProtocol> RNSScreenContentWrapperCls(void)
 {
   return RNSScreenContentWrapper.class;
 }
+
+// Needed because of this: https://github.com/facebook/react-native/pull/37274
++ (void)load
+{
+  [super load];
+}
 #endif // RCT_NEW_ARCH_ENABLED
 
 @end

package/ios/RNSScreenStack.mm

@@ -552,7 +552,18 @@ RNS_IGNORE_SUPER_CALL_END
       // See: https://github.com/software-mansion/react-native-screens/issues/2048
       // For now, to mitigate the issue, we also decide to trigger its dismissal before
       // starting the presentation chain down below in finish() callback.
-      [changeRootController dismissViewControllerAnimated:shouldAnimate completion:finish];
+      if (!firstModalToBeDismissed.isBeingDismissed) {
+        [changeRootController dismissViewControllerAnimated:shouldAnimate completion:finish];
+      } else {
+        // We need to wait for its dismissal and then run our presentation code.
+        // This happens, e.g. when we have foreign modal presented on top of owned one & we dismiss foreign one and
+        // immediately present another owned one. Dismissal of the foreign one will be triggered by foreign controller.
+        [[firstModalToBeDismissed transitionCoordinator]
+            animateAlongsideTransition:nil
+                            completion:^(id<UIViewControllerTransitionCoordinatorContext> _) {
+                              finish();
+                            }];
+      }
       return;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "4.7.0-beta.1",
+  "version": "4.7.0-beta.3",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn && yarn build && cd ../)",
@@ -41,6 +41,7 @@
     "android/src/main/res",
     "android/src/fabric/",
     "android/src/paper/",
+    "android/src/versioned/",
     "android/build.gradle",
     "android/CMakeLists.txt",
     "ios/",