Clicking the item doesn't toggle the select modal

[bvanderdrift]

• Platform: Android 11
• "react-native": "0.64.0"
• "@react-native-picker/picker": "1.16.1"

Hi team!

I'm struggling with a situation where clicking the item in the picker doesn't show the select Modal. If I click on the area outside the item it does work. I've made the picker have height: 100 and backgroundColor: 'red' for visibility. See the gifs for the area that isn't clickable.

Is this a known issue? Am I missing something?

[Renan-Olovics]

Same issue here

[Renan-Olovics]

By the way, on ios its working just fine,

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/raleway": "^0.1.0",
    "@expo/vector-icons": "^12.0.5",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.13.0",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/datetimepicker": "3.2.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/material-bottom-tabs": "^5.3.15",
    "@react-navigation/material-top-tabs": "^5.3.15",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "axios": "^0.21.1",
    "buffer": "^5.7.1",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.24.0",
    "expo": "^41.0.0",
    "expo-app-loading": "^1.1.2",
    "expo-av": "~9.1.2",
    "expo-blur": "~9.0.3",
    "expo-camera": "~11.0.2",
    "expo-document-picker": "~9.1.2",
    "expo-file-system": "~11.0.2",
    "expo-font": "~9.1.0",
    "expo-fontawesome": "^0.1.2",
    "expo-image-picker": "~10.1.4",
    "expo-linear-gradient": "~9.1.0",
    "expo-media-library": "~12.0.2",
    "expo-network": "~3.1.1",
    "expo-sqlite": "~9.1.0",
    "i18n-js": "^3.8.0",
    "jwt-decode": "^2.2.0",
    "lottie-react-native": "3.5.0",
    "moment": "^2.29.1",
    "native-base": "2.13.8",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-animated-loader": "0.0.8",
    "react-native-camera": "^3.44.3",
    "react-native-card-stack-swiper": "^1.2.5",
    "react-native-custom-radio-group": "^1.0.1",
    "react-native-deck-swiper": "^2.0.5",
    "react-native-dropdown-picker": "^5.1.23",
    "react-native-easy-content-loader": "^0.3.2",
    "react-native-elements": "^1.2.7",
    "react-native-fast-image": "^8.3.6",
    "react-native-flash-message": "^0.1.23",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-get-location": "^1.4.3",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-image-view": "^2.1.9",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-looped-carousel": "^0.1.13",
    "react-native-looped-carousel-improved": "^1.0.2",
    "react-native-maps": "0.27.1",
    "react-native-mask-loader": "0.0.3",
    "react-native-paper": "^4.9.2",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "~2.1.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "3.2.0",
    "react-native-safe-modules": "^1.0.3",
    "react-native-screens": "~3.0.0",
    "react-native-svg": "12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swiper": "^1.6.0",
    "react-native-tab-view": "^2.16.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "^0.16.5",
    "react-native-web-swiper": "^2.2.1",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.4",
    "rn-range-slider": "^1.3.3",
    "socket.io-client": "^1.7.4",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "babel-eslint": "^10.1.0",
    "babel-preset-expo": "8.3.0",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "schedule": "^0.4.0"
  },
  "private": true
}

[Gildo-Sargi-Neto]

have you tried adding the propertie "key" to the items of your picker?
something like in this print should work

[bvanderdrift]

@Gildo-Sargi-Neto thanks for the idea! We found another workaround in the meanwhile by using the package react-native-modal-selector instead. I sadly can't verify if that solution worked in my case. Curious to hear whether anyone else who is currently experiencing this problem has their issue solved by adding the key.

[jbreuer95]

You can do this as a workaround:

Pseude code but i did something like this in my project and it works

const pickerRef = useRef();
<Pressable style={{ flex: 1 }} android_disableSound onPress={() => pickerRef.current.focus()}>
    <Picker ref={pickerRef} />
</Pressable>