Invalid Hook Call, inside react-native-picker-select

[emilseuor]

Invalid Hook Call error inside react-native-picker-select node module.

Describe the bug

I get this issue everytime I build in android, it would show "Invalid Hook Call error" when it has to render the screen that uses RNPickerSelect (react-native-picker-select)

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at:
in PickerAndroid (at Picker.js:174)
in Picker (at src/index.js:491)
in RCTView (at View.js:32)
in View (at src/index.js:489)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (at TouchableOpacity.js:224)
in TouchableOpacity (at TouchableOpacity.js:280)
in TouchableOpacity (at src/index.js:483)
in RNPickerSelect (at Picker.tsx:39)
in RCTView (at View.js:32)
in View (at Picker.tsx:38)
in RCTView (at View.js:32)
in View (at Picker.tsx:36)

To Reproduce

Steps to reproduce the behavior:

1. Add react-native-picker-select on a react native app (react-native init Test)
2. Add RNPickerSelect useNativeAndroidPickerStyle={false} in a screen with data
3. Build in android (react-native run-android)
4. See error

Expected behavior

It would render the picker and not crash the app

Screenshots

Additional details

• Device: Android 11G Emulator
• OS: Android 11
• react-native-picker-select version: ^8.0.4
• react-native version: ^0.68.5
• expo sdk version: n/a

Reproduction and/or code sample

<RNPickerSelect
placeholder={{label: 'test', value: 'test'}}
items={items}
onValueChange={props.functionOnChange}
style={styles}
useNativeAndroidPickerStyle={false}
/>

[seb-glanum]

Same issue :(
I have updated my app with Expo 46 and React Native 0.69.5.
Put useNativeAndroidPickerStyle to true or false doesn't change anything, it still crashing for me. The module is completely broken, I can't use it anymore.

No issue on iOS.

[seb-glanum]

Okay I found a workaround to fix it.
In my case I was using npm and there is an issue with peer dependencies and React 18 used on newer versions of React Native.

I have re-install the module with this command => npm i react-native-picker-select --legacy-peer-deps

[digitalbore]

same problem here

[Nestoro]

same problem on react-native 0.69.1 and react 18.0.0

[emilseuor]

I solved it with npm i --legacy-peer-deps

And also making sure that the data I send on items is not undefined.

[kueda]

FWIW, the issue seems to be with @react-native-picker/picker: react-native-picker/picker#424

[chinmayk3]

yes . npm i react-native-picker-select --legacy-peer-deps worked for me . Thanks @seb-glanum

[khalidMhd]

Okay I found a workaround to fix it. In my case I was using npm and there is an issue with peer dependencies and React 18 used on newer versions of React Native.

I have re-install the module with this command => npm i react-native-picker-select --legacy-peer-deps

but it still crashes on the build android APK. WHY?

[ollieyeahlong]

Still crashes on Andoid APK for me too.

[nlarif]

Solved for me.
I faced the same issue. I found out that react-native-picker-select was installing on old version of @react-native-picker/picker under node_modules/react-native-picker-select/node_modules/@react-native-picker/picker which was the one throwing the exception.
I updated my packages.json with:

"resolutions": {
   "react-native-picker-select/@react-native-picker/picker": "^2.4.8"
 },

and used Yarn locally and in my CI/CD. I removed the usage of npm install --save --legacy-peer-deps which is no longer needed.
Now react-native-picker-select is relying on the newest version within node_modules and I don't see the error anymore.

[ErAmanDhiman]

You only need to add <application android.supportsRtl == True />

in AndroidManifest.xml

[francosbenitez]

Same issue.

Not working any proposed solution.

[ipakhomov]

For those who use solution with --legacy-peer-deps flag: if your app works in Expo Go, but crashes in standalone build created with EAS Build, you may to add the following script in the "scripts" section of package.json:

    "eas-build-pre-install": "npm config set legacy-peer-deps true",

cc @khalidMhd @ollieyeahlong @francosbenitez

[OceanDeverloper]

Okay I found a workaround to fix it. In my case I was using npm and there is an issue with peer dependencies and React 18 used on newer versions of React Native.

I have re-install the module with this command => npm i react-native-picker-select --legacy-peer-deps

Thanks so much!

[stef1103]

I found another solution which is adding this to the package json:

"overrides": {
    "react-native-picker-select": {
      "@react-native-picker/picker": "$@react-native-picker/picker"
    }
  }

For npm this override the package dependency forcing it to use the same version set in the "main" dependencies.
Doing this react-native-picker-select will not use the old @react-native-picker/picker

[rnnyrk]

@stef1103 Thank a lot. Works perfect!

[cavemon]

@stef1103 Thank you!

FWIW, I had to delete my react-native-picker-select folder from node_modules, then run npm i again.

[kubacienciala]

@cavemon do i need to install react-native-picker/picker also?

[stef1103]

@cavemon do i need to install react-native-picker/picker also?

Yes, as per documentation you need to install it.
You can see it here README.md

[cavemon]

@kubacienciala

@cavemon do i need to install react-native-picker/picker also?

Yes. For clarity sake, here is a snippet of my package.json

"dependencies": {
    "react-native-picker-select": "^8.0.4",
},
"overrides": {
    "react-native-picker-select": {
      "@react-native-picker/picker": "$@react-native-picker/picker"
    }
  }

[jimmy-qian]

I found another solution which is adding this to the package json:

"overrides": {
    "react-native-picker-select": {
      "@react-native-picker/picker": "$@react-native-picker/picker"
    }
  }

For npm this override the package dependency forcing it to use the same version set in the "main" dependencies. Doing this react-native-picker-select will not use the old @react-native-picker/picker

This is the way to go for now.

[furkanuzun]

Same issue here.