javascriptandroidreactjsreact-nativereact-native-textinput

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


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>

    )

}

Solution

  • 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);
      };