expo-secure-keypad-jsi 0.1.2 → 0.1.3

package/android/src/main/java/expo/modules/securekeypadjsi/KeyboardCanvasView.kt

@@ -105,7 +105,7 @@ class KeyboardCanvasView(context: Context) : View(context), ThemedKeypadView {
   private val actionPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.CENTER }
   private val gap = 6f * density
 
-  private var pressedIndex = -1
+  private val pressed = PressedKeyState(this)
 
   init {
     isClickable = true
@@ -226,7 +226,7 @@ class KeyboardCanvasView(context: Context) : View(context), ThemedKeypadView {
 
     for ((index, entry) in keyRects.withIndex()) {
       val (rect, key) = entry
-      val held = pressedHighlight && index == pressedIndex
+      val held = pressedHighlight && index == pressed.index
       keyPaint.color = keyFill(held)
       canvas.drawRoundRect(rect, r, r, keyPaint)
       val label = labelFor(key)
@@ -257,18 +257,15 @@ class KeyboardCanvasView(context: Context) : View(context), ThemedKeypadView {
   override fun onTouchEvent(event: MotionEvent): Boolean {
     when (event.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
-        pressedIndex = keyRects.indexOfFirst { it.first.contains(event.x, event.y) }
-        invalidate()
+        pressed.press(keyRects.indexOfFirst { it.first.contains(event.x, event.y) })
         return true
       }
       MotionEvent.ACTION_CANCEL -> {
-        pressedIndex = -1
-        invalidate()
+        pressed.clear()
         return true
       }
       MotionEvent.ACTION_UP -> {
-        pressedIndex = -1
-        invalidate()
+        pressed.release()
         val key = keyRects.firstOrNull { it.first.contains(event.x, event.y) }?.second
         if (key != null) handleKey(key)
         performClick()
@@ -297,11 +294,14 @@ class KeyboardCanvasView(context: Context) : View(context), ThemedKeypadView {
       ACTION_TOGGLE -> {
         layer = if (layer == Layer.LETTERS) Layer.SYMBOLS else Layer.LETTERS
         shift = ShiftState.OFF
+        // A new key set: the lit index would now point at another key.
+        pressed.clear()
         layoutKeys()
         invalidate()
       }
       ACTION_SYMBOL_PAGE -> {
         layer = if (layer == Layer.SYMBOLS) Layer.SYMBOLS_EXTRA else Layer.SYMBOLS
+        pressed.clear()
         layoutKeys()
         invalidate()
       }

package/android/src/main/java/expo/modules/securekeypadjsi/KeypadCanvasView.kt

@@ -64,7 +64,7 @@ class KeypadCanvasView(context: Context) : View(context), ThemedKeypadView {
   private val actionPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.CENTER }
   private val rect = RectF()
 
-  private var pressedCell = -1
+  private val pressed = PressedKeyState(this)
 
   private var cellW = 0f
   private var cellH = 0f
@@ -114,7 +114,7 @@ class KeypadCanvasView(context: Context) : View(context), ThemedKeypadView {
       rect.set(left, top, left + cellW, top + cellH)
 
       val digit = digitAtCell[cell]
-      val held = pressedHighlight && cell == pressedCell
+      val held = pressedHighlight && cell == pressed.index
       val r = keyCornerRadiusDp * density
       keyPaint.color = keyFill(held)
       // Action cells have no key fill. A held one gets the pressedKeyColor
@@ -158,18 +158,15 @@ class KeypadCanvasView(context: Context) : View(context), ThemedKeypadView {
   override fun onTouchEvent(event: MotionEvent): Boolean {
     when (event.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
-        pressedCell = cellAt(event.x, event.y)
-        invalidate()
+        pressed.press(cellAt(event.x, event.y))
         return true
       }
       MotionEvent.ACTION_CANCEL -> {
-        pressedCell = -1
-        invalidate()
+        pressed.clear()
         return true
       }
       MotionEvent.ACTION_UP -> {
-        pressedCell = -1
-        invalidate()
+        pressed.release()
         val cell = cellAt(event.x, event.y)
         when {
           cell in 0..11 && digitAtCell[cell] >= 0 -> {

package/android/src/main/java/expo/modules/securekeypadjsi/ThemedKeypadView.kt

@@ -7,6 +7,8 @@ import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.RectF
 import android.graphics.Typeface
+import android.os.SystemClock
+import android.view.View
 import com.facebook.react.common.assets.ReactFontManager
 
 /**
@@ -55,6 +57,49 @@ internal fun pressedDim(color: Int, held: Boolean): Int =
     color
   }
 
+/**
+ * Which key is lit, kept lit for at least [MIN_LIT_MS] after the press.
+ *
+ * When DOWN and UP land within one frame — a quick tap, or a touch the system
+ * held back and then released whole — unlighting on UP clears the key before a
+ * frame is drawn. iOS does this at the left and right screen edges (see the
+ * PressedKeyState twin in ios/KeypadCoreGraphicsView.swift); this keeps both
+ * platforms showing the same feedback. [View] guards its own pressed state the
+ * same way with `ViewConfiguration.getPressedStateDuration`.
+ */
+internal class PressedKeyState(private val view: View) {
+  companion object {
+    /** About one ordinary tap, so an edge tap reads like one in the middle. */
+    const val MIN_LIT_MS = 100L
+  }
+
+  var index = -1
+    private set
+  private var litAt = 0L
+  private val unlight = Runnable { clear() }
+
+  fun press(index: Int) {
+    view.removeCallbacks(unlight)
+    this.index = index
+    litAt = SystemClock.uptimeMillis()
+    view.invalidate()
+  }
+
+  /** Finger lifted: unlit now, or once the key has been lit for [MIN_LIT_MS]. */
+  fun release() {
+    view.removeCallbacks(unlight)
+    val remaining = MIN_LIT_MS - (SystemClock.uptimeMillis() - litAt)
+    if (index >= 0 && remaining > 0) view.postDelayed(unlight, remaining) else clear()
+  }
+
+  /** Unlit at once: a cancelled touch, or a key set that changed under it. */
+  fun clear() {
+    view.removeCallbacks(unlight)
+    index = -1
+    view.invalidate()
+  }
+}
+
 /** Key fill: [ThemedKeypadView.pressedKeyColor] while held when set, else the 70% dim. */
 internal fun ThemedKeypadView.keyFill(held: Boolean): Int =
   if (held) pressedKeyColor ?: pressedDim(keyColor, true) else keyColor

package/ios/KeyboardCoreGraphicsView.swift

@@ -82,7 +82,7 @@ final class KeyboardCoreGraphicsView: UIView, ThemableKeypadView {
   private var dummySlots = [Int](repeating: -1, count: 5)
 
   private var keyRects: [(CGRect, Key)] = []
-  private var pressedIndex = -1
+  private lazy var pressed = PressedKeyState(view: self)
   private let gap: CGFloat = 6
 
   override init(frame: CGRect) {
@@ -205,7 +205,7 @@ final class KeyboardCoreGraphicsView: UIView, ThemableKeypadView {
     for (index, entry) in keyRects.enumerated() {
       let (frame, key) = entry
       let path = UIBezierPath(roundedRect: frame, cornerRadius: keyCornerRadius)
-      keyFill(pressedHighlight && index == pressedIndex).setFill()
+      keyFill(pressedHighlight && index == pressed.index).setFill()
       path.fill()
       if let label = labelFor(key) {
         let isChar = key.code >= 0
@@ -231,18 +231,15 @@ final class KeyboardCoreGraphicsView: UIView, ThemableKeypadView {
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
     guard let touch = touches.first else { return }
     let p = touch.location(in: self)
-    pressedIndex = keyRects.firstIndex(where: { $0.0.contains(p) }) ?? -1
-    setNeedsDisplay()
+    pressed.press(keyRects.firstIndex(where: { $0.0.contains(p) }) ?? -1)
   }
 
   override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
-    pressedIndex = -1
-    setNeedsDisplay()
+    pressed.clear()
   }
 
   override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
-    pressedIndex = -1
-    setNeedsDisplay()
+    pressed.release()
     guard let touch = touches.first else { return }
     let p = touch.location(in: self)
     guard let key = keyRects.first(where: { $0.0.contains(p) })?.1 else { return }
@@ -271,10 +268,13 @@ final class KeyboardCoreGraphicsView: UIView, ThemableKeypadView {
     case Code.toggle:
       layer_ = layer_ == .letters ? .symbols : .letters
       shift = .off
+      // A new key set: the lit index would now point at another key.
+      pressed.clear()
       layoutKeys()
       setNeedsDisplay()
     case Code.symbolPage:
       layer_ = layer_ == .symbols ? .symbolsExtra : .symbols
+      pressed.clear()
       layoutKeys()
       setNeedsDisplay()
     default:

package/ios/KeypadCoreGraphicsView.swift

@@ -38,7 +38,7 @@ final class KeypadCoreGraphicsView: UIView, ThemableKeypadView {
   private let clearCell = 9
   private let backspaceCell = 11
   private var digitAtCell = [Int](repeating: -1, count: 12)
-  private var pressedCell = -1
+  private lazy var pressed = PressedKeyState(view: self)
   private let gap: CGFloat = 12
 
   override init(frame: CGRect) {
@@ -80,7 +80,7 @@ final class KeypadCoreGraphicsView: UIView, ThemableKeypadView {
       let row = CGFloat(cell / 3)
       let frame = CGRect(x: col * (cw + gap), y: row * (ch + gap), width: cw, height: ch)
       let digit = digitAtCell[cell]
-      let held = pressedHighlight && cell == pressedCell
+      let held = pressedHighlight && cell == pressed.index
       let path = UIBezierPath(roundedRect: frame, cornerRadius: keyCornerRadius)
       // Action cells have no key fill. A held one gets the pressedKeyColor fill
       // when the theme sets it; otherwise the glyph itself carries the dim.
@@ -116,18 +116,15 @@ final class KeypadCoreGraphicsView: UIView, ThemableKeypadView {
 
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
     guard let touch = touches.first else { return }
-    pressedCell = cellAt(touch.location(in: self))
-    setNeedsDisplay()
+    pressed.press(cellAt(touch.location(in: self)))
   }
 
   override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
-    pressedCell = -1
-    setNeedsDisplay()
+    pressed.clear()
   }
 
   override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
-    pressedCell = -1
-    setNeedsDisplay()
+    pressed.release()
     guard let touch = touches.first else { return }
     let cell = cellAt(touch.location(in: self))
     guard cell >= 0, cell < 12 else { return }
@@ -168,6 +165,52 @@ protocol ThemableKeypadView: AnyObject {
 /// shows, and the fallback whenever the native CSPRNG layout is unavailable.
 let identityDigitLayout = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
 
+/// Which key is lit, kept lit for at least `minimumLit` after the press.
+///
+/// Near the left and right screen edges iOS holds a touch back while it decides
+/// whether a system edge gesture is starting, and on a quick tap releases
+/// touchesBegan and touchesEnded together. Unlighting on touchesEnded then
+/// clears the key before a frame is drawn, which is why edge keys (and the edge
+/// half of the wide ⌫) showed no press colour, or only sometimes. A key that is
+/// held longer still lights late, once iOS lets the touch through; only the
+/// host app can opt its edges out of system gestures.
+final class PressedKeyState {
+  /// About one ordinary tap, so an edge tap reads like one in the middle.
+  static let minimumLit: CFTimeInterval = 0.1
+
+  private(set) var index = -1
+  private var litAt: CFTimeInterval = 0
+  private var pendingUnlight: DispatchWorkItem?
+  private weak var view: UIView?
+
+  init(view: UIView) { self.view = view }
+
+  func press(_ index: Int) {
+    pendingUnlight?.cancel()
+    self.index = index
+    litAt = CACurrentMediaTime()
+    view?.setNeedsDisplay()
+  }
+
+  /// Finger lifted: unlit now, or once the key has been lit for `minimumLit`.
+  func release() {
+    let remaining = Self.minimumLit - (CACurrentMediaTime() - litAt)
+    guard index >= 0, remaining > 0 else { clear(); return }
+    pendingUnlight?.cancel()
+    let work = DispatchWorkItem { [weak self] in self?.clear() }
+    pendingUnlight = work
+    DispatchQueue.main.asyncAfter(deadline: .now() + remaining, execute: work)
+  }
+
+  /// Unlit at once: a cancelled touch, or a key set that changed under it.
+  func clear() {
+    pendingUnlight?.cancel()
+    pendingUnlight = nil
+    index = -1
+    view?.setNeedsDisplay()
+  }
+}
+
 extension ThemableKeypadView {
   /// Key fill: `pressedKeyColor` while held when set, else the 70% dim.
   func keyFill(_ held: Bool) -> UIColor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-secure-keypad-jsi",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Secure PIN / password keypad for Expo (New Architecture). Natively rendered shuffled keys, the entered value never enters the JS runtime, mlock'd C++ buffer, OpenSSL RSA-OAEP ciphertext only. Screen-capture blocking and device integrity are the host app's job.",
   "main": "build/index.js",
   "types": "build/index.d.ts",