Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
emilseuor opened this issue Sep 30, 2022 · 22 comments
Open

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

emilseuor opened this issue Sep 30, 2022 · 22 comments

Comments

@emilseuor
Copy link

emilseuor commented Sep 30, 2022

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

image
image

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
Copy link

seb-glanum commented Oct 3, 2022

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
Copy link

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
Copy link

same problem here

@Nestoro
Copy link

Nestoro commented Oct 7, 2022

same problem on react-native 0.69.1 and react 18.0.0

@emilseuor
Copy link
Author

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

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

@kueda
Copy link

kueda commented Oct 12, 2022

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

@chinmayk3
Copy link

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

@khalidMhd
Copy link

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
Copy link

Still crashes on Andoid APK for me too.

@nlarif
Copy link

nlarif commented Dec 16, 2022

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
Copy link

ErAmanDhiman commented Jan 9, 2023

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

in AndroidManifest.xml

@francosbenitez
Copy link

francosbenitez commented Feb 7, 2023

Same issue.

Not working any proposed solution.

@ipakhomov
Copy link

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
Copy link

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
Copy link

stef1103 commented Mar 20, 2023

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
Copy link

rnnyrk commented Mar 30, 2023

@stef1103 Thank a lot. Works perfect!

@cavemon
Copy link

cavemon commented Mar 31, 2023

@stef1103 Thank you!

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

@kubacienciala
Copy link

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

@stef1103
Copy link

stef1103 commented Jun 15, 2023

@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
Copy link

cavemon commented Jun 15, 2023

@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
Copy link

jimmy-qian commented Aug 10, 2023

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
Copy link

Same issue here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests