react-native-ensys-camera-x 1.0.7

package/android/src/main/java/com/customcamera/DrawingView.kt

@@ -0,0 +1,214 @@
+package com.customcamera
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.view.MotionEvent
+import android.view.View
+
+/**
+ * A fully native freehand drawing surface built ONLY on the platform Canvas /
+ * Path / Paint APIs already available in the Android SDK — no third-party
+ * drawing library or plugin is involved.
+ *
+ * Design goals:
+ *  • Smooth, low-latency strokes: each in-progress stroke is drawn with a
+ *    quadratic Bézier smoothing between successive touch points so the line
+ *    follows the finger without visible segmentation.
+ *  • Transform-agnostic: this view is added as a CHILD of the PhotoEditorView
+ *    (a RelativeLayout) and sized to MATCH_PARENT, so it inherits the exact same
+ *    position, scale (CENTER_CROP / FIT_CENTER), crop, rotation and any parent
+ *    transform as the photo underneath. Strokes are stored in this view's own
+ *    coordinate space, so they stay locked to the image through zoom / pan /
+ *    crop / rotate — the parent renders both together.
+ *  • Export-ready: because the strokes live in the view hierarchy, the editor's
+ *    existing "render the whole PhotoEditorView to a Canvas" export path merges
+ *    every stroke into the exported / uploaded / sent bitmap automatically.
+ *
+ * Undo / redo / clear operate on completed strokes. While [drawingEnabled] is
+ * false the view ignores touches (letting the underlying editor gestures work);
+ * previously drawn strokes are always rendered.
+ */
+class DrawingView(context: Context) : View(context) {
+
+  /** One completed freehand stroke: its path plus the paint that rendered it. */
+  internal class Stroke(val path: Path, val paint: Paint)
+
+  /**
+   * Opaque, immutable capture of the committed + undone stroke stacks. Used to
+   * revert an entire drawing session in one shot (e.g. the brush-tool Cross)
+   * back to exactly the state that existed when the session started, without
+   * touching anything else in the editor. Committed strokes are immutable once
+   * finished, so holding shallow copies of the two lists is sufficient.
+   */
+  class Snapshot internal constructor(
+    internal val strokes: List<Stroke>,
+    internal val undoneStrokes: List<Stroke>
+  )
+
+  private val strokes = ArrayList<Stroke>()
+  private val undoneStrokes = ArrayList<Stroke>()
+
+  // The stroke currently being drawn (between ACTION_DOWN and ACTION_UP).
+  private var activePath: Path? = null
+  private var activePaint: Paint? = null
+  private var lastX = 0f
+  private var lastY = 0f
+  private var hasMoved = false
+
+  /** Touch slop below which a move is treated as noise (keeps dots crisp). */
+  private val touchTolerance = 2f
+
+  var brushColor: Int = Color.RED
+  /** Stroke width in pixels. */
+  var brushSize: Float = 12f
+
+  /** When false, the view is display-only and passes touches through. */
+  var drawingEnabled: Boolean = false
+
+  /** Invoked whenever the set of committed strokes changes (draw/undo/redo/clear). */
+  var onStrokesChanged: (() -> Unit)? = null
+
+  init {
+    // Transparent so the photo (and any filter / stickers / text) shows through.
+    setBackgroundColor(Color.TRANSPARENT)
+    // Software layer keeps anti-aliased Path rendering identical between the live
+    // preview and the offscreen export canvas used by the editor.
+    setLayerType(LAYER_TYPE_SOFTWARE, null)
+    isClickable = true
+  }
+
+  private fun newPaint(): Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    color = brushColor
+    style = Paint.Style.STROKE
+    strokeJoin = Paint.Join.ROUND
+    strokeCap = Paint.Cap.ROUND
+    strokeWidth = brushSize
+    isDither = true
+  }
+
+  fun hasStrokes(): Boolean = strokes.isNotEmpty()
+
+  fun canUndo(): Boolean = strokes.isNotEmpty()
+
+  fun canRedo(): Boolean = undoneStrokes.isNotEmpty()
+
+  fun undo() {
+    if (strokes.isEmpty()) return
+    undoneStrokes.add(strokes.removeAt(strokes.size - 1))
+    invalidate()
+    onStrokesChanged?.invoke()
+  }
+
+  fun redo() {
+    if (undoneStrokes.isEmpty()) return
+    strokes.add(undoneStrokes.removeAt(undoneStrokes.size - 1))
+    invalidate()
+    onStrokesChanged?.invoke()
+  }
+
+  fun clear() {
+    if (strokes.isEmpty() && undoneStrokes.isEmpty() && activePath == null) return
+    strokes.clear()
+    undoneStrokes.clear()
+    activePath = null
+    activePaint = null
+    invalidate()
+    onStrokesChanged?.invoke()
+  }
+
+  /**
+   * Captures the current committed + undone stroke stacks so they can later be
+   * put back verbatim with [restore]. Take this when a drawing session begins to
+   * support a cancel action that reverts only that session's strokes.
+   */
+  fun snapshot(): Snapshot = Snapshot(ArrayList(strokes), ArrayList(undoneStrokes))
+
+  /**
+   * Restores a previously captured [snapshot], replacing the current strokes with
+   * exactly those it holds and dropping any in-progress stroke. Fires
+   * [onStrokesChanged] so dependent state (edit flags, thumbnails, undo/redo
+   * button enablement) refreshes to match.
+   */
+  fun restore(snapshot: Snapshot) {
+    strokes.clear()
+    strokes.addAll(snapshot.strokes)
+    undoneStrokes.clear()
+    undoneStrokes.addAll(snapshot.undoneStrokes)
+    activePath = null
+    activePaint = null
+    invalidate()
+    onStrokesChanged?.invoke()
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    for (stroke in strokes) {
+      canvas.drawPath(stroke.path, stroke.paint)
+    }
+    val ap = activePath
+    val apaint = activePaint
+    if (ap != null && apaint != null) {
+      canvas.drawPath(ap, apaint)
+    }
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (!drawingEnabled) return false
+
+    val x = event.x
+    val y = event.y
+
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        // Starting a new stroke invalidates the redo history, matching the
+        // conventional undo/redo contract.
+        undoneStrokes.clear()
+        val path = Path().apply { moveTo(x, y) }
+        activePath = path
+        activePaint = newPaint()
+        lastX = x
+        lastY = y
+        hasMoved = false
+        invalidate()
+        return true
+      }
+      MotionEvent.ACTION_MOVE -> {
+        val path = activePath ?: return true
+        val dx = Math.abs(x - lastX)
+        val dy = Math.abs(y - lastY)
+        if (dx >= touchTolerance || dy >= touchTolerance) {
+          // Quadratic smoothing: control point at the previous sample, endpoint
+          // at the midpoint, so the curve stays continuous and low-latency.
+          path.quadTo(lastX, lastY, (x + lastX) / 2f, (y + lastY) / 2f)
+          lastX = x
+          lastY = y
+          hasMoved = true
+          invalidate()
+        }
+        return true
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        val path = activePath
+        val paint = activePaint
+        if (path != null && paint != null) {
+          if (!hasMoved) {
+            // A tap with no movement: draw a dot so single taps still mark.
+            path.lineTo(x, y)
+          } else {
+            path.lineTo(lastX, lastY)
+          }
+          strokes.add(Stroke(path, paint))
+          onStrokesChanged?.invoke()
+        }
+        activePath = null
+        activePaint = null
+        invalidate()
+        return true
+      }
+    }
+    return false
+  }
+}

package/android/src/main/java/com/customcamera/EmojiPickerData.kt

@@ -0,0 +1,228 @@
+package com.customcamera
+
+import android.graphics.Paint
+
+/**
+ * Full categorized emoji set for the preview editor's emoji picker.
+ *
+ * Categories follow the standard Unicode/CLDR grouping used by modern keyboards and
+ * messaging apps (Smileys, People, Animals & Nature, Food & Drink, Activities,
+ * Travel & Places, Objects, Symbols, Flags).
+ *
+ * Device compatibility: the raw lists include emoji up to recent Unicode versions, but
+ * the system emoji font on older devices (minSdk 24 / Android 7) lacks many of them and
+ * would render tofu boxes. [supportedCategories] therefore filters every glyph through
+ * [Paint.hasGlyph] (API 23+) once per process and caches the result, so each device shows
+ * exactly the set it can actually render — no tofu, no per-open recompute cost.
+ */
+internal object EmojiPickerData {
+
+  data class Category(val icon: String, val label: String, val emojis: List<String>)
+
+  val categories: List<Category> = listOf(
+    Category(
+      icon = "😀", // 😀
+      label = "Smileys",
+      emojis = listOf(
+        "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃",
+        "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙",
+        "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭", "🤫", "🤔",
+        "🤐", "🤨", "😐", "😑", "😶", "😏", "😒", "🙄", "😬", "🤥",
+        "😌", "😔", "😪", "🤤", "😴", "😷", "🤒", "🤕", "🤢", "🤮",
+        "🤧", "🥵", "🥶", "🥴", "😵", "🤯", "🤠", "🥳", "😎", "🤓",
+        "🧐", "😕", "😟", "🙁", "☹️", "😮", "😯", "😲", "😳", "🥺",
+        "😦", "😧", "😨", "😰", "😥", "😢", "😭", "😱", "😖", "😣",
+        "😞", "😓", "😩", "😫", "🥱", "😤", "😡", "😠", "🤬", "😈",
+        "👿", "💀", "☠️", "💩", "🤡", "👹", "👺", "👻", "👽", "👾",
+        "🤖", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾",
+        "💋", "💌", "💘", "💝", "💖", "💗", "💓", "💞", "💕", "💟",
+        "❣️", "💔", "❤️", "🧡", "💛", "💚", "💙", "💜", "🤎", "🖤",
+        "🤍", "💯", "💢", "💥", "💫", "💦", "💨", "💣", "💬", "💭", "💤"
+      )
+    ),
+    Category(
+      icon = "👋", // 👋
+      label = "People",
+      emojis = listOf(
+        "👋", "🤚", "🖐️", "✋", "🖖", "👌", "🤏", "✌️", "🤞", "🤟",
+        "🤘", "🤙", "👈", "👉", "👆", "👇", "☝️", "👍", "👎", "✊",
+        "👊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🤝", "🙏", "✍️",
+        "💅", "🤳", "💪", "🦾", "🦵", "🦶", "👂", "👃", "🧠", "🦷",
+        "🦴", "👀", "👁️", "👅", "👄", "👶", "🧒", "👦", "👧", "🧑",
+        "👱", "👨", "🧔", "👩", "🧓", "👴", "👵", "🙍", "🙎", "🙅",
+        "🙆", "💁", "🙋", "🧏", "🙇", "🤦", "🤷", "👮", "🕵️", "💂",
+        "👷", "🤴", "👸", "👳", "👲", "🧕", "🤵", "👰", "🤰", "🤱",
+        "👼", "🎅", "🤶", "🦸", "🦹", "🧙", "🧚", "🧛", "🧜", "🧝",
+        "🧞", "🧟", "💆", "💇", "🚶", "🧍", "🧎", "🏃", "💃", "🕺",
+        "👯", "🧖", "🧗", "👫", "👬", "👭", "💏", "💑", "👪"
+      )
+    ),
+    Category(
+      icon = "🐻", // 🐻
+      label = "Animals & Nature",
+      emojis = listOf(
+        "🐵", "🐒", "🦍", "🦧", "🐶", "🐕", "🦮", "🐩", "🐺", "🦊",
+        "🦝", "🐱", "🐈", "🦁", "🐯", "🐅", "🐆", "🐴", "🐎", "🦄",
+        "🦓", "🦌", "🐮", "🐂", "🐃", "🐄", "🐷", "🐖", "🐗", "🐽",
+        "🐏", "🐑", "🐐", "🐪", "🐫", "🦙", "🦒", "🐘", "🦏", "🦛",
+        "🐭", "🐁", "🐀", "🐹", "🐰", "🐇", "🐿️", "🦔", "🦇", "🐻",
+        "🐨", "🐼", "🦥", "🦦", "🦨", "🦘", "🦡", "🐾", "🦃", "🐔",
+        "🐓", "🐣", "🐤", "🐥", "🐦", "🐧", "🕊️", "🦅", "🦆", "🦢",
+        "🦉", "🦩", "🦚", "🦜", "🐸", "🐊", "🐢", "🦎", "🐍", "🐲",
+        "🐉", "🦕", "🦖", "🐳", "🐋", "🐬", "🐟", "🐠", "🐡", "🦈",
+        "🐙", "🐚", "🐌", "🦋", "🐛", "🐜", "🐝", "🐞", "🦗", "🕷️",
+        "🕸️", "🦂", "🦟", "💐", "🌸", "💮", "🏵️", "🌹", "🥀", "🌺",
+        "🌻", "🌼", "🌷", "🌱", "🌲", "🌳", "🌴", "🌵", "🌾", "🌿",
+        "☘️", "🍀", "🍁", "🍂", "🍃", "🌍", "🌎", "🌏", "🌕", "🌖",
+        "🌗", "🌘", "🌑", "🌒", "🌓", "🌔", "🌙", "🌚", "🌛", "🌜",
+        "☀️", "🌝", "🌞", "⭐", "🌟", "🌠", "☁️", "⛅", "🌈", "☂️",
+        "☔", "⚡", "❄️", "☃️", "⛄", "🔥", "💧", "🌊"
+      )
+    ),
+    Category(
+      icon = "🍔", // 🍔
+      label = "Food & Drink",
+      emojis = listOf(
+        "🍇", "🍈", "🍉", "🍊", "🍋", "🍌", "🍍", "🥭", "🍎", "🍏",
+        "🍐", "🍑", "🍒", "🍓", "🥝", "🍅", "🥥", "🥑", "🍆", "🥔",
+        "🥕", "🌽", "🌶️", "🥒", "🥬", "🥦", "🧄", "🧅", "🍄", "🥜",
+        "🌰", "🍞", "🥐", "🥖", "🥨", "🥯", "🥞", "🧇", "🧀", "🍖",
+        "🍗", "🥩", "🥓", "🍔", "🍟", "🍕", "🌭", "🥪", "🌮", "🌯",
+        "🥙", "🧆", "🥚", "🍳", "🥘", "🍲", "🥣", "🥗", "🍿", "🧈",
+        "🧂", "🥫", "🍱", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍠",
+        "🍢", "🍣", "🍤", "🍥", "🥮", "🍡", "🥟", "🥠", "🥡", "🦀",
+        "🦞", "🦐", "🦑", "🦪", "🍦", "🍧", "🍨", "🍩", "🍪", "🎂",
+        "🍰", "🧁", "🥧", "🍫", "🍬", "🍭", "🍮", "🍯", "🍼", "🥛",
+        "☕", "🍵", "🍶", "🍾", "🍷", "🍸", "🍹", "🍺", "🍻", "🥂",
+        "🥃", "🥤", "🧃", "🧉", "🧊", "🥢", "🍽️", "🍴", "🥄"
+      )
+    ),
+    Category(
+      icon = "⚽", // ⚽
+      label = "Activities",
+      emojis = listOf(
+        "⚽", "🏀", "🏈", "⚾", "🥎", "🎾", "🏐", "🏉", "🥏", "🎱",
+        "🏓", "🏸", "🏒", "🏑", "🥍", "🏏", "🥅", "⛳", "🏹", "🎣",
+        "🤿", "🥊", "🥋", "🎽", "🛹", "🛷", "⛸️", "🥌", "🎿", "⛷️",
+        "🏂", "🏋️", "🤼", "🤸", "⛹️", "🤺", "🤾", "🏌️", "🏇", "🧘",
+        "🏄", "🏊", "🤽", "🚣", "🧗", "🚵", "🚴", "🏆", "🥇", "🥈",
+        "🥉", "🏅", "🎖️", "🎗️", "🎫", "🎟️", "🎪", "🤹", "🎭", "🎨",
+        "🎬", "🎤", "🎧", "🎼", "🎹", "🥁", "🎷", "🎺", "🎸", "🪕",
+        "🎻", "🎲", "♟️", "🎯", "🎳", "🎮", "🎰", "🧩", "🎉", "🎊",
+        "🎈", "🎁", "🎀", "🎏", "🎐", "🧨", "✨", "🎃", "🎄", "🎋", "🎍"
+      )
+    ),
+    Category(
+      icon = "🚗", // 🚗
+      label = "Travel & Places",
+      emojis = listOf(
+        "🚗", "🚕", "🚙", "🚌", "🚎", "🏎️", "🚓", "🚑", "🚒", "🚐",
+        "🚚", "🚛", "🚜", "🛴", "🚲", "🛵", "🏍️", "🛺", "🚨", "🚔",
+        "🚍", "🚘", "🚖", "🚡", "🚠", "🚟", "🚃", "🚋", "🚞", "🚝",
+        "🚄", "🚅", "🚈", "🚂", "🚆", "🚇", "🚊", "🚉", "✈️", "🛫",
+        "🛬", "🛩️", "💺", "🛰️", "🚀", "🛸", "🚁", "🛶", "⛵", "🚤",
+        "🛥️", "🛳️", "⛴️", "🚢", "⚓", "⛽", "🚧", "🚦", "🚥", "🚏",
+        "🗺️", "🗿", "🗽", "🗼", "🏰", "🏯", "🏟️", "🎡", "🎢", "🎠",
+        "⛲", "⛱️", "🏖️", "🏝️", "🏜️", "🌋", "⛰️", "🏔️", "🗻", "🏕️",
+        "⛺", "🏠", "🏡", "🏘️", "🏚️", "🏗️", "🏭", "🏢", "🏬", "🏣",
+        "🏤", "🏥", "🏦", "🏨", "🏪", "🏫", "🏩", "💒", "🏛️", "⛪",
+        "🕌", "🕍", "🛕", "🕋", "⛩️", "🛤️", "🛣️", "🎑", "🏞️", "🌅",
+        "🌄", "🎇", "🎆", "🌇", "🌆", "🏙️", "🌃", "🌌", "🌉", "🌁"
+      )
+    ),
+    Category(
+      icon = "💡", // 💡
+      label = "Objects",
+      emojis = listOf(
+        "⌚", "📱", "📲", "💻", "⌨️", "🖥️", "🖨️", "🖱️", "🕹️", "💽",
+        "💾", "💿", "📀", "📼", "📷", "📸", "📹", "🎥", "📽️", "🎞️",
+        "📞", "☎️", "📟", "📠", "📺", "📻", "🎙️", "🧭", "⏱️", "⏲️",
+        "⏰", "🕰️", "⌛", "⏳", "📡", "🔋", "🔌", "💡", "🔦", "🕯️",
+        "🧯", "💸", "💵", "💴", "💶", "💷", "💰", "💳", "💎", "⚖️",
+        "🧰", "🔧", "🔨", "⚒️", "🛠️", "⛏️", "🔩", "⚙️", "🧱", "⛓️",
+        "🧲", "🔫", "🪓", "🔪", "🗡️", "⚔️", "🛡️", "🏺", "🔮", "📿",
+        "🧿", "💈", "⚗️", "🔭", "🔬", "💊", "💉", "🩹", "🩺", "🌡️",
+        "🧬", "🦠", "🧫", "🧪", "🧹", "🧺", "🧻", "🚽", "🚿", "🛁",
+        "🧼", "🪒", "🧽", "🧴", "🛎️", "🔑", "🗝️", "🚪", "🪑", "🛋️",
+        "🛏️", "🧸", "🖼️", "🛍️", "🛒", "✉️", "📩", "📨", "📧", "📥",
+        "📤", "📦", "🏷️", "📪", "📫", "📬", "📮", "📜", "📃", "📄",
+        "📑", "🧾", "📊", "📈", "📉", "🗒️", "🗓️", "📆", "📅", "🗑️",
+        "📇", "🗃️", "🗳️", "🗄️", "📋", "📁", "📂", "🗂️", "🗞️", "📰",
+        "📓", "📔", "📒", "📕", "📗", "📘", "📙", "📚", "📖", "🔖",
+        "🧷", "🔗", "📎", "🖇️", "📐", "📏", "🧮", "📌", "📍", "✂️",
+        "🖊️", "🖋️", "✒️", "🖌️", "🖍️", "📝", "✏️", "🔍", "🔎", "🔏",
+        "🔐", "🔒", "🔓"
+      )
+    ),
+    Category(
+      icon = "🔣", // 🔣
+      label = "Symbols",
+      emojis = listOf(
+        "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑",
+        "♒", "♓", "⛎", "🔀", "🔁", "🔂", "▶️", "⏩", "◀️", "⏪",
+        "🔼", "⏫", "🔽", "⏬", "⏸️", "⏹️", "⏺️", "⏏️", "🎦", "🔅",
+        "🔆", "📶", "📳", "📴", "♀️", "♂️", "✖️", "➕", "➖", "➗",
+        "‼️", "⁉️", "❓", "❔", "❕", "❗", "〰️", "💱", "💲", "⚕️",
+        "♻️", "⚜️", "🔱", "📛", "🔰", "⭕", "✅", "☑️", "✔️", "❌",
+        "❎", "➰", "➿", "〽️", "✳️", "✴️", "❇️", "©️", "®️", "™️",
+        "🔟", "🔠", "🔡", "🔢", "🔣", "🔤", "🅰️", "🆎", "🅱️", "🆑",
+        "🆒", "🆓", "ℹ️", "🆔", "Ⓜ️", "🆕", "🆖", "🅾️", "🆗", "🅿️",
+        "🆘", "🆙", "🆚", "🔴", "🟠", "🟡", "🟢", "🔵", "🟣", "🟤",
+        "⚫", "⚪", "🟥", "🟧", "🟨", "🟩", "🟦", "🟪", "🟫", "⬛",
+        "⬜", "🔶", "🔷", "🔸", "🔹", "🔺", "🔻", "💠", "🔘", "🔳",
+        "🔲", "♠️", "♥️", "♦️", "♣️", "🃏", "🀄", "🎴", "🕐", "🕑",
+        "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "🕛"
+      )
+    ),
+    Category(
+      icon = "🏁", // 🏁
+      label = "Flags",
+      emojis = listOf(
+        "🏁", "🚩", "🎌", "🏴", "🏳️", "🏳️‍🌈", "🏴‍☠️",
+        "🇵🇰", "🇺🇸", "🇬🇧", "🇨🇦", "🇦🇺", "🇳🇿", "🇩🇪", "🇫🇷", "🇮🇹",
+        "🇪🇸", "🇵🇹", "🇳🇱", "🇧🇪", "🇨🇭", "🇦🇹", "🇸🇪", "🇳🇴", "🇩🇰",
+        "🇫🇮", "🇮🇪", "🇵🇱", "🇨🇿", "🇬🇷", "🇷🇺", "🇺🇦", "🇹🇷", "🇮🇳",
+        "🇧🇩", "🇱🇰", "🇳🇵", "🇦🇫", "🇮🇷", "🇮🇶", "🇨🇳", "🇯🇵", "🇰🇷",
+        "🇹🇭", "🇻🇳", "🇵🇭", "🇮🇩", "🇲🇾", "🇸🇬", "🇦🇪", "🇸🇦", "🇶🇦",
+        "🇰🇼", "🇧🇭", "🇴🇲", "🇯🇴", "🇱🇧", "🇪🇬", "🇿🇦", "🇳🇬", "🇰🇪",
+        "🇪🇹", "🇲🇦", "🇩🇿", "🇹🇳", "🇧🇷", "🇦🇷", "🇨🇱", "🇨🇴", "🇵🇪",
+        "🇻🇪", "🇲🇽", "🇺🇾", "🇺🇳", "🇪🇺"
+      )
+    )
+  )
+
+  @Volatile
+  private var supportedCache: List<Category>? = null
+
+  fun invalidateCache() {
+    supportedCache = null
+  }
+
+  /**
+   * Categories filtered to the emoji this device's font can actually render.
+   * Computed once per process (a single [Paint.hasGlyph] sweep) and cached.
+   */
+  fun supportedCategories(): List<Category> {
+    supportedCache?.let { return it }
+    synchronized(this) {
+      supportedCache?.let { return it }
+      val paint = Paint()
+      val filtered = categories
+        .map { cat -> 
+          val labelKey = "category" + cat.label.replace(" & ", "And")
+          val label = Localization.getString(labelKey, cat.label)
+          Category(cat.icon, label, cat.emojis.filter { paint.hasGlyph(it) }) 
+        }
+        .filter { it.emojis.isNotEmpty() }
+      val result = if (filtered.isEmpty()) {
+        categories.map { cat ->
+          val labelKey = "category" + cat.label.replace(" & ", "And")
+          val label = Localization.getString(labelKey, cat.label)
+          Category(cat.icon, label, cat.emojis)
+        }
+      } else filtered
+      supportedCache = result
+      return result
+    }
+  }
+}

package/android/src/main/java/com/customcamera/FilterStripAdapter.kt

@@ -0,0 +1,158 @@
+package com.customcamera
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.ColorMatrix
+import android.graphics.ColorMatrixColorFilter
+import android.graphics.Paint
+import android.graphics.Rect
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import ja.burhanrashid52.photoeditor.PhotoFilter
+
+/**
+ * Horizontal WhatsApp-style filter strip rendered inside the camera screen's EXISTING media strip
+ * (`RecyclerView`) while Filter Selection Mode is active. Each tile is the current camera frame
+ * rendered through one [ColorMatrix] with its name beneath it.
+ *
+ * The FIRST option — "Current/Original" (filter == null) — is selected by default and never applies
+ * a filter, so the live viewfinder keeps showing through. The [matrix]es come from the same
+ * `MediaPreviewEditor.availableFilterOptions()` source the editor's own picker uses, so a filter
+ * chosen here matches the preview and the exported pixels exactly.
+ */
+class FilterStripAdapter(
+  context: Context,
+  private val options: List<FilterItem>,
+  private var selectedFilter: PhotoFilter?,
+  private val onFilterSelected: (PhotoFilter?) -> Unit,
+  private val thumbSource: () -> Bitmap?
+) : RecyclerView.Adapter<FilterStripAdapter.FilterViewHolder>() {
+
+  data class FilterItem(
+    val name: String,
+    val filter: PhotoFilter?,
+    val matrix: ColorMatrix
+  )
+
+  private val theme = CameraTheme.get(context)
+  private val tileSize: Int = context.dp(52)
+  private val labelColor: Int = Color.WHITE
+  // Selected tile ring = the host brand `primary` (was a hardcoded #4A56FF); the unselected ring
+  // stays a faint white hairline over the dark filter tiles, host-overridable via the theme.
+  private val selectedBorder: Int = theme.colors.primary
+  private val normalBorder: Int = theme.componentColor("editor", "filterInactiveBorder", 0x55FFFFFF)
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FilterViewHolder =
+    FilterViewHolder(parent, tileSize, labelColor, selectedBorder, normalBorder)
+
+  override fun getItemCount(): Int = options.size
+
+  override fun onBindViewHolder(holder: FilterViewHolder, position: Int) {
+    val item = options.getOrNull(position) ?: return
+    holder.bind(item, selected = item.filter == selectedFilter, thumbSource)
+    holder.itemView.setOnClickListener { onFilterSelected(item.filter) }
+  }
+
+  /** Re-point the highlight at [filter] and redraw the strip. */
+  fun setSelected(filter: PhotoFilter?) {
+    val prev = selectedFilter
+    selectedFilter = filter
+    if (prev != filter) notifyDataSetChanged()
+  }
+
+  /** One tappable tile: square preview + name label, with a selection ring. */
+  class FilterViewHolder(
+    parent: ViewGroup,
+    private val tileSize: Int,
+    private val labelColor: Int,
+    private val selectedBorder: Int,
+    private val normalBorder: Int
+  ) : RecyclerView.ViewHolder(
+    LinearLayout(parent.context).apply {
+      orientation = LinearLayout.VERTICAL
+      gravity = Gravity.CENTER_HORIZONTAL
+      layoutParams = RecyclerView.LayoutParams(
+        parent.context.dp(76),
+        ViewGroup.LayoutParams.MATCH_PARENT
+      )
+    }
+  ) {
+    private val container = FrameLayout(itemView.context).apply {
+      layoutParams = LinearLayout.LayoutParams(tileSize, tileSize)
+    }
+    private val image = ImageView(itemView.context).apply {
+      scaleType = ImageView.ScaleType.CENTER_CROP
+      setLayerType(View.LAYER_TYPE_SOFTWARE, null)
+    }
+    private val label = TextView(itemView.context).apply {
+      gravity = Gravity.CENTER
+      setTextColor(labelColor)
+      textSize = 11f
+      maxLines = 1
+      includeFontPadding = true
+    }
+
+    init {
+      container.addView(
+        image,
+        FrameLayout.LayoutParams(
+          ViewGroup.LayoutParams.MATCH_PARENT,
+          ViewGroup.LayoutParams.MATCH_PARENT
+        )
+      )
+      (itemView as LinearLayout).apply {
+        addView(container, LinearLayout.LayoutParams(tileSize, tileSize))
+        addView(
+          label,
+          LinearLayout.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            ViewGroup.LayoutParams.WRAP_CONTENT
+          ).apply { topMargin = itemView.context.dp(4) }
+        )
+      }
+    }
+
+    private fun border(selected: Boolean): GradientDrawable =
+      GradientDrawable().apply {
+        setColor(Color.TRANSPARENT)
+        cornerRadius = itemView.context.dp(10).toFloat()
+        setStroke(
+          itemView.context.dp(if (selected) 3 else 1),
+          if (selected) selectedBorder else normalBorder
+        )
+      }
+
+    fun bind(item: FilterItem, selected: Boolean, thumbSource: () -> Bitmap?) {
+      container.background = border(selected)
+      label.text = item.name
+      container.clipToOutline = true
+      container.outlineProvider = android.view.ViewOutlineProvider.BACKGROUND
+      val src = thumbSource()
+      image.setImageBitmap(src?.let { renderFilteredTile(it, item.matrix) })
+    }
+
+    /** Center-crop [src] to a square and push it through [matrix]. */
+    private fun renderFilteredTile(src: Bitmap, matrix: ColorMatrix): Bitmap {
+      val side = tileSize
+      val out = Bitmap.createBitmap(side, side, Bitmap.Config.ARGB_8888)
+      val canvas = Canvas(out)
+      val paint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.FILTER_BITMAP_FLAG).apply {
+        colorFilter = ColorMatrixColorFilter(ColorMatrix(matrix))
+      }
+      val crop = minOf(src.width, src.height).coerceAtLeast(1)
+      val left = (src.width - crop) / 2
+      val top = (src.height - crop) / 2
+      canvas.drawBitmap(src, Rect(left, top, left + crop, top + crop), Rect(0, 0, side, side), paint)
+      return out
+    }
+  }
+}