react-native-picker-select Android: Picker not responding to touch correctly inside Touchable

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: https://github.com/facebook/react-native/issues/25203

To Reproduce
Steps to reproduce the behavior:

Render a <RNPickerSelect /> with children
'react-native-picker-select' then renders using renderAndroidHeadless()
On a physical android device, tap the rendered <RNPickerSelect />
Observe if this opens up the picker
Repeat steps 3 and 4, 20 times
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.

Aug 26 '20 08:08 deansimcox

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.

Sep 01 '20 23:09 naveen1601

Making this change (https://github.com/lawnstarter/react-native-picker-select/pull/355/commits/331824c577575e70b473c8194f779984c90df742) should fix it, however this would also remove the touchable opacity feedback, so that might not be desirable.

Sep 02 '20 00:09 deansimcox

Thanks @deansimcox. It worked 👍

Sep 03 '20 07:09 naveen1601

@deansimcox any chance this is related to #237 ?

Sep 03 '20 11:09 lfkwtz

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

Sep 07 '20 22:09 MrtYlnzz

Should be nice to release a new version with this fix

Sep 11 '20 14:09 neiker

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

Oct 14 '20 16:10 lfkwtz

@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.

Dec 22 '20 15:12 oli-laban

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

Feb 26 '21 00:02 johnlund

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???

Mar 04 '21 05:03 thethirdship

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

Jun 12 '21 13:06 AVancans

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

Jun 23 '21 03:06 socheat-leang

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

Sep 22 '21 10:09 MHase

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,
	},