React native - Click not trigger on button when an input is focused

Question

I'm currently building a React native mobile app on Android, and I realized that when an input is focused (for the user to type something on his keyboard), the click event doesn't apply on other elements.

For instance, when the user is typing something in an input, then if the user want to click on "Submit button", then the click event only unfocus the input but doesn't trigger the click event on the button.

Is there a way to make both event happen when an input is focused ? (Unfocus and click on element both triggered, like in a webpage)

I found only this topic that seems to be have a similar problem but not working for me or I'm using it wrong ? Any touch events not trigger when the TextInput is on focus

My code looks like something like that :

import React, {useState} from 'react'
import { ScrollView, TextInput, TouchableOpacity} from 'react-native'

export default function App(){

    return (

        <ScrollView
            keyboardShouldPersistTaps="always"
        >
            <TextInput
                placeholder="Here is the input to be focused"
            />
            <TouchableOpacity
                style={{
                    backgroundColor : "#03a9f4"
                }}
                onPress={()=>{
                    console.log("Click triggered !")
                }}
            >
                Submit form
            </TouchableOpacity>
        </ScrollView>

    )

}

Try [keyboardShouldPersistTaps](https://stackoverflow.com/questions/50503724/react-native-ios-when-textinput-is-focused-button-press-does-not-register) — Sukesh, Dec 14 '21 at 10:36
Did you get it working? For me `` combined with `Keyboard.dismiss();` from https://stackoverflow.com/a/50510934/3484824 seems to work (at least on my Note8 Android) — Can Rau, Apr 29 '22 at 04:49
Ah sorry guys, I thought I responded you Yep that's it the keyboardShouldPersistTaps is working fine ! The Keyboard.dismiss(); is also useful thanks But also weird things, it's that it's working now with the code I have with only keyboardShouldPersistTaps="always", maybe using Expo SDK 46 (react-native 0.69.5) change the things ? I don't really know how I solved it but well ... I was very noob at that time with react native haha — Julien Pepe, Sep 12 '22 at 20:06

Syed Amir Ali · Accepted Answer · 2022-12-21T09:16:45.640

I did this and it is working on my android device

on ScrollView i did this

<ScrollView keyboardShouldPersistTaps='handled'>

and on my Button function i did this i imported Keyboard from React Native and used Keyboard.dismiss(); on my SignIn Function

  const SignIn = async (data: any) => {
    Keyboard.dismiss();
    await getNotificatioPermission();
    const FCMToken = await getNotificationToken();
    const DeviceUUID = await getUniqueId();
    const payload = {
      ...data,
      DeviceUUID: DeviceUUID,
      FCMToken: FCMToken,
    };
    login(payload);
  };

React native - Click not trigger on button when an input is focused

1 Answers1