react-native-picker-select
react-native-picker-select copied to clipboard
lawnstarter
Select won't close on iOS
Describe the bug
Select window doesn't close when clicked outside or done is pressed.
To Reproduce
Create a simple select box and try to use it.
Expected behavior
Select View should close and onDonePress should be called when clicked
Screenshots
Additional details
- Device: iPad 7th Gen Emulator
- OS: iOS 13.3
- react-native-picker-select version: 6.3.3
- react-native version: 0.61
- react version: 16.9
- expo sdk 36
Reproduction and/or code sample
Unfortunately it works in an expo snack so I haven't figured out why it isn't working my project environment. Hopefully it's not just me and someone can point me in the right direction.
It isn't just you. Plese does this have a solution. I haven't been able to complete my project because of this.
I don't know why but setting the Picker height 1 unit less than the modalViewBottom and adding overflow hidden solves the problem.
<RNPickerSelect pickerProps={{ style: { height: 214, overflow: 'hidden' } }} />
I'm experiencing the same issue. I'm at the point where I have built my own toggle and my own modal, importing the default Picker component from react-native. However I seem to be able to reproduce the same bug outside of this package. It seems the Picker covers the entire screen somehow, and catches any and all interaction.
It might have to do with some weird picker-in-modal interaction. If anyone finds a solution, I would be happy to hear it.
@gamezinfantes What version are you on? I tried your workaround but don't seem to work. I'm on version 6.6.0.
Also, are there any other workaround?
just spun up a brand new app.
react 16.11 react-native 0.62.2 react-native-picker-select 7.0.0
ran with react-native run-ios '--simulator=iPad (7th generation)'
not seeing the issue.
seems to be a legit issue based on the activity here - but someone will need to provide me with a reproduction.
@lfkwtz Can you try it in expo? @danecando seems to be on expo and I too am using expo sdk 35. Besides that, I'm connecting it with redux-form.
Mine was on expo sdk 35.0.0 and with version 6.1.0 of react-native-picker-select. I upgraded to latest react-native-picker-select but there was still an issue.
@lfkwtz as I said that I'm connecting it to redux-form, so here is how I implemented it
import React from "react";
import { View, StyleSheet, Text } from "react-native";
import RNPickerSelect from "react-native-picker-select";
import { Feather } from "@expo/vector-icons";
import PropTypes from "prop-types";
import { Colors, ConstStyles } from "../../constants";
const pickerSelectStyles = StyleSheet.create({
inputIOS: {
fontFamily: "workSansRegular",
fontSize: 16,
height: 75,
borderWidth: 1,
borderColor: Colors.munsell,
borderRadius: 5,
backgroundColor: Colors.munsell,
paddingHorizontal: 20,
paddingRight: 35,
color: Colors.darkest
},
inputAndroid: {
fontFamily: "workSansRegular",
fontSize: 16,
height: 75,
borderWidth: 1,
borderColor: Colors.munsell,
borderRadius: 5,
backgroundColor: Colors.munsell,
paddingHorizontal: 20,
paddingRight: 35,
color: Colors.darkest
}
});
const PickerSelect = ({
items,
height,
containerStyle,
showIcon,
customIconContainer,
input: { value, onChange },
meta: { touched, error },
...custom
}) => (
<View style={[{ paddingVertical: 5 }, containerStyle]}>
<RNPickerSelect
style={{
...pickerSelectStyles,
inputIOS: {
...pickerSelectStyles.inputIOS,
height,
borderWidth: touched && error ? 2 : 1,
borderColor: touched && error ? Colors.lightRed : Colors.munsell
},
inputAndroid: {
...pickerSelectStyles.inputAndroid,
height,
borderWidth: touched && error ? 2 : 1,
borderColor: touched && error ? Colors.lightRed : Colors.munsell
},
iconContainer: {
top: height === 50 ? 10 : 20,
right: 10,
...customIconContainer
}
}}
items={items}
value={value}
onValueChange={onChange}
Icon={() => {
return showIcon && <Feather name="chevron-down" size={30} color={Colors.light} />;
}}
{...custom}
useNativeAndroidPickerStyle={false}
/>
{touched && error && <Text style={ConstStyles.errorText}>{error}</Text>}
</View>
);
export default PickerSelect;
PickerSelect.propTypes = {
items: PropTypes.instanceOf(Array),
input: PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
onChange: PropTypes.func
}),
meta: PropTypes.shape({
touched: PropTypes.bool,
error: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
}),
height: PropTypes.number,
containerStyle: PropTypes.shape({}),
showIcon: PropTypes.bool,
customIconContainer: PropTypes.shape({})
};
PickerSelect.defaultProps = {
items: [],
input: {},
meta: {},
height: 75,
containerStyle: {},
showIcon: true,
customIconContainer: {}
};
And here is piece of redux-form code
<Field
key={index}
name={specificPosition}
items={pickerItems}
component={PickerSelect}
placeholder={{
label: "SPECIFIC POSITION",
value: null
}}
placeholderTextColor={Colors.taupe}
/>
Hope this helps.
Any updates here? The suggestion for a workaround only resolves the issue for one of my pickers and it breaks the whole thing on Android.
if someone can share a full repro with me, i'd be happy to look into it. @KristenKatona i'm especially curious why this would only fix one of your pickers - what is unique about it?
@lfkwtz the picker it did NOT fix (on iOS only) was within an extra nested view vs the one that did work. I just removed that extra inner view and it worked. I didn't use the suggestion here at all, I just removed that extra inner view.
Having the same issue. Example snack: https://snack.expo.io/@ptgodev/nervous-chocolate
Expo client on iOS Simulator. iPhone 8, 13.3.
I'm facing this issue as well, I've placed console log in the code in line 343 corresponding to the onPress of the "Done" button, it seems the onPress event never gets triggered, by such the modal is never dismissed. Why wouldn't a TouchableOpacity trigger the onPress event but trigger others?.. what is even more strange is that this issue went away without me modifying anything, it just goes and comes, is difficult to figure what is causing this behaviour.
Edit: only the onPress event was not triggering, others as onPressIn or onPressOut found in the same TouchableOpacity component were being triggered.
Seeing this issue as well.
RN: 0.62.2 "react-native-picker-select": "^7.0.0", No Expo
