[Android] - Icon not pressable

[dooleyb1]

Describe the bug
When using a custom Icon component within the RNPickerSelect component I am unable to press the icon and open the Picker on Android. It works perfectly as expected on iOS.

To Reproduce
See the code below.

Expected behavior
Expect to click on the Icon to the right and for the Picker modal to open up. This is not the case on Android, however it works perfectly on iOS.

Screenshots
iOS:

Android:

Additional details

• Device: [e.g. Pixel 3 XL (Emulator)]
• OS: [Android 10.0]
• react-native-picker-select version: [^6.3.3]
• react-native version: [0.59.10]
• react version: [16.8.3]

Reproduction and/or code sample

https://snack.expo.io/Hkrt-UidS

<RNPickerSelect
    onValueChange={(value, index) => this.handleSelection(value, index)}
    value={this.state.college}
    placeholder={{
        label: 'Select your college/university',
        value: null,
    }}
    style={{
        ...pickerSelectStyles,
        iconContainer: {
            top: 10,
            paddingRight: scaleFontSize(33)
        },
    }}
    items={colleges}
    Icon={() => {
        return <Icon
            name="ellipsis-h"
            type="font-awesome"
            underlayColor="transparent"
            iconStyle={styles.editIcon}
        />
    }}
/>

[lfkwtz]

thanks for the detailed bug report - will check it out

[dooleyb1]

Thanks man. Is it possible to open the modal dialog via the onPress() method of the Icon?

[lfkwtz]

doubtful - the problem is on android there isn't a way to programmatically trigger the dialog #22

[lfkwtz]

fwiw - i just checked the sample expo - https://snack.expo.io/@lfkwtz/react-native-picker-select

doesn't seem to be an issue with the icons there

maybe that will help you debug this

[dooleyb1]

So, I've actually managed to resolve this issue. Turned out the missing prop that was preventing the Icon from being clickable was useNativeAndroidPickerStyle={false}. Once this was added everything worked perfectly as expected. Thanks for your help @lfkwtz 👍

[ryanbabbly]

I'm having this exact issue with my project. The box is touchable but the icon is not.

I'm using: Device: [Pixel 2] OS: [Android 10.0] react-native-picker-select version: [^7.0.0] react-native version: [0.63.2] react version: [16.13.1]

This is my picker:

<Picker
    onValueChange={onValueChange}
    useNativeAndroidPickerStyle={false}
    placeholder={{}}
    items={items}
    Icon={() => <Icon name="keyboard-arrow-down" size={32} color={theme.colors.primary} />}
    {...props}
/>

The picker worked fine before in an expo managed workflow, but I ejected just now and suddenly the icon doesn't open the picker no matter what I try.

[bittu1028]

same issue icon not being pressable on android.

[GUITARPLRC]

Also having the same issue. Please reopen 🙏

[NonkelDaniel]

I'm also having this exact problem, however it only happens on a physical device (samsung galaxy tab a (10 inch)). It does work on the emulator.

[btuck044]

Same issue here as with NonkelDaniel

[leonimurilo]

Same issue :/

<RNPickerSelect
  onValueChange={value => {
    dispatch(shoppingListDuck.creators.setCurrentList(value));
  }}
  useNativeAndroidPickerStyle={false}
  style={pickerSelectStyles}
  placeholder={{}}
  value={currentList ? currentList._id : null}
  items={lists.map(list => ({ label: list.name, value: list._id }))}
  Icon={() => {
    return <Icon name="chevron-down-outline" size={24} color="black" />;
  }}
/>

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 24,
    fontWeight: "bold",
    // backgroundColor: "#eee",
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'transparent',
    borderRadius: 8,
    color: 'black',
    // paddingRight: 30, // to ensure the text is never behind the icon
  },
  iconContainer: {
    top: 10,
    right: 12,
  },
});

[notjulian]

fwiw - i just checked the sample expo - https://snack.expo.io/@lfkwtz/react-native-picker-select

doesn't seem to be an issue with the icons there

maybe that will help you debug this

Hi If I click on the picker with custom icon (custom icon using your own css) doesn't works for me

thanks

[shubhankar30]

+1

[leonimurilo]

+1

[andreibursuc97]

seems that setting the flag _fixAndroidTouchableBug_ to _true_ fixes the problem

[Loovery]

[erikaperugachi]

Exactly! the solution is: fixAndroidTouchableBug={true}

Should be upload version: 8.0.2

[taymeric]

Same issue here with: physical device running Android 11 react-native-picker-select 8.0.2 react 16.13.1 react-native 0.63.2

<RNPickerSelect> with the following props as suggested in this discussion doesn't solve the issue:

useNativeAndroidPickerStyle={false}
fixAndroidTouchableBug={true}

[gazedash]

Bump

[ibtisamarif831]

Same issue here, Icon works fine when wrapped around View but has issues when wrapped around touchableOpacity.

fixAndroidTouchableBug={true} Even this does not help. Not all devices tho, tested on huawei p20 lite and galaxy s6.

[denisvely]

Any updates on this? it isn`t working with useNativeAndroidPickerStyle={false} fixAndroidTouchableBug={true}.

[jasperhuangg]

Hi! Still experiencing this issue as well on Android. Also passing the following props:

useNativeAndroidPickerStyle={false}
fixAndroidTouchableBug={true}

For me, only the left third of the picker responds to touch.

[TolaAbiodun]

Same issue here with: physical device running Android 8 react-native-picker-select 8.0.4 react 17.0.2 react-native 0.68.2

useNativeAndroidPickerStyle={false} fixAndroidTouchableBug={true}

The above suggestion works