TextInput with editable set to false does not emit OnPressIn and OnPressOut

[michalmaka]

Description

Having TextInput component with editable prop set to false has different effect on iOS and Android.
On iOS OnPressIn and OnPressOut are emitted correctly, but on Android they're not triggered.

Version

0.68.1

Output of npx react-native info

It's clearly visible on snack, no need for my workspace configuration

Steps to reproduce

1. Create TextInput component
2. Set editable prop to false
3. Use OnPressIn callback
4. See no execution of OnPressIn on Android

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@michal.maka/textinput-editable-android

[KanwarBhajneek]

Setting it to falsy value will work on both Android and iOS. In above snack link editable={null} works on both Android and iOS

[imhazige]

Encountered same problem

[tkud04]

Setting it to falsy value will work on both Android and iOS. In above snack link editable={null} works on both Android and iOS

This worked for me on both Android and iOS

[dnwjn]

Setting it to falsy value will work on both Android and iOS. In above snack link editable={null} works on both Android and iOS

This works for me too!

[ray-holland-es]

Have the same problem. Setting it to null for Android makes the input editable and ignores any autofocus of subsequent form field rendering

[hssdiv]

apart from using editable={null}

I also added onFocus={() => Keyboard.dismiss(), as android was pulling up keyboard and still focusing that input

update: apparently there is a better way using:
showSoftInputOnFocus={false}

[SamerJurdi]

I found a solution to trigger a function on pressing the TextInput with editable set to false for both iOS and android.

• Wrap the TextInput component with a Pressable component.
• Put your function in the onPress prop of the Pressable component. (This triggers the function on android)
• Then add the same function to the onPressIn prop of the TextInput component. (This triggers the function on iOS)

[dplazagarrido]

I found a solution to trigger a function on pressing the TextInput with editable set to false for both iOS and android.

• Wrap the TextInput component with a Pressable component.
• Put your function in the onPress prop of the Pressable component. (This triggers the function on android)
• Then add the same function to the onPressIn prop of the TextInput component. (This triggers the function on iOS)

This works like a charm! Thx u saved my day

[laurisdedumets]

Setting editable={null} seems to emit the signal on Android because it doesn't actually prevent the field from being editable, so there is no point of even adding it as a property.

I'm not familiar with the source code of React Native, but I think this is the line that confirms this:

react-native/packages/react-native/Libraries/Components/TextInput/TextInput.js

Line 1409 in f30acc6

if (editable !== false) {

Until this issue is fixed, the workaround of wrapping your input with some sort of Pressable is the only valid option to achieve this functionality.

[adesh1167]

I found a solution to trigger a function on pressing the TextInput with editable set to false for both iOS and android.

• Wrap the TextInput component with a Pressable component.
• Put your function in the onPress prop of the Pressable component. (This triggers the function on android)
• Then add the same function to the onPressIn prop of the TextInput component. (This triggers the function on iOS)

this saved the day

[M-Arslan04]

I found a solution to trigger a function on pressing the TextInput with editable set to false for both iOS and android.

• Wrap the TextInput component with a Pressable component.
• Put your function in the onPress prop of the Pressable component. (This triggers the function on android)
• Then add the same function to the onPressIn prop of the TextInput component. (This triggers the function on iOS)

This one works like a charm, Thanks 🙇