Closed Kamalnrf closed 3 years ago
I noticed, this is an issue with @react-native-community/react-native-picker
and there also an open issue already.
It din't help much, as I am already clearing node modules, updating pods and this was happening on a non expo project.
The same issue happened to me, any idea guys?
Are you using Expo? If so, what version?
Same here on an ejected app, It seams the pod of @react-native-community/picker
is missing. I was obliged to add it to my project's dependencies and running npx pod-install
to solve the issue.
[Fri Aug 07 2020 11:46:28.571] ERROR Invariant Violation: requireNativeComponent: "RNCAndroidDialogPicker" was not found in the UIManager.
This error is located at: in RNCAndroidDialogPicker (at PickerAndroid.android.js:112) in PickerAndroid (at Picker.js:148) in Picker (at src/index.js:509) in RCTView (at View.js:34) in View (at src/index.js:508) in RNPickerSelect (at App.tsx:95) in RCTView (at View.js:34) in View (at App.tsx:93) in App (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)
Facing above issue for android as well This is happening on React native CLI for below simplest code :
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableWithoutFeedback,
ScrollView,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
// import RNPickerSelect, { defaultStyles } from './debug';
const sports = [
{
label: 'Football',
value: 'football',
},
{
label: 'Baseball',
value: 'baseball',
},
{
label: 'Hockey',
value: 'hockey',
},
];
export default class App extends React.Component {
constructor(props) {
super(props);
this.inputRefs = {
firstTextInput: null,
favSport0: null,
};
this.state = {
numbers: [
{
label: '1',
value: 1,
color: 'orange',
},
{
label: '2',
value: 2,
color: 'green',
},
],
favSport0: undefined,
previousFavSport: undefined,
};
this.InputAccessoryView = this.InputAccessoryView.bind(this);
}
InputAccessoryView() {
return (
<View style={styles.modalViewMiddle}>
<TouchableWithoutFeedback
onPress={() => {
this.setState(
{
favSport5: this.state.previousFavSport,
},
() => {
//this.inputRefs.favSport5.togglePicker(true);
},
);
}}
hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}>
<View testID="needed_for_touchable">
<Text style={[styles.done, {fontWeight: 'normal', color: 'red'}]}>
Cancel
</Text>
</View>
</TouchableWithoutFeedback>
<Text>Name | Prefer</Text>
<TouchableWithoutFeedback
onPress={() => {
//this.inputRefs.favSport5.togglePicker(true);
}}
hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}>
<View testID="needed_for_touchable">
<Text style={styles.done}>Done</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
render() {
return (
<View style={styles.container}>
<Text>useNativeAndroidPickerStyle (default)</Text>
<Text>custom InputAccessoryView on iOS</Text>
<RNPickerSelect
items={sports}
value={this.state.favSport0}
onValueChange={(value) => {
this.setState({
favSport5: value,
});
}}
onOpen={() => {
this.setState({
previousFavSport5: this.state.favSport0,
});
}}
InputAccessoryView={this.InputAccessoryView}
ref={(ref) => {
//this.inputRefs.favSport5 = ref;
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {
flex: 1,
paddingHorizontal: 15,
},
scrollContentContainer: {
paddingTop: 40,
paddingBottom: 10,
},
viewContainer: {
alignSelf: 'stretch',
},
iconContainer: {
position: 'absolute',
right: 0,
},
modalViewTop: {
flex: 1,
},
modalViewMiddle: {
height: 45,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 10,
backgroundColor: '#f8f8f8',
borderTopWidth: 1,
borderTopColor: '#dedede',
zIndex: 2,
},
chevronContainer: {
flexDirection: 'row',
},
chevron: {
width: 15,
height: 15,
backgroundColor: 'transparent',
borderColor: '#a1a1a1',
borderTopWidth: 1.5,
borderRightWidth: 1.5,
},
chevronUp: {
marginLeft: 11,
transform: [{translateY: 4}, {rotate: '-45deg'}],
},
chevronDown: {
marginLeft: 22,
transform: [{translateY: -5}, {rotate: '135deg'}],
},
chevronActive: {
borderColor: '#007aff',
},
done: {
color: '#007aff',
fontWeight: '600',
fontSize: 17,
paddingTop: 1,
paddingRight: 11,
},
doneDepressed: {
fontSize: 19,
},
modalViewBottom: {
justifyContent: 'center',
backgroundColor: '#d0d4da',
},
placeholder: {
color: '#c7c7cd',
},
headlessAndroidPicker: {
position: 'absolute',
width: '100%',
height: '100%',
color: 'transparent',
opacity: 0,
},
});
const pickerSelectStyles = StyleSheet.create({
inputIOS: {
fontSize: 16,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
color: 'black',
paddingRight: 30, // to ensure the text is never behind the icon
},
inputAndroid: {
fontSize: 16,
paddingHorizontal: 10,
paddingVertical: 8,
borderWidth: 0.5,
borderColor: 'purple',
borderRadius: 8,
color: 'black',
paddingRight: 30, // to ensure the text is never behind the icon
},
});
Please help on this issue. RN version - 0.63
Same error here on a managed expo project sdk 38
The native component RNCPicker
has been removed out of the react-native
core. Installing the peer dependency @react-native-community/picker
does the trick
Going back to ver 7.0.0 solve it to me.
Peer dependency didn't help me. Installed @react-native-community/picker
as a project dependency.
[Fri Aug 07 2020 11:46:28.571] ERROR Invariant Violation: requireNativeComponent: "RNCAndroidDialogPicker" was not found in the UIManager.
This error is located at: in RNCAndroidDialogPicker (at PickerAndroid.android.js:112) in PickerAndroid (at Picker.js:148) in Picker (at src/index.js:509) in RCTView (at View.js:34) in View (at src/index.js:508) in RNPickerSelect (at App.tsx:95) in RCTView (at View.js:34) in View (at App.tsx:93) in App (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)
Facing above issue for android as well This is happening on React native CLI for below simplest code :
import React from 'react'; import { StyleSheet, Text, View, TouchableWithoutFeedback, ScrollView, } from 'react-native'; import RNPickerSelect from 'react-native-picker-select'; // import RNPickerSelect, { defaultStyles } from './debug'; const sports = [ { label: 'Football', value: 'football', }, { label: 'Baseball', value: 'baseball', }, { label: 'Hockey', value: 'hockey', }, ]; export default class App extends React.Component { constructor(props) { super(props); this.inputRefs = { firstTextInput: null, favSport0: null, }; this.state = { numbers: [ { label: '1', value: 1, color: 'orange', }, { label: '2', value: 2, color: 'green', }, ], favSport0: undefined, previousFavSport: undefined, }; this.InputAccessoryView = this.InputAccessoryView.bind(this); } InputAccessoryView() { return ( <View style={styles.modalViewMiddle}> <TouchableWithoutFeedback onPress={() => { this.setState( { favSport5: this.state.previousFavSport, }, () => { //this.inputRefs.favSport5.togglePicker(true); }, ); }} hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}> <View testID="needed_for_touchable"> <Text style={[styles.done, {fontWeight: 'normal', color: 'red'}]}> Cancel </Text> </View> </TouchableWithoutFeedback> <Text>Name | Prefer</Text> <TouchableWithoutFeedback onPress={() => { //this.inputRefs.favSport5.togglePicker(true); }} hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}> <View testID="needed_for_touchable"> <Text style={styles.done}>Done</Text> </View> </TouchableWithoutFeedback> </View> ); } render() { return ( <View style={styles.container}> <Text>useNativeAndroidPickerStyle (default)</Text> <Text>custom InputAccessoryView on iOS</Text> <RNPickerSelect items={sports} value={this.state.favSport0} onValueChange={(value) => { this.setState({ favSport5: value, }); }} onOpen={() => { this.setState({ previousFavSport5: this.state.favSport0, }); }} InputAccessoryView={this.InputAccessoryView} ref={(ref) => { //this.inputRefs.favSport5 = ref; }} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, scrollContainer: { flex: 1, paddingHorizontal: 15, }, scrollContentContainer: { paddingTop: 40, paddingBottom: 10, }, viewContainer: { alignSelf: 'stretch', }, iconContainer: { position: 'absolute', right: 0, }, modalViewTop: { flex: 1, }, modalViewMiddle: { height: 45, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 10, backgroundColor: '#f8f8f8', borderTopWidth: 1, borderTopColor: '#dedede', zIndex: 2, }, chevronContainer: { flexDirection: 'row', }, chevron: { width: 15, height: 15, backgroundColor: 'transparent', borderColor: '#a1a1a1', borderTopWidth: 1.5, borderRightWidth: 1.5, }, chevronUp: { marginLeft: 11, transform: [{translateY: 4}, {rotate: '-45deg'}], }, chevronDown: { marginLeft: 22, transform: [{translateY: -5}, {rotate: '135deg'}], }, chevronActive: { borderColor: '#007aff', }, done: { color: '#007aff', fontWeight: '600', fontSize: 17, paddingTop: 1, paddingRight: 11, }, doneDepressed: { fontSize: 19, }, modalViewBottom: { justifyContent: 'center', backgroundColor: '#d0d4da', }, placeholder: { color: '#c7c7cd', }, headlessAndroidPicker: { position: 'absolute', width: '100%', height: '100%', color: 'transparent', opacity: 0, }, }); const pickerSelectStyles = StyleSheet.create({ inputIOS: { fontSize: 16, paddingVertical: 12, paddingHorizontal: 10, borderWidth: 1, borderColor: 'gray', borderRadius: 4, color: 'black', paddingRight: 30, // to ensure the text is never behind the icon }, inputAndroid: { fontSize: 16, paddingHorizontal: 10, paddingVertical: 8, borderWidth: 0.5, borderColor: 'purple', borderRadius: 8, color: 'black', paddingRight: 30, // to ensure the text is never behind the icon }, });
Please help on this issue. RN version - 0.63
Resolved issue by installing 7.0.0 version. Above problem persist in 8.0.0 which is latest version.
The root of this issue is in @react-native-community/picker dependency which has this issue on Ver > 1.6.0, installing @react-native-community/picker@1.6.0 solved the issue for me.
Installing @react-native-community/picker did not help me.
expo: 38.0.8 react-native-picker-select: 8.0.0 @react-native-community/picker: 1.6.0
I am facing this issue too in a expo bare project. Works fine launching as native project, but when using expo start it crashes.
edit: I tested with version 7.0.0 and it just worked fine.
I' have the same issue too on android only..
expo: 38.0.8 react-native-picker-select: 8.0.0 @react-native-community/picker: 1.6.0
Installed react-native-picker-select: 7.0.0 and the problem was solved.
react-native-picker-select: 7.0.0 worked for me as well but i can't use inputLabel anymore..
looks like locking to 1.6.0 may be the solution: https://github.com/react-native-community/react-native-picker/issues/45
https://github.com/lawnstarter/react-native-picker-select/tree/801 ^ please try this branch if you're having this issue and report back. thank you.
Issue Resolved. Adding https://github.com/react-native-community/react-native-picker This will add the required thing after pod install.
I had a similar issue with expo 38.0.8. steps to solve :
using:
import RNPickerSelect from 'react-native-picker-select';
export const Dropdown = () => {
return (
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
);
};
*only the exact version 1.6.0 is supported in Expo and a patch release since that is incompatible with current Expo
@Maoravitan did you try https://github.com/lawnstarter/react-native-picker-select/tree/801?
Same issue with react-native-picker-select 8.0.0 version and @react-native-community/picker@1.6.6
Same issue with react-native-picker-select 8.0.0 version After that, I installed version 7.0.0 and everything worked
Has anyone tried the branch I posted?
I solved this problem with react-native-picker-select@7.0.0 and in placeholder attribute I added a string and this causes a error crashing the app, so I fix this putting correct object explained in README.md.
I solved running:
npm install @react-native-community/picker
npx pod-install
remember to stop your debugging mode and start it again.
I solved running:
npm install @react-native-community/picker
npx pod-install
remember to stop your debugging mode and start it again.
Thank you, this solved my issue for me.
locking this until I get some feedback on whether this branch solves the issue: https://github.com/lawnstarter/react-native-picker-select/tree/801
go ahead and open a new issue if that doesn't solve it
haven't seen any new issues for this in the past week. can anyone confirm the new branch solved their issue?
@lfkwtz, this doesn't seem to resolve the issue. I added your 801 branch, but no dice.
@lfkwtz upgrading from 8.0.0 to your 801 branch resolved the error for me. Just had to remember to restart metro bundler and clear its cache. Thank you!
May have spoken too soon - it works on Android but getting the following errors on iOS when I click to open the picker:
Invariant Violation: requireNativeComponent: "RNCPicker" was not found in the UIManager.
This error is located at:
in RNCPicker (at PickerIOS.ios.js:107)
in RCTView (at PickerIOS.ios.js:106)
in PickerIOS (at Picker.js:143)
in Picker (at src/index.js:457)
in RCTView (at src/index.js:450)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at Modal.js:254)
in RCTView (at Modal.js:276)
in RCTModalHostView (at Modal.js:262)
in Modal (at src/index.js:433)
in RCTView (at src/index.js:422)
in RNPickerSelect (created by SearchForm)
in RCTView (created by SearchForm)
in RCTView (created by SearchForm)
in MembersSearchForm (created by DirectoryScreenContent)
in RCTView (at VirtualizedList.js:931)
in VirtualizedCellWrapper (at VirtualizedList.js:928)
in RCTScrollContentView (at ScrollView.js:1063)
in RCTScrollView (at ScrollView.js:1196)
in ScrollView (at VirtualizedList.js:1280)
in VirtualizedList (at FlatList.js:633)
in FlatList (created by DirectoryScreenContent)
in DirectoryScreenContent (created by Context.Consumer)
in Connect(DirectoryScreenContent) (created by Context.Consumer)
in Connect(Connect(DirectoryScreenContent)) (created by ScreenManager)
in RCTView (created by Layout)
in RCTView (created by Layout)
in Layout (created by ScreenManager)
in ScreenManager (created by Context.Consumer)
in Screen(Connect(Connect(DirectoryScreenContent))) (at SceneView.js:9)
in SceneView (at StackViewLayout.tsx:899)
in RCTView (at createAnimatedComponent.js:144)
in AnimatedComponent (at createAnimatedComponent.js:194)
in ForwardRef(AnimatedComponentWrapper) (at StackViewCard.tsx:93)
in RCTView (at createAnimatedComponent.js:144)
in AnimatedComponent (at createAnimatedComponent.js:194)
in ForwardRef(AnimatedComponentWrapper) (at screens.native.js:59)
in Screen (at StackViewCard.tsx:80)
in Card (at createPointerEventsContainer.tsx:95)
in Container (at StackViewLayout.tsx:971)
in RCTView (at screens.native.js:83)
in ScreenContainer (at StackViewLayout.tsx:383)
in RCTView (at createAnimatedComponent.js:144)
in AnimatedComponent (at createAnimatedComponent.js:194)
in ForwardRef(AnimatedComponentWrapper) (at StackViewLayout.tsx:379)
in PanGestureHandler (at StackViewLayout.tsx:372)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.tsx:103)
in RCTView (at Transitioner.tsx:267)
in Transitioner (at StackView.tsx:40)
in StackView (at createNavigator.js:61)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:61)
in Navigator (at createAppContainer.js:429)
in NavigationContainer (created by NavigationContainerContent)
in RCTView (at react-native-drawer/index.js:578)
in RCTView (at react-native-drawer/index.js:565)
in Drawer (created by Drawer)
in Drawer (created by NavigationContainerContent)
in NavigationContainerContent (created by Context.Consumer)
in Connect(NavigationContainerContent) (created by Context.Consumer)
in Connect(Connect(NavigationContainerContent)) (created by Context.Consumer)
in Connect(Connect(Connect(NavigationContainerContent))) (created by Context.Consumer)
in Connect(Connect(Connect(Connect(NavigationContainerContent)))) (created by AppComponent)
in Provider (created by StoreProvider)
in StoreProvider (created by AppComponent)
in AppComponent (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)
invariant
browser.js:38:14
getNativeComponentAttributes
getNativeComponentAttributes.js:29:2
createReactNativeComponentClass$argument_1
requireNativeComponent.js:29:4
exports.get
ReactNativeViewConfigRegistry.js:121:17
createInstance
ReactNativeRenderer-dev.js:4256:19
completeWork
ReactNativeRenderer-dev.js:16949:25
completeUnitOfWork
ReactNativeRenderer-dev.js:20912:15
performUnitOfWork
ReactNativeRenderer-dev.js:20882:11
workLoopSync
ReactNativeRenderer-dev.js:20848:21
performSyncWorkOnRoot
ReactNativeRenderer-dev.js:20456:10
I've rolled back to 7.0.0 for the time being
I just want to chime in this is happening on my end as well version 8.0.0
@lfkwtz using the branch https://github.com/lawnstarter/react-native-picker-select/tree/801 solved the issue.
Had to change package.json to
"react-native-picker-select": "lawnstarter/react-native-picker-select#801",
@lfkwtz using the branch https://github.com/lawnstarter/react-native-picker-select/tree/801 solved the issue.
Had to change package.json to
"react-native-picker-select": "lawnstarter/react-native-picker-select#801",
Will this branch be ever merged to master?
Doesn't work on my end as well. Will downgrade to 7.0.0
@lfkwtz using the branch https://github.com/lawnstarter/react-native-picker-select/tree/801 solved the issue. Had to change package.json to
"react-native-picker-select": "lawnstarter/react-native-picker-select#801",
Will this branch be ever merged to master?
did that branch work?
@lfkwtz Unfortunately the branch didn't work. I'm switching to 7.0.0. I will ignore the warning for now.
I had this issue with expo SDK 38 and fixed it by upgrading to 39 and then reinstalling my packages
npm install -g expo-cli
restart cmd
expo update
rm -rf node_modules
rm yarn.lock
yarn install
Beware though, that there might be a few breaking changes when upgrading to new SDK as described in expo blog
I ran into this issue too, and using the branch works for me on Expo 38 ("expo": "^38.0.10",
).
expo install lawnstarter/react-native-picker-select#801
🥳
pushed out 8.0.1 and updated the readme
pushed out 8.0.1 and updated the readme
Thanks! Will try this
Edit:
Working on iOS but broke my Android build.
install: npx pod-install
After installing
npm install @react-native-community/picker
I run
cd ios
pod install
It worked for me
Following solution worked for me, after npm install @react-native-community/picker kill metro server then restart then do react-native run-android
Adding "@react-native-community/picker": "1.6.0",
to package.json
and reinstalling npm dependencies and pods fixed this for me.
I think the issue is that React Native's autolinking does not work for transitive dependencies (see https://github.com/react-native-community/cli/issues/870). So the solution is to add @react-native-community/picker
as a direct dependency in package.json
and in this case autolinking works for it.
Thank you @mlazari 👏🏼 your answer worked for me....
@AregbesolaOJ The solution was provided by someone else above and it's also mentioned in README now, so I can't take credit for it :) I just mentioned what could be the cause of the issue.
still not working for me... "expo": "~37.0.3", "@react-native-picker/picker": "^1.9.6", "react-native-picker-select": "^8.0.4",
I had this issue with expo SDK 38 and fixed it by upgrading to 39 and then reinstalling my packages
npm install -g expo-cli
restart cmd
expo update
rm -rf node_modules
rm yarn.lock
yarn install
Beware though, that there might be a few breaking changes when upgrading to new SDK as described in expo blog
whats the solution for react-native-cli ?
RNCPicker was not found in the UIManager
This happened when I moved to latest version
8.0.0
To Reproduce
(I din't try this in a new project, but here is what I did) Steps to reproduce the behavior:
react-native-picker-select
to8.0.0
rm -rf node_modules && yarn cache clean && yarn install
cd ios && pod install
Expected behavior
To behave like it was in the previous version
Screenshots
Additional details
Reproduction and/or code sample