From 9c4ad748f94f012780d96c7a9e0f969fe5e7c191 Mon Sep 17 00:00:00 2001
From: Darley <darley.wey@gmail.com>
Date: Wed, 4 Mar 2026 00:01:59 +0800
Subject: [PATCH 1/2] fix(tab-bar): fallback safe area inset bottom

Read window safe area and expose a css var fallback for env in TabBar.
This keeps bottom inset working on HarmonyOS Skyline devices. Closes #4299.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/components/tab-bar/tab-bar.less |  4 ++--
 packages/components/tab-bar/tab-bar.ts   | 16 +++++++++++++++-
 packages/components/tab-bar/tab-bar.wxml |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/components/tab-bar/tab-bar.less b/packages/components/tab-bar/tab-bar.less
index b3616ac92f..dbcf562066 100644
--- a/packages/components/tab-bar/tab-bar.less
+++ b/packages/components/tab-bar/tab-bar.less
@@ -29,7 +29,7 @@
 
   &--normal&--safe {
     padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--safe-area-inset-bottom);
   }
 
   &--round {
@@ -41,6 +41,6 @@
 
   &--fixed&--round&--safe {
     bottom: constant(safe-area-inset-bottom);
-    bottom: env(safe-area-inset-bottom);
+    bottom: var(--safe-area-inset-bottom);
   }
 }
diff --git a/packages/components/tab-bar/tab-bar.ts b/packages/components/tab-bar/tab-bar.ts
index 7fa06bfe29..038c641532 100644
--- a/packages/components/tab-bar/tab-bar.ts
+++ b/packages/components/tab-bar/tab-bar.ts
@@ -1,7 +1,7 @@
 import { wxComponent, SuperComponent, RelationsOptions } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
-import { getRect } from '../common/utils';
+import { getRect, systemInfo } from '../common/utils';
 
 const { prefix } = config;
 const classPrefix = `${prefix}-tab-bar`;
@@ -22,6 +22,7 @@ export default class Tabbar extends SuperComponent {
     prefix,
     classPrefix,
     placeholderHeight: 56,
+    safeAreaBottomHeight: 0,
   };
 
   properties = props;
@@ -40,15 +41,28 @@ export default class Tabbar extends SuperComponent {
     'fixed, placeholder'() {
       this.setPlaceholderHeight();
     },
+    safeAreaInsetBottom() {
+      this.setSafeAreaBottomHeight();
+    },
   };
 
   lifetimes = {
     ready() {
       this.showChildren();
+      this.setSafeAreaBottomHeight();
     },
   };
 
   methods = {
+    setSafeAreaBottomHeight() {
+      if (!this.properties.safeAreaInsetBottom) return;
+
+      wx.nextTick(() => {
+        const { screenHeight, safeArea } = systemInfo;
+        const safeAreaBottomHeight = screenHeight - (safeArea?.bottom ?? screenHeight);
+        this.setData({ safeAreaBottomHeight: Math.max(0, safeAreaBottomHeight) });
+      });
+    },
     setPlaceholderHeight() {
       if (!this.properties.fixed || !this.properties.placeholder) return;
 
diff --git a/packages/components/tab-bar/tab-bar.wxml b/packages/components/tab-bar/tab-bar.wxml
index 3d801fa4e4..9165dd860a 100644
--- a/packages/components/tab-bar/tab-bar.wxml
+++ b/packages/components/tab-bar/tab-bar.wxml
@@ -6,7 +6,7 @@
   style="height: {{ placeholderHeight }}px;"
 />
 <view
-  style="{{_._style(['z-index: ' + zIndex, style, customStyle])}}"
+  style="{{_._style(['z-index: ' + zIndex, style, customStyle, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)')])}}"
   class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class"
   aria-role="tablist"
 >

From f0103f2268c9788400dff6eb636483195524cd30 Mon Sep 17 00:00:00 2001
From: Darley <darley.wey@gmail.com>
Date: Wed, 4 Mar 2026 00:12:35 +0800
Subject: [PATCH 2/2] fix(tab-bar): keep customStyle override precedence

Move the injected --safe-area-inset-bottom style before style/customStyle
so customStyle remains last in _._style and can still override values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/components/tab-bar/tab-bar.wxml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/tab-bar/tab-bar.wxml b/packages/components/tab-bar/tab-bar.wxml
index 9165dd860a..2230d69924 100644
--- a/packages/components/tab-bar/tab-bar.wxml
+++ b/packages/components/tab-bar/tab-bar.wxml
@@ -6,7 +6,7 @@
   style="height: {{ placeholderHeight }}px;"
 />
 <view
-  style="{{_._style(['z-index: ' + zIndex, style, customStyle, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)')])}}"
+  style="{{_._style(['z-index: ' + zIndex, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)'), style, customStyle])}}"
   class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class"
   aria-role="tablist"
 >