@honeypathkar/react-native-lq-bottom-bar 0.0.0-stage → 0.1.1

package/android/src/main/java/com/honeypathkar/lqbottombar/LQBottomBarView.kt

@@ -0,0 +1,503 @@
+package com.honeypathkar.lqbottombar
+
+import android.animation.ArgbEvaluator
+import android.animation.ValueAnimator
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.graphics.Canvas
+import android.graphics.Color
+import android.util.Base64
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.view.animation.PathInterpolator
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * THE ANDROID BAR, matching the iOS one.
+ *
+ * There is no system bottom bar to borrow here the way `UITabBar` is borrowed
+ * on iOS — Material's `NavigationBarView` is a different control with a
+ * different shape and its own opinions — so this draws the bar itself and
+ * matches the iOS one deliberately: the same dimensions, the same tint
+ * crossfade on selection, and a blurred backdrop standing in for the iOS
+ * material.
+ *
+ * `ReactViewGroup`, NOT a plain `FrameLayout`. Subclassing React Native's own
+ * view brings `borderRadius`, `backgroundColor`, `overflow` and the whole
+ * standard style surface with it, so the bar is shaped from JS with ordinary
+ * style props instead of needing a bespoke prop per corner. The JS wrapper
+ * passes `overflow: 'hidden'` for exactly this reason: without it the blurred
+ * backdrop would square off the rounded corners it sits inside.
+ *
+ * The icons arrive as base64 PNGs, captured from React elements by
+ * `src/rasterise.tsx`. A view that draws its own items cannot take a React
+ * element, which is the same constraint `UITabBar` imposes — so both
+ * platforms are fed from one rasteriser rather than each inventing a path.
+ */
+class LQBottomBarView(context: Context) : ReactViewGroup(context) {
+
+  /**
+   * UIKit's standard bar body, excluding the home-indicator inset.
+   *
+   * Hard-coded to match iOS rather than measured, because matching is the
+   * point: the two platforms should reserve the same space so a screen laying
+   * content out above the bar can use one number.
+   */
+  private val barHeightDp = 49f
+
+  private val iconSizeDefaultDp = 24f
+
+  // MARK: - Pending props
+  //
+  // React Native sets props one at a time and in no guaranteed order, so each
+  // setter records and marks dirty rather than rebuilding. The manager calls
+  // `applyPendingUpdates` once per transaction — otherwise a four-item bar
+  // rebuilds itself five times for one render.
+
+  private var items: ReadableArray? = null
+  private var selectedIndex = 0
+  private var selectedColor = Color.WHITE
+  private var unselectedColor = Color.argb(140, 255, 255, 255)
+  private var labeled = true
+  private var iconSizeDp = iconSizeDefaultDp
+
+  private var itemsDirty = false
+  private var appearanceDirty = false
+  private var selectionDirty = false
+
+  /** -1 until the first selection lands, so the first one does not animate. */
+  private var appliedIndex = -1
+
+  // MARK: - Views
+
+  private val blur = BackdropBlur(this)
+
+  /**
+   * The material's TINT, over the blurred backdrop rather than under it.
+   *
+   * This is how UIKit composes a material and the order matters: blur first,
+   * then a translucent colour on top. Painted underneath instead it would be
+   * hidden by the backdrop entirely, and painted opaque it stops being a tint
+   * and becomes a lid — which is how every hand-built version of this bar
+   * ends up looking like a milky panel.
+   */
+  private val scrim = View(context)
+
+  private val row =
+    LinearLayout(context).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER
+    }
+
+  private class ItemHolder(
+    val container: LinearLayout,
+    val icon: ImageView,
+    val label: TextView,
+    val tintable: Boolean,
+  ) {
+    var animator: ValueAnimator? = null
+    var progress = 0f
+  }
+
+  private val holders = mutableListOf<ItemHolder>()
+
+  /**
+   * Decoded glyphs, keyed by the data URI they came from.
+   *
+   * The URIs are stable strings produced by the JS rasteriser's own cache, so
+   * this is keyed on identity in practice. Without it every prop update —
+   * including each selection change, which re-sends `items` — would re-decode
+   * and re-allocate every bitmap in the bar.
+   */
+  private val bitmaps = HashMap<String, Bitmap?>()
+
+  private val argb = ArgbEvaluator()
+
+  /** UIKit's default timing curve, so the crossfade reads the same. */
+  private val easing = PathInterpolator(0.25f, 0.1f, 0.25f, 1f)
+
+  init {
+    addView(
+      blur.image,
+      LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
+    )
+    addView(
+      scrim,
+      LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
+    )
+    addView(
+      row,
+      LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
+    )
+  }
+
+  private fun dp(value: Float): Int =
+    TypedValue.applyDimension(
+        TypedValue.COMPLEX_UNIT_DIP,
+        value,
+        resources.displayMetrics,
+      )
+      .toInt()
+
+  // MARK: - Prop entry points
+
+  fun setItems(value: ReadableArray?) {
+    items = value
+    itemsDirty = true
+  }
+
+  fun setSelectedIndex(value: Int) {
+    selectedIndex = value
+    selectionDirty = true
+  }
+
+  fun setSelectedColor(value: Int) {
+    selectedColor = value
+    appearanceDirty = true
+  }
+
+  fun setUnselectedColor(value: Int) {
+    unselectedColor = value
+    appearanceDirty = true
+  }
+
+  fun setLabeled(value: Boolean) {
+    if (labeled == value) return
+    labeled = value
+    itemsDirty = true
+  }
+
+  fun setIconSize(value: Float) {
+    if (iconSizeDp == value) return
+    iconSizeDp = value
+    itemsDirty = true
+  }
+
+  fun setBlurAmount(value: Float) {
+    blur.radius = value
+  }
+
+  fun setScrimColor(value: Int) {
+    scrim.setBackgroundColor(value)
+  }
+
+  /** Called once per prop transaction by the manager. See the note above. */
+  fun applyPendingUpdates() {
+    if (itemsDirty) {
+      rebuildItems()
+      itemsDirty = false
+      // A rebuild produces fresh views with no tint or selection on them.
+      appearanceDirty = true
+      selectionDirty = true
+      appliedIndex = -1
+    }
+    if (appearanceDirty) {
+      applyAppearance()
+      appearanceDirty = false
+    }
+    if (selectionDirty) {
+      applySelection()
+      selectionDirty = false
+    }
+  }
+
+  // MARK: - Items
+
+  private fun rebuildItems() {
+    holders.forEach { it.animator?.cancel() }
+    holders.clear()
+    row.removeAllViews()
+
+    val source = items ?: return
+
+    for (index in 0 until source.size()) {
+      val spec = source.getMap(index) ?: continue
+
+      val icon =
+        ImageView(context).apply {
+          val size = dp(iconSizeDp)
+          layoutParams = LinearLayout.LayoutParams(size, size)
+          scaleType = ImageView.ScaleType.FIT_CENTER
+        }
+
+      bitmapFor(spec)?.let { icon.setImageBitmap(it) }
+
+      val label =
+        TextView(context).apply {
+          text = spec.getStringOrNull("title") ?: ""
+          /*
+           10sp is UIKit's tab-bar label size. `COMPLEX_UNIT_SP` rather than
+           DIP on purpose: a label should follow the user's font-size setting,
+           which is what the iOS bar does through Dynamic Type.
+          */
+          setTextSize(TypedValue.COMPLEX_UNIT_SP, 10f)
+          includeFontPadding = false
+          maxLines = 1
+          visibility = if (labeled) View.VISIBLE else View.GONE
+        }
+
+      val container =
+        LinearLayout(context).apply {
+          orientation = LinearLayout.VERTICAL
+          gravity = Gravity.CENTER
+          /*
+           Equal weights, zero width. The bar spreads its items evenly across
+           whatever width it is given, which is what `UITabBar` does and what
+           keeps the two platforms lined up when the bar is inset into a pill.
+          */
+          layoutParams = LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1f)
+          isClickable = true
+          isFocusable = true
+          contentDescription =
+            spec.getStringOrNull("accessibilityLabel")
+              ?: spec.getStringOrNull("title")
+        }
+
+      container.addView(icon)
+      if (labeled) {
+        (icon.layoutParams as LinearLayout.LayoutParams).bottomMargin = dp(2f)
+        container.addView(label)
+      }
+
+      val position = index
+      container.setOnClickListener {
+        /*
+         REPORT, DO NOT DECIDE — the same contract as the iOS bar.
+
+         The selection is JS state: a press can be declined, so the bar must
+         not move until `selectedIndex` comes back down. Animating here and
+         letting JS correct it afterwards is what makes a declined press
+         flicker.
+        */
+        emitSelected(position)
+      }
+
+      row.addView(container)
+      holders.add(
+        ItemHolder(
+          container = container,
+          icon = icon,
+          label = label,
+          tintable = spec.getBooleanOrDefault("tintable", true),
+        )
+      )
+    }
+  }
+
+  private fun bitmapFor(spec: ReadableMap): Bitmap? {
+    val icon = spec.getMap("icon") ?: return null
+    val uri = icon.getStringOrNull("uri") ?: return null
+    if (bitmaps.containsKey(uri)) return bitmaps[uri]
+
+    val decoded =
+      if (uri.startsWith("data:")) {
+        /*
+         A RASTERISED REACT ICON, which is the only form this view handles.
+
+         `src/rasterise.tsx` captures a lucide or SVG element off-screen and
+         sends it as an inline base64 PNG. The capture is already at the
+         device's pixel density — see the unit note in that file — so the
+         bitmap is `iconSize * density` pixels and the ImageView, sized in dp,
+         scales it back down to exactly the right size without resampling it
+         twice.
+        */
+        val comma = uri.indexOf(',')
+        if (comma < 0) {
+          null
+        } else {
+          try {
+            val bytes = Base64.decode(uri.substring(comma + 1), Base64.DEFAULT)
+            BitmapFactory.decodeByteArray(bytes, 0, bytes.size)
+          } catch (error: IllegalArgumentException) {
+            // Malformed base64: no glyph, rather than no bar.
+            null
+          }
+        }
+      } else {
+        /*
+         A file or a Metro URL, which only iOS resolves.
+
+         Android is fed exclusively from the rasteriser, so an item whose icon
+         is a `require()`d PNG or an SF Symbol reaches here as something this
+         view cannot draw. Caching the miss keeps it from being retried on
+         every update; the item still gets its label.
+        */
+        null
+      }
+
+    bitmaps[uri] = decoded
+    return decoded
+  }
+
+  // MARK: - Appearance and selection
+
+  private fun applyAppearance() {
+    holders.forEachIndexed { index, holder ->
+      tint(holder, if (index == selectedIndex) 1f else 0f)
+    }
+  }
+
+  private fun tint(holder: ItemHolder, progress: Float) {
+    holder.progress = progress
+    val color = argb.evaluate(progress, unselectedColor, selectedColor) as Int
+    if (holder.tintable) {
+      /*
+       `imageTintList` is the Android equivalent of iOS's `.alwaysTemplate`:
+       the bitmap's alpha is the shape and this supplies the colour. An item
+       with `tintable: false` keeps its own colours and so looks identical in
+       both states, which is the caller's choice for an avatar or a brand mark.
+      */
+      holder.icon.imageTintList = ColorStateList.valueOf(color)
+    } else {
+      holder.icon.imageTintList = null
+    }
+    holder.label.setTextColor(color)
+  }
+
+  private fun applySelection() {
+    if (holders.isEmpty()) return
+    val target = selectedIndex.coerceIn(0, holders.size - 1)
+
+    // The first selection after a rebuild is the bar's initial state, not a
+    // transition, so it lands without animating.
+    val animated = appliedIndex >= 0 && appliedIndex != target
+    appliedIndex = target
+
+    holders.forEachIndexed { index, holder ->
+      val to = if (index == target) 1f else 0f
+      if (!animated) {
+        holder.animator?.cancel()
+        tint(holder, to)
+        holder.icon.scaleX = 1f
+        holder.icon.scaleY = 1f
+        return@forEachIndexed
+      }
+      animate(holder, to, bump = index == target)
+    }
+  }
+
+  private fun animate(holder: ItemHolder, to: Float, bump: Boolean) {
+    holder.animator?.cancel()
+    val from = holder.progress
+    if (from == to && !bump) return
+
+    val animator =
+      ValueAnimator.ofFloat(0f, 1f).apply {
+        duration = 250L
+        interpolator = easing
+        addUpdateListener { animation ->
+          val t = animation.animatedFraction
+          tint(holder, from + (to - from) * t)
+
+          if (bump) {
+            /*
+             A SINGLE HALF-SINE, which is the shape of UIKit's icon bounce:
+             zero at both ends and peaking in the middle, so the glyph swells
+             and settles without a keyframe list and without ever landing
+             anywhere but 1.0. Interpolating to a peak and back with two
+             animators is what leaves a glyph stuck slightly large when the
+             user taps twice quickly.
+            */
+            val scale = 1f + 0.12f * Math.sin(Math.PI * t).toFloat()
+            holder.icon.scaleX = scale
+            holder.icon.scaleY = scale
+          }
+        }
+      }
+    holder.animator = animator
+    animator.start()
+  }
+
+  private fun emitSelected(index: Int) {
+    val reactContext = UIManagerHelper.getReactContext(this)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+    dispatcher?.dispatchEvent(TabSelectedEvent(UIManagerHelper.getSurfaceId(this), id, index))
+  }
+
+  // MARK: - Draw and lifecycle
+
+  /**
+   * SKIP DRAWING WHILE THE BACKDROP IS BEING CAPTURED.
+   *
+   * This bar is a descendant of the view it captures, so without this guard
+   * the capture would include the bar, blur it, and feed the result back in
+   * next frame — a smear that deepens until the bar is a grey block. See the
+   * recursion note in `BackdropBlur`.
+   *
+   * Both overrides are needed: the parent reaches a child through
+   * `draw(Canvas)` normally, but a view promoted to a hardware layer can be
+   * drawn through `dispatchDraw` instead, and only guarding one of them leaves
+   * the feedback path open on exactly the devices most likely to promote it.
+   */
+  override fun draw(canvas: Canvas) {
+    if (blur.isCapturing) return
+    super.draw(canvas)
+  }
+
+  override fun dispatchDraw(canvas: Canvas) {
+    if (blur.isCapturing) return
+    super.dispatchDraw(canvas)
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    blur.attach()
+  }
+
+  override fun onDetachedFromWindow() {
+    blur.detach()
+    super.onDetachedFromWindow()
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    // The capture bitmap is sized from the bar, so a resize invalidates it.
+    blur.invalidateBlur()
+  }
+
+  /**
+   * Called by the manager when React drops this view.
+   *
+   * The pre-draw listener is registered on the ROOT view's observer, which
+   * outlives this one — so failing to remove it leaks the bar and keeps
+   * running a full software draw of the tree on every frame, forever.
+   */
+  fun onDropViewInstance() {
+    holders.forEach { it.animator?.cancel() }
+    blur.release()
+    bitmaps.clear()
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    /*
+     Yoga sizes this view, exactly as on iOS, so the measured height is
+     whatever the style says. `barHeightDp` is only the fallback for an
+     unconstrained parent — it is there so the bar never measures to zero and
+     silently disappears, which is a confusing failure to debug.
+    */
+    if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.UNSPECIFIED) {
+      super.onMeasure(
+        widthMeasureSpec,
+        MeasureSpec.makeMeasureSpec(dp(barHeightDp), MeasureSpec.EXACTLY),
+      )
+      return
+    }
+    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+  }
+}
+
+/** `getString` throws on a missing key in some RN versions; this never does. */
+private fun ReadableMap.getStringOrNull(key: String): String? =
+  if (hasKey(key) && !isNull(key)) getString(key) else null
+
+private fun ReadableMap.getBooleanOrDefault(key: String, default: Boolean): Boolean =
+  if (hasKey(key) && !isNull(key)) getBoolean(key) else default

package/android/src/main/java/com/honeypathkar/lqbottombar/LQBottomBarViewManager.kt

@@ -0,0 +1,119 @@
+package com.honeypathkar.lqbottombar
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.views.view.ReactViewManager
+
+/**
+ * The bridge's handle on `LQBottomBarView`.
+ *
+ * `ReactViewManager`, not a bare `ViewGroupManager`. Extending React Native's
+ * own view manager inherits every standard style prop — `borderRadius`,
+ * `backgroundColor`, `overflow`, elevation, borders — so the bar is shaped
+ * from JS with ordinary styles rather than with a bespoke prop per corner.
+ * The only cost is that `createViewInstance` has to be widened to
+ * `ReactViewGroup`, which `LQBottomBarView` is.
+ *
+ * A LEGACY manager, deliberately, matching the iOS side: React Native 0.83
+ * bridges legacy managers through its interop layer, and a Fabric component
+ * would have to be generated from a codegen spec and kept in step with it for
+ * no behaviour this bar needs.
+ */
+class LQBottomBarViewManager : ReactViewManager() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(context: ThemedReactContext): ReactViewGroup =
+    LQBottomBarView(context)
+
+  /**
+   * Rebuild ONCE per transaction, not once per prop.
+   *
+   * React Native sets props individually and in no defined order, so a
+   * four-item bar would otherwise tear down and rebuild its item views several
+   * times for a single render — and `selectedIndex` arriving before `items`
+   * would be applied against the previous item list. The setters only record;
+   * this is where the work happens.
+   */
+  override fun onAfterUpdateTransaction(view: ReactViewGroup) {
+    super.onAfterUpdateTransaction(view)
+    (view as? LQBottomBarView)?.applyPendingUpdates()
+  }
+
+  /**
+   * The pre-draw listener lives on the ROOT view's observer, which outlives
+   * this one. Not removing it leaks the bar and keeps a full software draw of
+   * the whole tree running every frame for the rest of the session.
+   */
+  override fun onDropViewInstance(view: ReactViewGroup) {
+    (view as? LQBottomBarView)?.onDropViewInstance()
+    super.onDropViewInstance(view)
+  }
+
+  @ReactProp(name = "items")
+  fun setItems(view: ReactViewGroup, value: ReadableArray?) {
+    (view as? LQBottomBarView)?.setItems(value)
+  }
+
+  @ReactProp(name = "selectedIndex", defaultInt = 0)
+  fun setSelectedIndex(view: ReactViewGroup, value: Int) {
+    (view as? LQBottomBarView)?.setSelectedIndex(value)
+  }
+
+  /*
+   `customType = "Color"` is what makes React Native parse a JS colour string
+   into an int. Without it a `"#ffffff"` arrives as an unconvertible string and
+   the prop is dropped, so the bar silently keeps its default tints.
+  */
+  @ReactProp(name = "selectedColor", customType = "Color")
+  fun setSelectedColor(view: ReactViewGroup, value: Int?) {
+    if (value != null) (view as? LQBottomBarView)?.setSelectedColor(value)
+  }
+
+  @ReactProp(name = "unselectedColor", customType = "Color")
+  fun setUnselectedColor(view: ReactViewGroup, value: Int?) {
+    if (value != null) (view as? LQBottomBarView)?.setUnselectedColor(value)
+  }
+
+  @ReactProp(name = "labeled", defaultBoolean = true)
+  fun setLabeled(view: ReactViewGroup, value: Boolean) {
+    (view as? LQBottomBarView)?.setLabeled(value)
+  }
+
+  @ReactProp(name = "iconSize", defaultFloat = 24f)
+  fun setIconSize(view: ReactViewGroup, value: Float) {
+    (view as? LQBottomBarView)?.setIconSize(value)
+  }
+
+  @ReactProp(name = "blurAmount", defaultFloat = 0f)
+  fun setBlurAmount(view: ReactViewGroup, value: Float) {
+    (view as? LQBottomBarView)?.setBlurAmount(value)
+  }
+
+  @ReactProp(name = "scrimColor", customType = "Color")
+  fun setScrimColor(view: ReactViewGroup, value: Int?) {
+    (view as? LQBottomBarView)?.setScrimColor(value ?: 0)
+  }
+
+  /**
+   * `topTabSelected` is the NATIVE name; `onTabSelected` is the prop JS sets.
+   *
+   * React Native requires the two to be declared as a pair here — the `top`
+   * prefix is the convention its event plumbing expects — and a missing entry
+   * means the event is dispatched and then silently dropped, which looks
+   * exactly like a bar that does not respond to taps.
+   */
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    // Seeded from the superclass rather than replaced: `ReactViewManager`
+    // exports its own direct events, and returning a fresh map would drop them.
+    val base = super.getExportedCustomDirectEventTypeConstants() ?: mutableMapOf()
+    base[TabSelectedEvent.EVENT_NAME] = mapOf("registrationName" to "onTabSelected")
+    return base
+  }
+
+  companion object {
+    const val REACT_CLASS = "LQBottomBarView"
+  }
+}

package/android/src/main/java/com/honeypathkar/lqbottombar/TabSelectedEvent.kt

@@ -0,0 +1,30 @@
+package com.honeypathkar.lqbottombar
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+/**
+ * The tap, on its way to JS.
+ *
+ * A custom `Event` rather than `RCTEventEmitter.receiveEvent`, because the
+ * latter is the OLD bridge's path and is not delivered when the component is
+ * hosted through Fabric's interop layer — which is how this package's legacy
+ * view manager runs on the new architecture. Dispatching through the event
+ * dispatcher works on both, so there is only one path to keep correct.
+ */
+internal class TabSelectedEvent(
+  surfaceId: Int,
+  viewTag: Int,
+  private val index: Int,
+) : Event<TabSelectedEvent>(surfaceId, viewTag) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap =
+    Arguments.createMap().apply { putInt("index", index) }
+
+  companion object {
+    const val EVENT_NAME = "topTabSelected"
+  }
+}