react-native-picker / picker

Picker is a cross-platform UI component for selecting an item from a list of options.
MIT License
1.51k stars 282 forks source link

Tried to register two views with the same name #15

Closed enzzoperez closed 4 years ago

enzzoperez commented 5 years ago

Bug

I tried to add the picker, the compilation is fine, but when the app is open appears a red screen with the message: Tried to register two views with the same name AndroidDropdownPicker

Update: I also use Native base in the project Can you help me please?

Environment info

React Native Environment Info: System: OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver) CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz Memory: 696.37 MB / 7.68 GB Shell: 4.4.19 - /bin/bash Binaries: Node: 8.9.0 - ~/.nvm/versions/node/v8.9.0/bin/node Yarn: 1.15.2 - /usr/bin/yarn npm: 5.5.1 - ~/.nvm/versions/node/v8.9.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: Android SDK: API Levels: 20, 22, 23, 25, 26, 27, 28 Build Tools: 23.0.1, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.3, 28.0.3 System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64 IDEs: Android Studio: 3.4 AI-183.5429.30.34.5452501 npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.9 => 0.59.9 npmGlobalPackages: react-native-cli: 2.0.1

React native info output:

 // Tried to register two views with the same name AndroidDropdownPicker

Library version: 0.59.9

Akhnaten972 commented 5 years ago

+1

danieljgp2 commented 5 years ago

Im facing this error too, this error seems to be related with the dependencies, there is probably a dependency working with the picker of react-native.

Any idea about how to fix it @jainkuniya ?

jainkuniya commented 5 years ago

Hi @danieljgp2, thanks for the report. Will look into it. It will be great if you could share some code snippet, through which it is easily reproducible

danieljgp2 commented 5 years ago

@jainkuniya which react native version are you using as a dependecy ? i dont know if the problem is related to any dependecy of my project or any dependency of the library but im pretty sure that problem is related with the changes of RN version after 0.59 and the deprecation of the Picker.

sofiageo commented 4 years ago

I ran into this issue. For me it was caused by a wrong import on my project, which was looking for react-native Picker. But what I noticed is that even on react-native 0.61.2 package, this PR was not included. It's probably not a bug just some libraries would need to update their imports.

Sroka commented 4 years ago

Any news on this? I have the same problem and cannot get rid of it :/ @sofiageo How did you manage to figure out where offending react-native Picker import was? I check my whole app and there are no usages of Picker. Tried to search in node_nodules to check if some lib uses it but no luck

sofiageo commented 4 years ago

Any news on this? I have the same problem and cannot get rid of it :/ @sofiageo How did you manage to figure out where offending react-native Picker import was? I check my whole app and there are no usages of Picker. Tried to search in node_nodules to check if some lib uses it but no luck

It was easy for me because I only had 2 imports of Picker. How are you searching in node_modules? If it is a multi-import from react-native you will have to only search for the word Picker.

The correct import should be import {Picker} from '@react-native-community/picker';

chakrihacker commented 4 years ago

Is this bug still exists??

danieljgp2 commented 4 years ago

@chakrihacker Probably it does, the bug is caused when a dependency imports the picker from react-native and you import the picker from react-native-community/picker

chakrihacker commented 4 years ago

@danieljgp2 The Android native view name is changed to RNCPicker from RCTPicker but previous versions have name RCTPicker. I think by updating dependency this issue will be solved.

johnjoshuadablo commented 4 years ago

+1

Library version: 0.59.9

Screen Shot 2020-04-22 at 4 31 07 PM
orion151 commented 4 years ago

I have same issue. "react-native": "0.62.2", "@react-native-community/picker": "^1.3.0",

please solve this proble

chakrihacker commented 4 years ago

Is this happening in new rn versions?

orion151 commented 4 years ago

I found why this error occurs.

orion151 commented 4 years ago

Can you share your package.json file?

orion151 commented 4 years ago

In my case, I used @react-native-community/picker": "^1.3.0 and "react-native-google-places-autocomplete": "^1.4.1" in my project. "react-native-google-places-autocomplete": "^1.4.1" used picker from react-native. so, occured this error. Perhaps, there are another pakage using picker from react-native like this in your project.

khalednailigit commented 4 years ago

+1

KawaljeetSBagga commented 4 years ago

+1. Did ANYONE get rid of this?

"react-native": "0.62.0", "@react-native-community/picker": "^1.3.0"

hussainhspl commented 4 years ago

@danieljgp2 The Android native view name is changed to RNCPicker from RCTPicker but previous versions have name RCTPicker. I think by updating dependency this issue will be solved.

how to update dependency ?

hussainhspl commented 4 years ago

Is this happening in new rn versions?

yes i am using RN 0.62 app is not running and getting crashed, and also using native base 2.13.12 version and rn picker ver 1.3.0

rpCal commented 4 years ago

On my code setup...

 <Picker
  selectedValue={formik.values.gender}
  accessibilityLabel={'gender'}
  onValueChange={(itemValue, itemIndex) => {
    formik.setFieldValue('gender', itemValue);
  }}>
  <Picker.Item label="Male" value="MALE" />
  <Picker.Item label="Female" value="FEMALE" />
</Picker>

Issue is related to field accessibilityLabel... If key is setup with any value = err!

jafar-jabr commented 4 years ago

if anyone still has this issue, make sure that you don't use "Picker" from an other package in my case it was "styled-components"

MrNoino commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

MrNoino commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

iYahya commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

could you attach a screenshot of your solution ?

MrNoino commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

could you attach a screenshot of your solution ?

Picker

PS: I use functions to render the elements so if you use class to render, you should realize that "onValueChange" and "selectedValue" work diferent.

rohan-yadav007 commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

could you attach a screenshot of your solution ?

Picker

PS: I use functions to render the elements so if you use class to render, you should realize that "onValueChange" and "selectedValue" work diferent.

I am using class component and using a single dropdown, still getting error. Then i added accessibility as you suggested, still getting same error

MrNoino commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

could you attach a screenshot of your solution ?

Picker PS: I use functions to render the elements so if you use class to render, you should realize that "onValueChange" and "selectedValue" work diferent.

I am using class component and using a single dropdown, still getting error. Then i added accessibility as you suggested, still getting same error

If your error like me is "Tried to resgister two views with the same name AndroidDropdowPicker" like above in screenshoot uploaded by @sislovesmedotcom, you should have at least 2 Pickers because this error is about having the same name (accessibilityLabel) for two or more Pickers. Make sure if you have only one Picker in all Project or atributte diferents values to accessibilityLabel in case you have more than one dropdown. The reason why you have to attibute diferents values to accessibilityLabel is because react native attribute a default value that is equal for every Pickers.

rohan-yadav007 commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

could you attach a screenshot of your solution ?

Picker PS: I use functions to render the elements so if you use class to render, you should realize that "onValueChange" and "selectedValue" work diferent.

I am using class component and using a single dropdown, still getting error. Then i added accessibility as you suggested, still getting same error

If your error like me is "Tried to resgister two views with the same name AndroidDropdowPicker" like above in screenshoot uploaded by @sislovesmedotcom, you should have at least 2 Pickers because this error is about having the same name (accessibilityLabel) for two or more Pickers. Make sure if you have only one Picker in all Project or atributte diferents values to accessibilityLabel in case you have more than one dropdown. The reason why you have to attibute diferents values to accessibilityLabel is because react native attribute a default value that is equal for every Pickers.

As soon as i import Picker it show error even if i am not using a single drop-down. I think problem lies within the npm package because i get this error just after importing. I am using RN 0.62. Hence it supports autolinking but after getting error several times i thought may be issue is due to bad linking hence tried manual linking. But it didn't help

MrNoino commented 4 years ago

I have 3 Pickers in one screen and I solve the same problem as you by adding accessibilityLabel={'pickername'} in all 3 Pickers, with diferent values.

But what when we have to show picker item dynamically through api...

You should use "accessibilityLabel={'pickername'}" in Picker atributes and generate picker items dinamycally unless you have to generate picker dinamically as well.

could you attach a screenshot of your solution ?

Picker PS: I use functions to render the elements so if you use class to render, you should realize that "onValueChange" and "selectedValue" work diferent.

I am using class component and using a single dropdown, still getting error. Then i added accessibility as you suggested, still getting same error

If your error like me is "Tried to resgister two views with the same name AndroidDropdowPicker" like above in screenshoot uploaded by @sislovesmedotcom, you should have at least 2 Pickers because this error is about having the same name (accessibilityLabel) for two or more Pickers. Make sure if you have only one Picker in all Project or atributte diferents values to accessibilityLabel in case you have more than one dropdown. The reason why you have to attibute diferents values to accessibilityLabel is because react native attribute a default value that is equal for every Pickers.

As soon as i import Picker it show error even if i am not using a single drop-down. I think problem lies within the npm package because i get this error just after importing. I am using RN 0.62. Hence it supports autolinking but after getting error several times i thought may be issue is due to bad linking hence tried manual linking. But it didn't help

I assume you import "@react-native-community/picker" because the same problem as I, receiving a warning telling that Picker will be descontinued from react-native. I installed this library and I didn't need to linking manually. Then became this error and I fixed by implement the solution that I shared here. So, my advice to you is reinstall the library and check if you are getting that error yet.

rohan-yadav007 commented 4 years ago

Finally i found my fixes, I am using styled component in my project, hence to customize picker I used picker into styled to add styling Capture

After removing this, i get rid of error

MrNoino commented 4 years ago

Finally i found my fixes, I am using styled component in my project, hence to customize picker I used picker into styled to add styling Capture

After removing this, i get rid of error

I'm glad you fixed the error.

I wish you a good work and nice coding.

haocse commented 4 years ago

+1

haocse commented 4 years ago

Fixed for me: Remove import { Picker } from '@react-native-community/picker'; And use import { Picker } from 'react-native'

mrinal-roy commented 4 years ago

@haocse the issue comes when we use { Picker } from @react-native-community/picker With react-native this issue doesnot arise. But with react-native does the {Picker} work in iOS ?

haocse commented 4 years ago

@mrinal-roy-au2 Yes, iOS app works, this problem happens on the Android app

rassemdev commented 4 years ago

@haocse Picker in React-Native is deprecated. And they are suggesting this one. So need to sort this out within it.

sfarkas1988 commented 4 years ago

Same issue here. using import { Picker } from 'react-native' is not a solution as suggested by @haocse

rassemdev commented 4 years ago

anybody found any solution except importing from RN!

introin commented 4 years ago

+1

zouhairjabiri commented 4 years ago

I Fix this probleme by : Removing import { Picker } from '@react-native-community/picker'; And use import { Picker } from 'react-native'

ovidiumunteanu commented 4 years ago

Same Here. Is there any solution? I think my error comes from Picker from @react-native-community/picker and react-native-country-picker-modal

adrian1388 commented 4 years ago

May be you all still are using Picker from 'react-native' somewhere in your project. Be sure to not import from 'react-native'

Even I can use {Picker} from '@react-native-community/picker' inside styled-components this way:

const MyPicker = styled(Picker)...

This was my case.

LohanaPawan commented 4 years ago

In my case, I used @react-native-community/picker": "^1.3.0 and "react-native-google-places-autocomplete": "^1.4.1" in my project. "react-native-google-places-autocomplete": "^1.4.1" used picker from react-native. so, occured this error. Perhaps, there are another pakage using picker from react-native like this in your project.

Makes sense, but could you please help to understand that how we can know exactly which dependency is in clash with the picker library and how to solve the issue.

introin commented 4 years ago

For now, I have started using Picker from native base library and the issue appears fixed for me albeit few design issue I needed to address in such.

saim1309 commented 4 years ago

I am also facing the same issue may be for temporary basis I will use it from the react-native or native base. I am using only one picker in one of my components and the moment I import it from '@react-native-community/picker' it throws that error. Anyways, if anybody come across the solution, please please let us know.

raymochi commented 4 years ago

So, I ran into this issue and got it working by changing the name of AndroidDropdownPicker to RNCAndroidDropdownPicker, did the same for dialogpicker.

I opened up a PR for the changes, you can see them here: https://github.com/react-native-community/react-native-picker/pull/99

kesha-antonov commented 4 years ago

In my case I had 2 versions in yarn.lock

Added

"resolutions": {
    "@react-native-community/picker": "^1.8.0"
  },

to package.json to fix this

diogoaltoe commented 4 years ago

In my case, here is the way I found to temporarily solve the problem. It is obviously not the best way, but it was the one I found at the time.

https://github.com/GeekyAnts/NativeBase/issues/3114#issuecomment-706439559

hengkx commented 4 years ago

"@react-native-community/picker": "^1.8.1", same issue.