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

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

@@ -0,0 +1,428 @@
+package com.honeypathkar.lqbottombar
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.RenderEffect
+import android.graphics.Shader
+import android.os.Build
+import android.os.SystemClock
+import android.view.View
+import android.view.ViewTreeObserver
+import android.widget.ImageView
+
+/**
+ * BLURRING WHAT IS BEHIND A VIEW, on a platform that has no API for it.
+ *
+ * This is the one genuinely awkward corner of the package, so it is worth
+ * being precise about why it looks like this.
+ *
+ * iOS hands the whole problem to UIKit: a `UITabBar` with
+ * `configureWithDefaultBackground()` gets the system material, and the system
+ * knows what is underneath it. Android has no equivalent. The two things that
+ * sound like one are not:
+ *
+ *   - `RenderEffect.createBlurEffect` (API 31+) blurs a view's OWN content.
+ *     Setting it on this bar would blur the bar's icons, not the page behind
+ *     them.
+ *   - `Window.setBackgroundBlurRadius` (API 31+) blurs behind a WINDOW, and
+ *     only for a window that is not fullscreen — a dialog. A tab bar inside
+ *     the activity's own window cannot use it.
+ *
+ * So the backdrop has to be produced by hand, which is what every Android
+ * blur library does and what this class does:
+ *
+ *   1. Draw the root view into a small off-screen bitmap, offset so the
+ *      bar's own rectangle lands at the bitmap's origin.
+ *   2. Blur that bitmap.
+ *   3. Draw it under the bar's contents, scaled back up.
+ *
+ * The downscale in step 1 is not only for speed: a bilinear upscale in step 3
+ * is itself a blur, so the explicit blur in step 2 has much less work to do.
+ *
+ * KNOWN LIMITATION, inherent to the technique rather than to this code.
+ * `View.draw(Canvas)` onto a bitmap is a SOFTWARE draw, and content the GPU
+ * owns exclusively does not participate: a `SurfaceView` or `TextureView` —
+ * video, a map, a camera preview — captures as a blank region, so the bar
+ * reads as frosted over nothing there. There is no fix available from inside
+ * the view hierarchy. Where that matters, pass `blurAmount={0}` and let the
+ * flat scrim carry the bar.
+ */
+internal class BackdropBlur(private val target: View) {
+
+  /**
+   * How far the capture is downscaled.
+   *
+   * Eight is BlurView's default and a good trade: a 1080x150px bar region
+   * becomes 135x19px, which is ~2.5k pixels to blur instead of 162k, and the
+   * upscale smooths what the small radius leaves behind.
+   */
+  private val downscale = 8
+
+  /** Radius in downscaled pixels; set from the JS `blurAmount`. */
+  var radius: Float = 0f
+    set(value) {
+      val clamped = value.coerceIn(0f, 25f)
+      if (clamped == field) return
+      field = clamped
+      applyEffect()
+      if (clamped == 0f) {
+        detach()
+        image.setImageBitmap(null)
+        attachedBitmap = null
+      } else {
+        attach()
+        invalidateBlur()
+      }
+    }
+
+  /**
+   * The blurred backdrop, as a real child view rather than something painted
+   * in `onDraw`.
+   *
+   * On API 31+ this is what makes the GPU do the blur: a `RenderEffect` set on
+   * a view blurs that view's content, and this view's content is the captured
+   * page. That is the one case where the "wrong" API is exactly right — the
+   * capture has already turned the backdrop INTO our own content.
+   */
+  val image: ImageView = ImageView(target.context).apply {
+    scaleType = ImageView.ScaleType.FIT_XY
+  }
+
+  private var bitmap: Bitmap? = null
+
+  /** Which bitmap instance the ImageView currently holds. See `invalidateBlur`. */
+  private var attachedBitmap: Bitmap? = null
+
+  private val canvas = Canvas()
+
+  /**
+   * Set while capturing, and read by the target's own `draw` override.
+   *
+   * The bar is a DESCENDANT of the view it is capturing, so an unguarded
+   * capture would draw the bar into its own backdrop, then blur that, then
+   * capture the result — feedback, visible as a smear that deepens every
+   * frame. The target skips drawing itself entirely while this is set.
+   */
+  var isCapturing = false
+    private set
+
+  private var attached = false
+  private var lastCaptureMs = 0L
+
+  private var blurPixels: IntArray? = null
+  private var blurScratch: IntArray? = null
+
+  private val location = IntArray(2)
+  private val rootLocation = IntArray(2)
+
+  /**
+   * Capture on every frame the root draws.
+   *
+   * A pre-draw listener rather than a timer, because the backdrop is only
+   * stale when something behind the bar actually changed, and that is exactly
+   * when the root redraws. The listener is removed whenever blur is off, so a
+   * bar with `blurAmount={0}` costs nothing at all.
+   */
+  private val preDrawListener =
+    ViewTreeObserver.OnPreDrawListener {
+      invalidateBlur()
+      true
+    }
+
+  /**
+   * THE ACTIVITY'S CONTENT VIEW, not the decor view.
+   *
+   * `getRootView()` returns the decor view, which also holds the status and
+   * navigation bar backgrounds. Capturing from there is not WRONG — the offset
+   * is computed from both views' on-screen positions, so the maths lands in
+   * the same place either way — but it means a full software draw of the
+   * system bar decorations on every frame for pixels the bar never samples.
+   *
+   * `android.R.id.content` is the standard handle on the content view, and it
+   * falls back to the decor view for the case where this is somehow hosted
+   * outside an activity's content frame.
+   */
+  private fun rootView(): View? {
+    val root = target.rootView ?: return null
+    return root.findViewById(android.R.id.content) ?: root
+  }
+
+  fun attach() {
+    if (attached || radius == 0f) return
+    val root = rootView() ?: return
+    root.viewTreeObserver.addOnPreDrawListener(preDrawListener)
+    attached = true
+  }
+
+  fun detach() {
+    if (!attached) return
+    rootView()?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
+    attached = false
+  }
+
+  fun release() {
+    detach()
+    image.setImageBitmap(null)
+    attachedBitmap = null
+    bitmap?.recycle()
+    bitmap = null
+  }
+
+  /** Re-capture and re-blur, unless it has already happened this frame. */
+  fun invalidateBlur() {
+    if (radius == 0f) return
+    if (target.width == 0 || target.height == 0) return
+
+    /*
+     ONE CAPTURE PER FRAME.
+
+     A single frame can fire several pre-draws — a layout pass that dirties
+     an ancestor, an animation committing, a child invalidating — and each
+     would otherwise run a full software draw of the whole tree. Capping at
+     frame cadence makes the repeats free without the backdrop ever lagging
+     more than it already does.
+    */
+    val now = SystemClock.uptimeMillis()
+    if (now - lastCaptureMs < 16L) return
+    lastCaptureMs = now
+
+    val root = rootView() ?: return
+    if (root.width == 0 || root.height == 0) return
+
+    val width = (target.width / downscale).coerceAtLeast(1)
+    val height = (target.height / downscale).coerceAtLeast(1)
+
+    var current = bitmap
+    if (current == null || current.width != width || current.height != height) {
+      current?.recycle()
+      // Recycled, so the ImageView must be given the replacement rather than
+      // being told to repaint a bitmap that no longer has pixels.
+      attachedBitmap = null
+      current =
+        try {
+          Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+        } catch (error: OutOfMemoryError) {
+          // A bar-sized bitmap at 1/8 scale is a few kilobytes, so this is
+          // effectively unreachable — but failing to a flat scrim is much
+          // better than taking the app down for a decoration.
+          bitmap = null
+          return
+        }
+      bitmap = current
+    }
+
+    target.getLocationOnScreen(location)
+    root.getLocationOnScreen(rootLocation)
+    val offsetX = (location[0] - rootLocation[0]).toFloat()
+    val offsetY = (location[1] - rootLocation[1]).toFloat()
+
+    current.eraseColor(0)
+    canvas.setBitmap(current)
+    canvas.save()
+
+    /*
+     SCALE THEN TRANSLATE, and the order is not interchangeable.
+
+     Canvas transforms compose right-to-left on the points being drawn, so
+     this pair maps a root pixel p to (p - offset) / downscale: shift the
+     bar's own rectangle to the origin first, then shrink. Scaling after
+     translating would shrink the offset too and the capture would come from
+     a point an eighth of the way towards the bar.
+    */
+    canvas.scale(1f / downscale, 1f / downscale)
+    canvas.translate(-offsetX, -offsetY)
+
+    isCapturing = true
+    try {
+      root.draw(canvas)
+    } catch (error: Throwable) {
+      // A custom view in the tree that cannot tolerate a software canvas
+      // should cost the blur, not the frame.
+    } finally {
+      isCapturing = false
+      canvas.restore()
+      canvas.setBitmap(null)
+    }
+
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
+      // No RenderEffect here, so the blur is done to the pixels directly.
+      stackBlur(current, radius.toInt().coerceAtLeast(1))
+    }
+
+    /*
+     HANDED OVER ONCE, THEN JUST INVALIDATED.
+
+     `setImageBitmap` wraps the bitmap in a fresh `BitmapDrawable` every call,
+     so doing it per frame allocates a drawable per frame for a bitmap the view
+     already holds. The pixels are mutated in place, so once the ImageView has
+     this instance an `invalidate()` is all that is needed — the software blur
+     writes straight into it, and a `RenderEffect` re-reads it when the
+     drawable is next drawn.
+    */
+    if (attachedBitmap !== current) {
+      image.setImageBitmap(current)
+      attachedBitmap = current
+    } else {
+      image.invalidate()
+    }
+  }
+
+  private fun applyEffect() {
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) return
+    image.setRenderEffect(
+      if (radius == 0f) {
+        null
+      } else {
+        /*
+         CLAMP, not DECAL. A blur samples outside its own bounds at the edges;
+         clamping extends the edge pixels, while the default would fade them
+         towards transparent and leave a lighter hairline along the top of the
+         bar — which on a dark page reads as a seam.
+        */
+        RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP)
+      }
+    )
+  }
+
+  /**
+   * A three-pass box blur, which is a close enough Gaussian for API < 31.
+   *
+   * Three box passes converge on a Gaussian well within what the eye can tell
+   * apart at this scale, and each pass is a running sum — so the cost is per
+   * pixel rather than per pixel per radius. On a bitmap this small (a few
+   * thousand pixels after the downscale) the whole thing is well under a
+   * millisecond, which is what makes doing it on the UI thread acceptable.
+   */
+  private fun stackBlur(target: Bitmap, radius: Int) {
+    val width = target.width
+    val height = target.height
+    if (width < 2 || height < 2) return
+
+    /*
+     The two buffers are fields, not locals.
+
+     This runs on the UI thread on every captured frame, and a pair of
+     `IntArray(width * height)` allocations per frame is steady garbage for no
+     reason — the size only changes when the bar is resized. Re-allocated only
+     when that happens.
+    */
+    val count = width * height
+    if (blurPixels?.size != count) {
+      blurPixels = IntArray(count)
+      blurScratch = IntArray(count)
+    }
+    val pixels = blurPixels ?: return
+    val scratch = blurScratch ?: return
+
+    target.getPixels(pixels, 0, width, 0, 0, width, height)
+
+    val boxes = boxesForGaussian(radius.toFloat(), 3)
+    for (box in boxes) {
+      val r = ((box - 1) / 2).coerceAtLeast(1)
+      boxBlurHorizontal(pixels, scratch, width, height, r)
+      boxBlurVertical(scratch, pixels, width, height, r)
+    }
+
+    target.setPixels(pixels, 0, width, 0, 0, width, height)
+  }
+
+  /**
+   * Box sizes whose successive application approximates a Gaussian of the
+   * given standard deviation. Ivan Kutskir's derivation, which is the
+   * standard one for this trick.
+   */
+  private fun boxesForGaussian(sigma: Float, passes: Int): IntArray {
+    val idealWidth = Math.sqrt((12.0 * sigma * sigma / passes) + 1.0)
+    var lower = Math.floor(idealWidth).toInt()
+    if (lower % 2 == 0) lower--
+    val upper = lower + 2
+
+    val idealCrossover =
+      (12.0 * sigma * sigma - passes * lower * lower - 4.0 * passes * lower - 3.0 * passes) /
+        (-4.0 * lower - 4.0)
+    val crossover = Math.round(idealCrossover).toInt()
+
+    return IntArray(passes) { if (it < crossover) lower else upper }
+  }
+
+  private fun boxBlurHorizontal(
+    source: IntArray,
+    destination: IntArray,
+    width: Int,
+    height: Int,
+    radius: Int,
+  ) {
+    val divisor = radius + radius + 1
+    for (y in 0 until height) {
+      val row = y * width
+      var alpha = 0
+      var red = 0
+      var green = 0
+      var blue = 0
+
+      // Prime the running sum with the window centred on the first pixel,
+      // clamping both ends to the row's own edge pixels.
+      for (x in -radius..radius) {
+        val pixel = source[row + x.coerceIn(0, width - 1)]
+        alpha += pixel ushr 24 and 0xFF
+        red += pixel ushr 16 and 0xFF
+        green += pixel ushr 8 and 0xFF
+        blue += pixel and 0xFF
+      }
+
+      for (x in 0 until width) {
+        destination[row + x] =
+          (alpha / divisor shl 24) or
+            (red / divisor shl 16) or
+            (green / divisor shl 8) or
+            (blue / divisor)
+
+        val leaving = source[row + (x - radius).coerceIn(0, width - 1)]
+        val entering = source[row + (x + radius + 1).coerceIn(0, width - 1)]
+        alpha += (entering ushr 24 and 0xFF) - (leaving ushr 24 and 0xFF)
+        red += (entering ushr 16 and 0xFF) - (leaving ushr 16 and 0xFF)
+        green += (entering ushr 8 and 0xFF) - (leaving ushr 8 and 0xFF)
+        blue += (entering and 0xFF) - (leaving and 0xFF)
+      }
+    }
+  }
+
+  private fun boxBlurVertical(
+    source: IntArray,
+    destination: IntArray,
+    width: Int,
+    height: Int,
+    radius: Int,
+  ) {
+    val divisor = radius + radius + 1
+    for (x in 0 until width) {
+      var alpha = 0
+      var red = 0
+      var green = 0
+      var blue = 0
+
+      for (y in -radius..radius) {
+        val pixel = source[y.coerceIn(0, height - 1) * width + x]
+        alpha += pixel ushr 24 and 0xFF
+        red += pixel ushr 16 and 0xFF
+        green += pixel ushr 8 and 0xFF
+        blue += pixel and 0xFF
+      }
+
+      for (y in 0 until height) {
+        destination[y * width + x] =
+          (alpha / divisor shl 24) or
+            (red / divisor shl 16) or
+            (green / divisor shl 8) or
+            (blue / divisor)
+
+        val leaving = source[(y - radius).coerceIn(0, height - 1) * width + x]
+        val entering = source[(y + radius + 1).coerceIn(0, height - 1) * width + x]
+        alpha += (entering ushr 24 and 0xFF) - (leaving ushr 24 and 0xFF)
+        red += (entering ushr 16 and 0xFF) - (leaving ushr 16 and 0xFF)
+        green += (entering ushr 8 and 0xFF) - (leaving ushr 8 and 0xFF)
+        blue += (entering and 0xFF) - (leaving and 0xFF)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+/*
+ ReactShadowNode IS DEPRECATED AND UNAVOIDABLE. It appears only in
+ `ReactPackage.createViewManagers`'s own return type, so implementing that
+ interface at all means importing it and naming it in an override. The
+ suppression is file-level because the import itself is what gets flagged, and
+ this file contains nothing but that one implementation — so it cannot hide a
+ deprecation that is actually ours.
+*/
+@file:Suppress("DEPRECATION", "OVERRIDE_DEPRECATION")
+
+package com.honeypathkar.lqbottombar
+
+import android.view.View
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.ViewManager
+
+/**
+ * Autolinking entry point. Found by `react-native config`, so no app-side
+ * registration is needed.
+ */
+class LQBottomBarPackage : ReactPackage {
+
+  override fun createNativeModules(
+    reactContext: ReactApplicationContext
+  ): List<NativeModule> = emptyList()
+
+  override fun createViewManagers(
+    reactContext: ReactApplicationContext
+  ): List<ViewManager<out View, out ReactShadowNode<*>>> =
+    listOf(LQBottomBarViewManager())
+}