diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index c4852e5208af..59465e34eec0 100644 --- 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