Make callback run on the JS thread

Expensify · Jan 17, 2024 · 4edc9dd · 4edc9dd
1 parent ea72d4b
commit 4edc9dd
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -207,17 +207,19 @@ function MagicCodeInput(props) {
      * Tap gesture configuration, updates the indexes of the
      * currently focused input.
      */
-    const tapGesture = Gesture.Tap().onBegin((event) => {
-        const index = Math.floor(event.x / (inputWidth.current / props.maxLength));
-        shouldFocusLast.current = false;
-        // TapGestureHandler works differently on mobile web and native app
-        // On web gesture handler doesn't block interactions with textInput below so there is no need to run `focus()` manually
-        if (!Browser.isMobileChrome() && !Browser.isMobileSafari()) {
-            inputRefs.current.focus();
-        }
-        setInputAndIndex(index);
-        lastFocusedIndex.current = index;
-    });
+    const tapGesture = Gesture.Tap()
+        .runOnJS(true)
+        .onBegin((event) => {
+            const index = Math.floor(event.x / (inputWidth.current / props.maxLength));
+            shouldFocusLast.current = false;
+            // TapGestureHandler works differently on mobile web and native app
+            // On web gesture handler doesn't block interactions with textInput below so there is no need to run `focus()` manually
+            if (!Browser.isMobileChrome() && !Browser.isMobileSafari()) {
+                inputRefs.current.focus();
+            }
+            setInputAndIndex(index);
+            lastFocusedIndex.current = index;
+        });
 
     /**
      * Updates the magic inputs with the contents written in the