Bottom bar fixes (#8263)

* Bottom bar fixes

* Fix for transparancy in iOS 26

* yarn update

* lodash: 4.18.1

* pure OSS

Author: markdevocht

.yarnrc.yml

@@ -5,9 +5,8 @@ enableGlobalCache: false
 nmHoistingLimits: workspaces
 
 npmMinimalAgeGate: 14d
-
 nodeLinker: node-modules
 
-npmRegistryServer: "https://npm.dev.wixpress.com"
+npmRegistryServer: "https://registry.npmjs.org"
 
 yarnPath: .yarn/releases/yarn-4.12.0.cjs

ios/BottomTabsAppearancePresenter.mm

@@ -8,8 +8,15 @@ @implementation BottomTabsAppearancePresenter
 
 - (void)applyBackgroundColor:(UIColor *)backgroundColor translucent:(BOOL)translucent {
     if (@available(iOS 26.0, *)) {
-        [self setTabBarTransparentBackground];
-        self.tabBar.backgroundColor = UIColor.clearColor;
+        if (backgroundColor) {
+            if (backgroundColor.isTransparent) {
+                [self setTabBarTransparentBackground];
+            } else {
+                [self setTabBarBackgroundColor:backgroundColor];
+            }
+        } else {
+            [self setTabBarDefaultBackground];
+        }
         return;
     }
     if (translucent)
@@ -61,8 +68,9 @@ - (void)setTabBarTranslucent:(BOOL)translucent {
 
 - (void)setTabBarDefaultBackground {
     if (@available(iOS 26.0, *)) {
-        [self setTabBarTransparentBackground];
-        self.tabBar.backgroundColor = UIColor.clearColor;
+        UITabBarAppearance *appearance = [UITabBarAppearance new];
+        [appearance configureWithDefaultBackground];
+        [self applyTabBarAppearance:appearance];
     } else {
         [self setTabBarOpaqueBackground];
     }
@@ -95,7 +103,11 @@ - (void)setTabBarOpaqueBackground {
 
 - (UITabBarAppearance *)appearanceWithColor:(UIColor *)color {
     UITabBarAppearance *appearance = [UITabBarAppearance new];
-    [appearance configureWithOpaqueBackground];
+    if (@available(iOS 26.0, *)) {
+        [appearance configureWithTransparentBackground];
+    } else {
+        [appearance configureWithOpaqueBackground];
+    }
     appearance.backgroundEffect = nil;
     appearance.shadowColor = nil;
     UIColor *resolvedColor = color ?: UIColor.systemBackgroundColor;

ios/RNNBottomTabsController.mm

@@ -51,12 +51,9 @@ - (instancetype)initWithLayoutInfo:(RNNLayoutInfo *)layoutInfo
 
     if (@available(iOS 26.0, *)) {
         UITabBarAppearance *appearance = [UITabBarAppearance new];
-        [appearance configureWithTransparentBackground];
-        appearance.backgroundEffect = nil;
-        appearance.backgroundColor = UIColor.clearColor;
+        [appearance configureWithDefaultBackground];
         self.tabBar.standardAppearance = appearance;
         self.tabBar.scrollEdgeAppearance = [appearance copy];
-        self.tabBar.barTintColor = UIColor.clearColor;
     } else if (@available(iOS 13.0, *)) {
         UITabBarAppearance *appearance = [UITabBarAppearance new];
         [appearance configureWithOpaqueBackground];

package.json

@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "hoist-non-react-statics": "3.3.2",
-    "lodash": "4.17.23",
+    "lodash": "4.18.1",
     "prop-types": "15.x.x",
     "react-lifecycles-compat": "^3.0.4",
     "tslib": "1.9.3"
@@ -182,4 +182,4 @@
       ]
     ]
   }
-}
+}

playground/ios/NavigationTests/UIViewController+LayoutProtocolTest.mm

@@ -264,7 +264,8 @@ - (void)testConstants_shouldReturnNavigationBarHeight_visible {
                                        childViewControllers:@[ stack, stack2 ]
                                          bottomTabsAttacher:nil];
 
-    XCTAssertEqual([bottomTabs getTopBarHeight], stack.navigationBar.frame.size.height);
+    XCTAssertEqual([bottomTabs getTopBarHeight],
+                   stack.navigationBar.frame.origin.y + stack.navigationBar.frame.size.height);
 }
 
 - (void)testConstants_shouldReturnNavigationBarHeight_invisible {

playground/package.json

@@ -33,6 +33,7 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
     "@babel/types": "7.25.0",
+    "@d11/react-native-fast-image": "^8.13.0",
     "@react-native-community/cli": "20.0.0",
     "@react-native-community/cli-platform-android": "20.0.0",
     "@react-native-community/cli-platform-ios": "20.0.0",
@@ -61,7 +62,6 @@
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-prettier": "3.1.4",
     "github-release-notes": "https://github.com/yogevbd/github-release-notes/tarball/e601b3dba72dcd6cba323c1286ea6dd0c0110b58",
-
     "identity-obj-proxy": "3.0.0",
     "jest": "^29.6.3",
     "lint-staged": "10.2.11",
@@ -70,7 +70,6 @@
     "prettier": "2.8.8",
     "react": "19.2.3",
     "react-native": "0.84.0",
-    "@d11/react-native-fast-image": "^8.13.0",
     "react-native-gesture-handler": "^2.29.1",
     "react-native-monorepo-config": "^0.3.0",
     "react-native-reanimated": "4.2.2",
@@ -85,7 +84,6 @@
     "typedoc": "0.x.x",
     "typescript": "^5.8.3"
   },
-
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix",
     "*.{h,m,mm}": "node ./scripts/check-clang-format"

yarn.lock

@@ -1663,6 +1663,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@d11/react-native-fast-image@npm:^8.13.0":
+  version: 8.13.0
+  resolution: "@d11/react-native-fast-image@npm:8.13.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/bbd3ed3db96ca54c86173ae9a0de8c254448a5ff495d9b4a33fe491bee8ad03b655ed2d7d862996af8817ee5562c2031e7e2969880229cac133e84fd1c3e9f78
+  languageName: node
+  linkType: hard
+
 "@dabh/diagnostics@npm:^2.0.8":
   version: 2.0.8
   resolution: "@dabh/diagnostics@npm:2.0.8"
@@ -5016,13 +5026,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compare-versions@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "compare-versions@npm:3.6.0"
-  checksum: 10/7492a50cdaa2c27f5254eee7c4b38856e1c164991bab3d98d7fd067fe4b570d47123ecb92523b78338be86aa221668fd3868bfe8caa5587dc3ebbe1a03d52b5d
-  languageName: node
-  linkType: hard
-
 "compressible@npm:~2.0.18":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
@@ -6794,15 +6797,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-versions@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "find-versions@npm:3.2.0"
-  dependencies:
-    semver-regex: "npm:^2.0.0"
-  checksum: 10/f010e00f9dedd5b83206762d668b4b3b86bbb81f3c2d957e2559969b9eadb6124297c4a2a1d51c5efea3d79557b19660a2758c77bb6a5ba5ce7750fba9847082
-  languageName: node
-  linkType: hard
-
 "flat-cache@npm:^3.0.4":
   version: 3.2.0
   resolution: "flat-cache@npm:3.2.0"
@@ -7733,27 +7727,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"husky@npm:4.2.5":
-  version: 4.2.5
-  resolution: "husky@npm:4.2.5"
-  dependencies:
-    chalk: "npm:^4.0.0"
-    ci-info: "npm:^2.0.0"
-    compare-versions: "npm:^3.6.0"
-    cosmiconfig: "npm:^6.0.0"
-    find-versions: "npm:^3.2.0"
-    opencollective-postinstall: "npm:^2.0.2"
-    pkg-dir: "npm:^4.2.0"
-    please-upgrade-node: "npm:^3.2.0"
-    slash: "npm:^3.0.0"
-    which-pm-runs: "npm:^1.0.0"
-  bin:
-    husky-run: bin/run.js
-    husky-upgrade: lib/upgrader/bin.js
-  checksum: 10/57fb1723f5c6e28edffd79896a5b10a69b4c55f89ddfa1fe6354cf37cf2dab27d7159213d4fc90e9bef2ea10ea1ca60d2003985b77480b4fa719f29d0e89153f
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:^0.4.17, iconv-lite@npm:~0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -9870,6 +9843,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:4.18.1":
+  version: 4.18.1
+  resolution: "lodash@npm:4.18.1"
+  checksum: 10/306fea53dfd39dad1f03d45ba654a2405aebd35797b673077f401edb7df2543623dc44b9effbb98f69b32152295fff725a4cec99c684098947430600c6af0c3f
+  languageName: node
+  linkType: hard
+
 "log-symbols@npm:^2.1.0":
   version: 2.2.0
   resolution: "log-symbols@npm:2.2.0"
@@ -11430,15 +11410,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"opencollective-postinstall@npm:^2.0.2":
-  version: 2.0.3
-  resolution: "opencollective-postinstall@npm:2.0.3"
-  bin:
-    opencollective-postinstall: index.js
-  checksum: 10/69d63778087cd10c9d707d9ed360556780cfdd0cd6241ded0e26632f467f1d5a064f4a9aec19a30c187770c17adba034d988f7684b226f3a73e79f44e73fab0e
-  languageName: node
-  linkType: hard
-
 "opener@npm:^1.5.2":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -12278,16 +12249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-fast-image@npm:^8.6.3":
-  version: 8.6.3
-  resolution: "react-native-fast-image@npm:8.6.3"
-  peerDependencies:
-    react: ^17 || ^18
-    react-native: ">=0.60.0"
-  checksum: 10/ed340c2b6c2e76658fa0a899a45132871017018bec0a03423b7456610810e79b2844dfa16063c05d98b89a7613eeb0de2fdf3ad978cdfa4d488a4e01228a7349
-  languageName: node
-  linkType: hard
-
 "react-native-gesture-handler@npm:^2.29.1":
   version: 2.30.0
   resolution: "react-native-gesture-handler@npm:2.30.0"
@@ -12332,6 +12293,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.25.3"
     "@babel/runtime": "npm:^7.25.0"
     "@babel/types": "npm:7.25.0"
+    "@d11/react-native-fast-image": "npm:^8.13.0"
     "@react-native-community/cli": "npm:20.0.0"
     "@react-native-community/cli-platform-android": "npm:20.0.0"
     "@react-native-community/cli-platform-ios": "npm:20.0.0"
@@ -12361,7 +12323,6 @@ __metadata:
     eslint-plugin-prettier: "npm:3.1.4"
     github-release-notes: "https://github.com/yogevbd/github-release-notes/tarball/e601b3dba72dcd6cba323c1286ea6dd0c0110b58"
     hoist-non-react-statics: "npm:^3.3.2"
-    husky: "npm:4.2.5"
     identity-obj-proxy: "npm:3.0.0"
     jest: "npm:^29.6.3"
     lint-staged: "npm:10.2.11"
@@ -12373,7 +12334,6 @@ __metadata:
     react: "npm:19.2.3"
     react-lifecycles-compat: "npm:^3.0.4"
     react-native: "npm:0.84.0"
-    react-native-fast-image: "npm:^8.6.3"
     react-native-gesture-handler: "npm:^2.29.1"
     react-native-monorepo-config: "npm:^0.3.0"
     react-native-reanimated: "npm:4.2.2"
@@ -12405,6 +12365,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.25.3"
     "@babel/runtime": "npm:^7.25.0"
     "@babel/types": "npm:7.25.0"
+    "@d11/react-native-fast-image": "npm:^8.13.0"
     "@react-native-community/cli": "npm:20.0.0"
     "@react-native-community/cli-platform-android": "npm:20.0.0"
     "@react-native-community/cli-platform-ios": "npm:20.0.0"
@@ -12435,11 +12396,10 @@ __metadata:
     eslint-plugin-prettier: "npm:3.1.4"
     github-release-notes: "https://github.com/yogevbd/github-release-notes/tarball/e601b3dba72dcd6cba323c1286ea6dd0c0110b58"
     hoist-non-react-statics: "npm:3.3.2"
-    husky: "npm:4.2.5"
     identity-obj-proxy: "npm:3.0.0"
     jest: "npm:^29.6.3"
     lint-staged: "npm:10.2.11"
-    lodash: "npm:4.17.23"
+    lodash: "npm:4.18.1"
     pixelmatch: "npm:^5.2.1"
     pngjs: "npm:^6.0.0"
     prettier: "npm:2.8.8"
@@ -12448,7 +12408,6 @@ __metadata:
     react-lifecycles-compat: "npm:^3.0.4"
     react-native: "npm:0.84.0"
     react-native-builder-bob: "npm:^0.40.13"
-    react-native-fast-image: "npm:^8.6.3"
     react-native-gesture-handler: "npm:^2.29.1"
     react-native-reanimated: "npm:4.2.2"
     react-native-worklets: "npm:0.7.4"
@@ -13307,13 +13266,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver-regex@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "semver-regex@npm:2.0.0"
-  checksum: 10/da7d6f5ceae80e2097933b1e4ea2815c2cfa2c50c6501db1a3d435a6063c0f23d66bc25fe8d06755048f3d7588d85339db6471446b2c91fea907e5c2ada5b0df
-  languageName: node
-  linkType: hard
-
 "semver@npm:2 || 3 || 4 || 5, semver@npm:2.x || 3.x || 4 || 5, semver@npm:5.x.x, semver@npm:^2.3.0 || 3.x || 4 || 5, semver@npm:^5.0.3, semver@npm:^5.1.0, semver@npm:^5.4.1, semver@npm:^5.5.1, semver@npm:^5.6.0, semver@npm:^5.7.1":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -15100,13 +15052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-pm-runs@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "which-pm-runs@npm:1.1.0"
-  checksum: 10/39a56ee50886fb33ec710e3b36dc9fe3d0096cac44850d9ca0c6186c4cb824d6c8125f013e0562e7c94744e1e8e4a6ab695592cdb12555777c7a4368143d822c
-  languageName: node
-  linkType: hard
-
 "which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19":
   version: 1.1.20
   resolution: "which-typed-array@npm:1.1.20"