Android: Picker not responding to touch correctly inside Touchable

[deansimcox]

Describe the bug

Under certain conditions on physical Android devices, tapping on <RNPickerSelect /> does not always trigger the dialog menu to show.
The root cause of this issue appears to be rendering a <Picker /> inside of a <TouchableOpacity />
More info: facebook/react-native#25203

To Reproduce

Steps to reproduce the behavior:

1. Render a <RNPickerSelect /> with children
2. 'react-native-picker-select' then renders using renderAndroidHeadless()
3. On a physical android device, tap the rendered <RNPickerSelect />
4. Observe if this opens up the picker
5. Repeat steps 3 and 4, 20 times
6. Observe that the picker has not opened 20 times

Expected behavior

After tapping a <RNPickerSelect /> 20 times, the picker should have also opened 20 times.

Screenshots

"n/a".

Additional details

• Device: OnePlus 5T
• OS: Android 9
• react-native-picker-select version: 6.6.0
• react-native version: 0.62.2
• expo sdk version: n/a

Reproduction and/or code sample

https://snack.expo.io/@deansimcox/brave-cashew
Note: Please make sure you run this expo snack on an actual android device, the issue is not present when using the Android view on expo.

[naveen1601]

I am facing the same issue. Is there any solution of this? It is becoming critical for me, lots of users are complaining about this.

[deansimcox]

Making this change (331824c) should fix it, however this would also remove the touchable opacity feedback, so that might not be desirable.

[naveen1601]

Thanks @deansimcox. It worked 👍

[lfkwtz]

@deansimcox any chance this is related to #237 ?

[MrtYlnzz]

This is a similar issue with me and 331824c solves it. Any chance this will be solved in upcoming versions?

[neiker]

Should be nice to release a new version with this fix

[lfkwtz]

don't want to make a breaking change quite yet, so fixed with a conditional flag in 8.0.2

worth investigating how the new Pressable component reacts to this vs the bug found with TouchableOpacity

[oli-laban]

@lfkwtz Pressable unfortunately seems to have the same issue.

Showing feedback on press is quite important and we can't even implement our own animation as <Picker> doesn't provide a callback on open.

[johnlund]

fixAndroidTouchableBug={true} seems to solve this for me.

[thethirdship]

On android it would intermittently not respond to the user's touch. Originally, I wasn't sure if it was my layout, or I was doing something else to lock the app.

After setting this prop on version 8.0.3, fixAndroidTouchableBug={true}, it is firing consistently. Thank you!!!

For me if I had to choose whether to have feedback or consistently have the dialog come out on press, I choose the dialog.

Is the breaking change only for older versions of the package, older androids, or people expecting a feedback???

[AVancans]

Although fixAndroidTouchableBug fixes the click issue, it disables all onOpen, onClose callbacks. :(

[socheat-leang]

@AVancans Yes. I just faced this issue the same you.

[MHase]

after all this time fixAndroidTouchableBug fixed this bug for me also 😃

[mwegener-com]

I have the same problem as described above but fixAndroidTouchableBug doesn't work for me.
Do you have any Idea?

My Component

	<View style={styles.card}>
			<View style={styles.container}>
				<View style={styles.leftView}>
					<MyIcon
						customIcon={{ name: iconName, bib: iconBib }}
						size={25}
						color={value ? colors.primary : colors.defaultGrey}
					/>
				</View>
				<View style={layoutStyles.verticalLine}></View>
				<View style={styles.rightView}>
					<RNPickerSelect
						onValueChange={(itemValue) => setValue(itemValue)}
						items={data}
						placeholder={{ label: placeholder, value: null }}
						onOpen={() => {
							onPress();
						}}
						fixAndroidTouchableBug={true}
						useNativeAndroidPickerStyle={false}
						style={{
							placeholder: styles.placeholderStyle,
							inputAndroid: styles.input,
							inputAndroidContainer: styles.inputContainer,
							inputIOS: styles.input,
							inputIOSContainer: styles.inputContainer,
						}}
					/>
				</View>
			</View>
		</View>

My Styles

card: {
		...inputStyles.inputContainer,
		flexDirection: 'column',
		minHeight: dimensions.textfieldHeight,
		height: undefined,
		maxHeight: dimensions.textfieldHeight * 5,
	},
	container: {
		height: dimensions.textfieldHeight,
		alignItems: 'center',
		flexDirection: 'row',
	},
	leftView: {
		...inputStyles.leftView,
	},
	rightView: {
		...inputStyles.rightView,
		flexDirection: 'row',
		justifyContent: 'flex-start',
	},
	placeholderStyle: {
		...inputStyles.normalLabel,
	},
	inputView: {
		width: '100%',
		justifyContent: 'center',
	},
	inputContainer: {
		width: '100%',
		height: '100%',
		justifyContent: 'center',
	},
	input: {
		...textStyles.bodyText,
	},

[eluzgin]

I confirm that adding these 2 lines fixed this issue for me:
fixAndroidTouchableBug={true}
useNativeAndroidPickerStyle={false}

[Carles11]

fixAndroidTouchableBug={true}
useNativeAndroidPickerStyle={false}

That worked like a charm for me too. Thanks!

[MrShakes]

Spent a few hours trying to fix this, please the solution here should be placed in a troubleshooting section on the home page

[lfkwtz]

feel free to open a pr for that @MrShakes