@honeypathkar/react-native-lq-bottom-bar 0.1.0 → 0.1.1

package/README.md

@@ -288,6 +288,14 @@ choice would force every consuming app to add that repository to its own
 **Labels show but glyphs do not.** Your icon component is not forwarding its
 ref to an `<Svg>`. See the warning section above — this is nearly always it.
 
+**The bar is lit on the wrong tab.** Fixed in 0.1.1. The bar restores its
+highlight to `selectedIndex` after every press, to honour the report-not-commit
+contract; before 0.1.1 it did so synchronously inside UIKit's own selection
+callback, where UIKit overrode it. The highlight stuck to the tapped tab, and
+since `selectedIndex` had not changed value nothing re-applied it — so the bar
+stayed out of step with the app until some other prop change happened to
+correct it. Upgrade.
+
 **A white or mismatched strip under the bar.** The bar is in flow and the
 translucent material has only your root view behind it. Give that container a
 background colour, or move to the overlaid layout.

package/ios/LQBottomBarView.swift

@@ -43,7 +43,24 @@ public final class LQBottomBarView: UIView, UITabBarDelegate {
 
   /// `[{ title, icon }]`, set from JS. Re-builds the items in place.
   @objc public var items: NSArray = [] {
-    didSet { rebuildItems() }
+    didSet {
+      /*
+       REBUILD ONLY WHEN THE ITEMS ACTUALLY CHANGED.
+
+       The JS side rebuilds its `items` array on every render, so this prop
+       arrives constantly with identical contents. Acting on each one calls
+       `setItems`, which THROWS AWAY the existing `UITabBarItem`s and the
+       selection animation running on them — a rebuild landing mid-animation
+       is how a press ends up looking like it half-happened.
+
+       `isEqual` on the arrays is a deep compare of the dictionaries inside,
+       which is what "the same bar" means here. The icon values are cached
+       data URIs on the JS side, so equal renders really do produce equal
+       strings rather than merely equivalent ones.
+      */
+      if items.isEqual(oldValue) { return }
+      rebuildItems()
+    }
   }
 
   /// Which item is lit. Setting it animates, which is the point.
@@ -264,7 +281,11 @@ public final class LQBottomBarView: UIView, UITabBarDelegate {
     guard let items = tabBar.items, index >= 0, index < items.count else {
       return
     }
-    tabBar.selectedItem = items[index]
+    let target = items[index]
+    // Already there. Re-assigning restarts the capsule animation, and this
+    // runs on every prop transaction, so the bar would shimmer continuously.
+    if tabBar.selectedItem === target { return }
+    tabBar.selectedItem = target
   }
 
   // MARK: - UITabBarDelegate
@@ -280,8 +301,28 @@ public final class LQBottomBarView: UIView, UITabBarDelegate {
      */
     onTabSelected?(["index": item.tag])
 
-    // Put the bar back where JS still thinks it is, so a vetoed press does
-    // not leave the highlight on the wrong item for a frame.
-    applySelection()
+    /*
+     THE SNAP-BACK HAS TO WAIT A TURN, and this is the whole reason the bar
+     can end up lit on a tab the app is not showing.
+
+     UIKit calls this delegate method while it is still settling its OWN
+     selection — on iOS 26 the capsule is mid-animation — so assigning
+     `selectedItem` from in here is assigning into a change that has not
+     finished. UIKit wins, the highlight stays on the tapped item, and because
+     `selectedIndex` never changed VALUE, the prop never fires `didSet` again
+     and nothing ever corrects it. The bar is then permanently out of step with
+     the app: Events lit while the Profile screen is on screen.
+
+     Hopping to the next runloop turn puts the assignment after UIKit has
+     finished, where it sticks.
+
+     Reading `selectedIndex` late is a second benefit rather than a hazard: if
+     JS accepted the press and sent a new index in the meantime, this applies
+     THAT, so an accepted press does not visibly bounce back before moving
+     forward again.
+    */
+    DispatchQueue.main.async { [weak self] in
+      self?.applySelection()
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@honeypathkar/react-native-lq-bottom-bar",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The real iOS UITabBar (liquid glass on iOS 26) and a matching blurred Android bar, taking React icons rather than only images",
   "publishConfig": {
     "access": "public"