Tried to register two views with the same name about picker

[zouhairjabiri]

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

[haocse]

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

[kesha-antonov]

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

[Wei102193]

In my case I am using "@react-native-picker/picker": "^1.9.2", and "native-base": "^2.13.14".
Somehow the latest version of "native-base" is using picker from "@react-native-community/picker" which has been deprecated. I believe this is what caused the problem on my side. So I downgrade "native-base" to version 2.13.14 where they still import picker from "react native", and It works fine. Seriously "native-base" caused too much problems, I am thinking remove it completely from my project. Hope this helps someone.

[sfarkas1988]

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

[orion151]

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

please solve this proble

[hengkx]

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

[johnjoshuadablo]

+1

Library version: 0.59.9

[KawaljeetSBagga]

+1. Did ANYONE get rid of this?

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

[rpCal]

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!

[vijaychouhan-rails]

I installed the NativeBase version that installed "@react-native-picker/picker" "^1.9.7" as dependency and by mistake, I install @react-native-picker/picker too.
So to solve this issue: remove the @react-native-picker/picker that you installed because of NativeBase already installed @react-native-picker/picker as a dependency, if you are using yarn then check on yarn.lock file

[nandorojo]

I got a similar error upgrading from Expo SDK 39 -> 40. I solved it by uninstalling @react-native-community/picker and instead installing @react-native-picker/picker.

[danieljgp2]

@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

[hussainhspl]

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

[mrinal-roy]

@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 ?

[jainkuniya]

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

[chakrihacker]

@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.

[orion151]

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.

[jafar-jabr]

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"

[rassemdev]

anybody found any solution except importing from RN!

[LohanaPawan]

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.

[saim1309]

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.

[grekosys]

Yo tenía el mismo problema. Lo solucione desinstalando react-native-picker-select. Esté tiene conflicto con native-base.

[MehmetKaplan]

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

A similar approach solved my case within Expo 40 and for datetimepicker, not picker:

	"resolutions": {
		"@react-native-community/datetimepicker": "3.0.4"
	 },

[gluons]

Uninstall old @react-native-community/picker and install latest @react-native-picker/picker solve this problem for me.

[DimanshaMalrindu]

The Author renamed the library to @react-native-picker/picker. See the GitHub new repository: https://github.com/react-native-picker/picker It will resolve the issue after uninstalling the @react-native-community-picker library and rename the imported pickers to @react-native-picker/picker. If you use some other features in the @react-native-community, just rename the imported react-native-community/picker to react-native-picker/picker

[Akhnaten972]

+1

[danieljgp2]

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 ?

[danieljgp2]

@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]

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]

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]

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]

Is this bug still exists??

[chakrihacker]

Is this happening in new rn versions?

[orion151]

I found why this error occurs.

[orion151]

Can you share your package.json file?

[khalednailigit]

+1

[hussainhspl]

@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 ?

[MrNoino]

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]

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]

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]

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 ?

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]

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 ?

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]

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 ?

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]

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 ?

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]

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 ?

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]

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

After removing this, i get rid of error

[MrNoino]

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

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]

+1

[haocse]

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

[rassemdev]

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

[introin]

+1

[ovidiumunteanu]

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]

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.

[introin]

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.

[raymochi]

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: #99

[diogoaltoe]

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.

GeekyAnts/NativeBase#3114 (comment)

[altany]

We are importing two pickers in one scene, made sure to only import from @react-native-community/picker and not "react-native" and tried the trick with adding accessibility labels but I still get this error.

Can someone help with this as we currently have a broken app because of this.

Update: for some reason 1.9.4 was installed in our app. Downgrading to 1.9.3 for all dependencies (which was tested and working before) fixed the issue

[MehmetKaplan]

Seriously "native-base" caused too much problems, I am thinking remove it completely from my project.

Even though I respect the developers of the native-base, I could not have agreed more to above comment. It is generating more problems than it solves, especially with pickers.

[jdoherty61]

#45 (comment) - Was stuck on this for a bit and came across this comment.

[guicompeng]

#15 (comment) and #15 (comment)
Thanks, it worked for me.

[iguilhermeluis]

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

it work for me!

[nayookyaw]

I changed react-native-community/datetimepicker version from

2.4.0 to 3.0.9

"@react-native-community/datetimepicker": "^3.0.9"

We can assume the old version will get error

[dan-fein]

I actually realized I didn't need native-base so I just deleted it (which I know isn't possible for everyone) and that worked. I did a little more research after and it looks like I could have upgraded native-base to the latest version and it would have worked. Hope that helps anybody struggling with this one!