feat(iOS, Tabs): revert contentInsetAdjustmentBehavior to automatic for ScrollViews (#173)

kligarski · kkafar · commit 1b6e5c2dd955 · 2025-07-16T15:40:47.000+02:00
## Description By default, `react-native` sets `contentInsetAdjustmentBehavior` for ScrollView to `'never'` ([docs](https://reactnative.dev/docs/scrollview#contentinsetadjustmentbehavior-ios), [code](https://github.com/facebook/react-native/blob/ce306aca34636b3928837d427d386083050729fb/packages/react-native/React/Views/ScrollView/RCTScrollView.m#L377)). In order to make many of navigation controllers work properly (including tab bar controller), you need to change it back to `'automatic'` (which is [UIKit default](https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior-swift.property?language=objc)). In this PR, we add logic to automatically revert `contentInsetAdjustmentBehavior` back to `'automatic'`. Closes software-mansion/react-native-screens-labs#166. ## Changes - add `RNSScrollViewHelper` with `overrideScrollViewBehaviorInFirstDescendantChainFrom:(UIView *)view` - use it in `RNSTabsScreenViewController` and `RNSScreen` - add prop to JS ## Test code and steps to reproduce Open Tab3. You can also manually disable the behavior via prop. ## Checklist - [x] Included code example that can be used to test this change - [ ] Ensured that CI passes
diff --git a/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt
@@ -146,6 +146,11 @@ class TabScreenViewManager :
         value: ReadableMap?,
     ) = Unit
 
+    override fun setOverrideScrollViewContentInsetAdjustmentBehavior(
+        view: TabScreen,
+        value: Boolean
+    ) = Unit
+
     companion object {
         const val REACT_CLASS = "RNSBottomTabsScreen"
     }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsManagerDelegate.java
@@ -63,6 +63,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "tabBarItemIconColorActive":
         mViewManager.setTabBarItemIconColorActive(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
+      case "tabBarItemTitleFontSizeActive":
+        mViewManager.setTabBarItemTitleFontSizeActive(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
       case "controlNavigationStateInJS":
         mViewManager.setControlNavigationStateInJS(view, value == null ? false : (boolean) value);
         break;
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsManagerInterface.java
@@ -28,5 +28,6 @@ public interface RNSBottomTabsManagerInterface<T extends View>  {
   void setTabBarItemBadgeBackgroundColor(T view, @Nullable Integer value);
   void setTabBarItemTitleFontColorActive(T view, @Nullable Integer value);
   void setTabBarItemIconColorActive(T view, @Nullable Integer value);
+  void setTabBarItemTitleFontSizeActive(T view, float value);
   void setControlNavigationStateInJS(T view, boolean value);
 }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerDelegate.java
@@ -69,12 +69,18 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "selectedIconSFSymbolName":
         mViewManager.setSelectedIconSFSymbolName(view, value == null ? null : (String) value);
         break;
+      case "iconResourceName":
+        mViewManager.setIconResourceName(view, value == null ? null : (String) value);
+        break;
       case "badgeValue":
         mViewManager.setBadgeValue(view, value == null ? null : (String) value);
         break;
       case "specialEffects":
         mViewManager.setSpecialEffects(view, (ReadableMap) value);
         break;
+      case "overrideScrollViewContentInsetAdjustmentBehavior":
+        mViewManager.setOverrideScrollViewContentInsetAdjustmentBehavior(view, value == null ? true : (boolean) value);
+        break;
       default:
         super.setProperty(view, propName, value);
     }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerInterface.java
@@ -30,6 +30,8 @@ public interface RNSBottomTabsScreenManagerInterface<T extends View>  {
   void setTitle(T view, @Nullable String value);
   void setIconSFSymbolName(T view, @Nullable String value);
   void setSelectedIconSFSymbolName(T view, @Nullable String value);
+  void setIconResourceName(T view, @Nullable String value);
   void setBadgeValue(T view, @Nullable String value);
   void setSpecialEffects(T view, @Nullable ReadableMap value);
+  void setOverrideScrollViewContentInsetAdjustmentBehavior(T view, boolean value);
 }
diff --git a/apps/src/tests/TestBottomTabs/tabs/Tab3.tsx b/apps/src/tests/TestBottomTabs/tabs/Tab3.tsx
@@ -5,7 +5,6 @@ import { ScrollView, Text } from 'react-native';
 export function Tab3() {
   return (
     <ScrollView
-      contentInsetAdjustmentBehavior="automatic"
       contentContainerStyle={{
         width: '100%',
         height: 'auto',
diff --git a/apps/src/tests/TestBottomTabs/tabs/Tab4.tsx b/apps/src/tests/TestBottomTabs/tabs/Tab4.tsx
@@ -72,7 +72,7 @@ export function LongText() {
 
 function Screen1({ navigation }: StackNavigationProp) {
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic">
+    <ScrollView>
       <Button
         title="Go to screen 2"
         onPress={() => navigation.push('Screen2')}
@@ -84,7 +84,7 @@ function Screen1({ navigation }: StackNavigationProp) {
 
 function Screen2({ navigation }: StackNavigationProp) {
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic">
+    <ScrollView>
       <Button
         title="Go to screen 3"
         onPress={() => navigation.push('Screen3')}
@@ -94,9 +94,13 @@ function Screen2({ navigation }: StackNavigationProp) {
   );
 }
 
-function Screen3() {
+function Screen3({ navigation }: StackNavigationProp) {
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic">
+    <ScrollView>
+      <Button
+        title="Go to screen 3"
+        onPress={() => navigation.push('Screen3')}
+      />
       <LongText />
     </ScrollView>
   );
@@ -106,9 +110,23 @@ export function Tab4() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen name="Screen1" component={Screen1} />
-        <Stack.Screen name="Screen2" component={Screen2} />
-        <Stack.Screen name="Screen3" component={Screen3} />
+        <Stack.Screen
+          name="Screen1"
+          component={Screen1}
+          options={{ headerTransparent: true }}
+        />
+        <Stack.Screen
+          name="Screen2"
+          component={Screen2}
+          options={{
+            headerLargeTitle: true,
+          }}
+        />
+        <Stack.Screen
+          name="Screen3"
+          component={Screen3}
+          options={{ headerTransparent: true }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
@@ -4,6 +4,7 @@
 #import "RNSEnums.h"
 #import "RNSScreenContainer.h"
 #import "RNSScreenContentWrapper.h"
+#import "RNSScrollViewBehaviorOverriding.h"
 
 #if RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
@@ -55,7 +56,7 @@ namespace react = facebook::react;
 #else
     RCTView
 #endif
-    <RNSScreenContentWrapperDelegate>
+    <RNSScreenContentWrapperDelegate, RNSScrollViewBehaviorOverriding>
 
 @property (nonatomic) BOOL fullScreenSwipeEnabled;
 @property (nonatomic) BOOL fullScreenSwipeShadowEnabled;
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
@@ -32,6 +32,7 @@
 #import "RNSScreenStack.h"
 #import "RNSScreenStackHeaderConfig.h"
 #import "RNSTabBarController.h"
+#import "RNSScrollViewHelper.h"
 
 #import "RNSDefines.h"
 #import "UIView+RNSUtility.h"
@@ -1177,6 +1178,36 @@ - (void)setBounds:(CGRect)bounds
   [super setBounds:bounds];
 }
 
+#pragma mark - RNSScrollViewBehaviorOverriding
+
+- (BOOL)shouldOverrideScrollViewContentInsetAdjustmentBehavior
+{
+  // RNSScreenView does not have a property to control this behavior.
+  // It looks for parent that conforms to RNSScrollViewBehaviorOverriding to determine
+  // if it should override ScrollView's behavior.
+  
+  // As this method is called when RNSScreen willMoveToParentViewController
+  // and view does not have superView yet, we need to use reactSuperViews.
+  UIView *parent = [self reactSuperview];
+  
+  while (parent != nil) {
+    if ([parent respondsToSelector:@selector(shouldOverrideScrollViewContentInsetAdjustmentBehavior)]) {
+      id<RNSScrollViewBehaviorOverriding> overrideProvider = static_cast<id<RNSScrollViewBehaviorOverriding>>(parent);
+      return [overrideProvider shouldOverrideScrollViewContentInsetAdjustmentBehavior];
+    }
+    parent = [parent reactSuperview];
+  }
+  
+  return NO;
+}
+
+- (void)overrideScrollViewBehaviorInFirstDescendantChainIfNeeded
+{
+  if ([self shouldOverrideScrollViewContentInsetAdjustmentBehavior]) {
+    [RNSScrollViewHelper overrideScrollViewBehaviorInFirstDescendantChainFrom:self];
+  }
+}
+
 #pragma mark - Fabric specific
 #ifdef RCT_NEW_ARCH_ENABLED
 
@@ -1684,6 +1715,8 @@ - (void)willMoveToParentViewController:(UIViewController *)parent
     if (responder != nil) {
       _previousFirstResponder = responder;
     }
+  } else {
+    [self.screenView overrideScrollViewBehaviorInFirstDescendantChainIfNeeded];
   }
 }
 
diff --git a/ios/RNSScrollViewBehaviorOverriding.h b/ios/RNSScrollViewBehaviorOverriding.h
@@ -0,0 +1,24 @@
+#include <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Views that require ScrollView contentInsetAdjustmentBehavior overriding should conform to this protocol.
+ */
+@protocol RNSScrollViewBehaviorOverriding
+
+/**
+ * Returns whether view should override contentInsetAdjustmentBehavior for first ScrollView in first descendant chain.
+ * It can be a property or method involving some logic to determine if ScrollView's behavior should be overriden.
+ */
+- (BOOL)shouldOverrideScrollViewContentInsetAdjustmentBehavior;
+
+/**
+ * Overrides contentInsetAdjustmentBehavior for first ScrollView in first descendant chain
+ * if overrideScrollViewContentInsetAdjustmentBehavior returns true.
+ */
+- (void)overrideScrollViewBehaviorInFirstDescendantChainIfNeeded;
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/ios/RNSScrollViewHelper.h b/ios/RNSScrollViewHelper.h
@@ -0,0 +1,10 @@
+#import <UIKit/UIKit.h>
+
+@interface RNSScrollViewHelper : NSObject
+
+/**
+ * Finds and overrides contentInsetAdjustmentBehavior for first ScrollView in first descendant chain from view.
+ */
++ (void)overrideScrollViewBehaviorInFirstDescendantChainFrom:(nullable UIView *)view;
+
+@end
diff --git a/ios/RNSScrollViewHelper.mm b/ios/RNSScrollViewHelper.mm
@@ -0,0 +1,15 @@
+#import "RNSScrollViewHelper.h"
+#import "RNSScrollViewFinder.h"
+
+@implementation RNSScrollViewHelper
+
++ (void)overrideScrollViewBehaviorInFirstDescendantChainFrom:(nullable UIView *)view
+{
+  UIScrollView *scrollView = [RNSScrollViewFinder findScrollViewInFirstDescendantChainFrom:view];
+
+  if ([scrollView contentInsetAdjustmentBehavior] == UIScrollViewContentInsetAdjustmentNever) {
+    [scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentAutomatic];
+  }
+}
+
+@end
diff --git a/ios/bottom-tabs/RNSBottomTabsScreenComponentView.h b/ios/bottom-tabs/RNSBottomTabsScreenComponentView.h
@@ -2,6 +2,7 @@
 #import "RNSEnums.h"
 #import "RNSReactBaseView.h"
 #import "RNSTabBarAppearanceProvider.h"
+#import "RNSScrollViewBehaviorOverriding.h"
 
 NS_ASSUME_NONNULL_BEGIN
 
@@ -31,7 +32,7 @@ NS_ASSUME_NONNULL_BEGIN
 /**
  * Properties set on component in JavaScript.
  */
-@interface RNSBottomTabsScreenComponentView () <RNSTabBarAppearanceProvider>
+@interface RNSBottomTabsScreenComponentView () <RNSTabBarAppearanceProvider, RNSScrollViewBehaviorOverriding>
 
 @property (nonatomic, readonly) BOOL isSelectedScreen;
 @property (nonatomic, readonly, nullable) NSString *tabKey;
@@ -59,6 +60,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, readonly) BOOL shouldUseRepeatedTabSelectionPopToRootSpecialEffect;
 @property (nonatomic, readonly) BOOL shouldUseRepeatedTabSelectionScrollToTopSpecialEffect;
 
+@property (nonatomic, readonly) BOOL overrideScrollViewContentInsetAdjustmentBehavior;
+
 @end
 
 #pragma mark - Events
diff --git a/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm b/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
@@ -2,6 +2,7 @@
 #import "RNSConversions.h"
 #import "RNSDefines.h"
 #import "RNSTabBarController.h"
+#import "RNSScrollViewHelper.h"
 
 #import <React/RCTConversions.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
@@ -18,6 +19,9 @@ @implementation RNSBottomTabsScreenComponentView {
   RNSBottomTabsHostComponentView *__weak _Nullable _reactSuperview;
 
   RNSBottomTabsScreenEventEmitter *_Nonnull _reactEventEmitter;
+  
+  // We need this information to warn users about dynamic changes to behavior being currently unsupported.
+  BOOL _isOverrideScrollViewContentInsetAdjustmentBehaviorSet;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -60,9 +64,12 @@ - (void)resetProps
   _tabBarItemIconColor = nil;
 
   _tabBarItemBadgeBackgroundColor = nil;
-  
+
   _shouldUseRepeatedTabSelectionPopToRootSpecialEffect = YES;
   _shouldUseRepeatedTabSelectionScrollToTopSpecialEffect = YES;
+
+  _overrideScrollViewContentInsetAdjustmentBehavior = YES;
+  _isOverrideScrollViewContentInsetAdjustmentBehaviorSet = NO;
 }
 
 RNS_IGNORE_SUPER_CALL_BEGIN
@@ -183,17 +190,31 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     _selectedIconSFSymbolName = RCTNSStringFromStringNilIfEmpty(newComponentProps.selectedIconSFSymbolName);
     tabItemNeedsAppearanceUpdate = YES;
   }
-  
+
   if (newComponentProps.specialEffects.repeatedTabSelection.popToRoot
       != oldComponentProps.specialEffects.repeatedTabSelection.popToRoot) {
     _shouldUseRepeatedTabSelectionPopToRootSpecialEffect = newComponentProps.specialEffects.repeatedTabSelection.popToRoot;
   }
-  
+
   if (newComponentProps.specialEffects.repeatedTabSelection.scrollToTop
       != oldComponentProps.specialEffects.repeatedTabSelection.scrollToTop) {
     _shouldUseRepeatedTabSelectionScrollToTopSpecialEffect = newComponentProps.specialEffects.repeatedTabSelection.scrollToTop;
   }
 
+  if (newComponentProps.overrideScrollViewContentInsetAdjustmentBehavior
+      != oldComponentProps.overrideScrollViewContentInsetAdjustmentBehavior) {
+    _overrideScrollViewContentInsetAdjustmentBehavior = newComponentProps.overrideScrollViewContentInsetAdjustmentBehavior;
+    
+    if (_isOverrideScrollViewContentInsetAdjustmentBehaviorSet) {
+      RCTLogWarn(@"[RNScreens] changing overrideScrollViewContentInsetAdjustmentBehavior dynamically is currently unsupported");
+    }
+  }
+  
+  // This flag is set to YES when overrideScrollViewContentInsetAdjustmentBehavior prop
+  // is assigned for the first time. This allows us to identify any subsequent changes to this prop,
+  // enabling us to warn users that dynamic changes are not supported.
+  _isOverrideScrollViewContentInsetAdjustmentBehaviorSet = YES;
+
   if (tabItemNeedsAppearanceUpdate) {
     [_controller tabItemAppearanceHasChanged];
   }
@@ -240,6 +261,20 @@ + (BOOL)shouldBeRecycled
   return NO;
 }
 
+#pragma mark - RNSScrollViewBehaviorOverriding
+
+- (BOOL)shouldOverrideScrollViewContentInsetAdjustmentBehavior
+{
+  return self.overrideScrollViewContentInsetAdjustmentBehavior;
+}
+
+- (void)overrideScrollViewBehaviorInFirstDescendantChainIfNeeded
+{
+  if ([self shouldOverrideScrollViewContentInsetAdjustmentBehavior]) {
+    [RNSScrollViewHelper overrideScrollViewBehaviorInFirstDescendantChainFrom:self];
+  }
+}
+
 @end
 
 #pragma mark - View class exposure
diff --git a/ios/bottom-tabs/RNSTabBarController.mm b/ios/bottom-tabs/RNSTabBarController.mm
@@ -106,7 +106,7 @@ - (void)updateSelectedViewController
   [self assertExactlyOneFocusedTab];
 #endif
 
-  UIViewController *_Nullable selectedViewController = nil;
+  RNSTabsScreenViewController *_Nullable selectedViewController = nil;
   for (RNSTabsScreenViewController *tabViewController in self.viewControllers) {
     NSLog(
         @"Update Selected View Controller [%ld] isFocused %d",
@@ -121,7 +121,8 @@ - (void)updateSelectedViewController
   RCTAssert(selectedViewController != nil, @"[RNScreens] No selected view controller!");
 
   NSLog(@"Change selected view controller to: %@", selectedViewController);
-
+  
+  [selectedViewController.tabScreenComponentView overrideScrollViewBehaviorInFirstDescendantChainIfNeeded];
   [self setSelectedViewController:selectedViewController];
 }
 
diff --git a/ios/bottom-tabs/RNSTabBarControllerDelegate.mm b/ios/bottom-tabs/RNSTabBarControllerDelegate.mm
@@ -32,7 +32,8 @@ - (BOOL)tabBarController:(UITabBarController *)tabBarController
   if (!repeatedSelectionHandledNatively) {
     [tabBarCtrl.tabsHostComponentView
         emitOnNativeFocusChangeRequestSelectedTabScreen:tabScreenCtrl.tabScreenComponentView];
-    
+      
+    // TODO: handle overrideScrollViewBehaviorInFirstDescendantChainIfNeeded for natively-driven tabs
     return ![self shouldPreventNativeTabChangeWithinTabBarController:tabBarCtrl];
   }
   
diff --git a/src/components/BottomTabsScreen.tsx b/src/components/BottomTabsScreen.tsx
@@ -67,6 +67,8 @@ export interface BottomTabsScreenProps {
     };
   };
 
+  overrideScrollViewContentInsetAdjustmentBehavior?: boolean; // defaults to true
+
   // Events
   onWillAppear?: BottomTabsScreenEventHandler<EmptyObject>;
   onDidAppear?: BottomTabsScreenEventHandler<EmptyObject>;
diff --git a/src/fabric/BottomTabsScreenNativeComponent.ts b/src/fabric/BottomTabsScreenNativeComponent.ts

Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,6 @@ public interface RNSBottomTabsManagerInterface<T extends View> {`
`28`	`28`	`void setTabBarItemBadgeBackgroundColor(T view, @Nullable Integer value);`
`29`	`29`	`void setTabBarItemTitleFontColorActive(T view, @Nullable Integer value);`
`30`	`30`	`void setTabBarItemIconColorActive(T view, @Nullable Integer value);`
	`31`	`+ void setTabBarItemTitleFontSizeActive(T view, float value);`
`31`	`32`	`void setControlNavigationStateInJS(T view, boolean value);`
`32`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,8 @@ public interface RNSBottomTabsScreenManagerInterface<T extends View> {`
`30`	`30`	`void setTitle(T view, @Nullable String value);`
`31`	`31`	`void setIconSFSymbolName(T view, @Nullable String value);`
`32`	`32`	`void setSelectedIconSFSymbolName(T view, @Nullable String value);`
	`33`	`+ void setIconResourceName(T view, @Nullable String value);`
`33`	`34`	`void setBadgeValue(T view, @Nullable String value);`
`34`	`35`	`void setSpecialEffects(T view, @Nullable ReadableMap value);`
	`36`	`+ void setOverrideScrollViewContentInsetAdjustmentBehavior(T view, boolean value);`
`35`	`37`	`}`