Dropdown list not showing on press in iOS 26 #358
Description
The dropdown list does not show on press in iOS 26.
using
"react-native": "0.78.3"
"react-native-element-dropdown": "^2.10.1"
It is working fine in Android
Code:
import { Platform, StyleSheet, Text, View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import COLORS from '../../general/PPColors';
import LinearGradient from 'react-native-linear-gradient';
import { BlurView } from '@react-native-community/blur';
const DropDownV2 = ({
options = [],
placeholder = 'Select ...',
selectedOption,
setSelectedOption,
error,
style = {},
category = {},
width,
disable = false,
}) => {
const dummyOptions = [
{ label: 'Option 1', value: 'Option 1' },
{ label: 'Option 2', value: 'Option 2' },
];
const renderItem = (item) => {
const labelParts = item?.label?.split('\n') || [];
return (<View style={styles.itemContainer}>
{Platform.OS === 'android' ? (
<LinearGradient
colors={[
'rgba(5, 27, 44, 0.85)', // 95% opacity (5% transparency)
'rgba(5, 28, 55, 0.85)',
]} // Replace with your gradient colors
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.gradientView}
/>
) : (
<BlurView blurType='dark' blurAmount={2}
style={styles.blurView}
/>
)}
<View style={styles.labelContainer}>
{labelParts.map((part, index) => (
<Text
key={index}
style={[
{ fontSize: 14, color: COLORS.white, fontWeight: '500' },
{
// Apply different styles for the second line (index > 0)
...(index > 0 && { color: COLORS.grey, fontSize: 12 }),
},
]}
>
{part}
</Text>
))}
</View>
</View>
)
};
return (
<View style={[style, styles.dropdownWrapper, { width: width }]}>
<Dropdown
label="Select Option"
data={options.length > 0 ? options : dummyOptions}
itemTextStyle={styles.itemText}
placeholderStyle={[
category
? { color: 'white', fontSize: 14 }
: styles.dropdownPlaceholder,
]}
selectedTextStyle={[
category ? styles.categoryText : styles.selectedText,
]}
iconStyle={styles.iconStyle}
maxHeight={300}
labelField="label"
valueField="value"
showsVerticalScrollIndicator={false}
placeholder={placeholder}
value={selectedOption}
activeColor={COLORS.grey4}
style={[
styles.dropdown,
style,
{ borderColor: error ? COLORS.advanced : COLORS.opwhite },
]}
containerStyle={styles.dropdownContainer}
dropdownPosition="auto"
onChange={(value) => setSelectedOption(value)}
iconColor={COLORS.grey1}
selectedTextProps={{ numberOfLines: 2 }} // Allow multiline for selected text
renderItem={renderItem}
inputSearchStyle={styles.searchInput}
searchPlaceholder="Search"
disable={disable}
renderSelectedItem={(item) => (
<Text style={[styles.selectedText, { whiteSpace: 'pre-line' }]}>
{item?.label}
</Text>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
itemContainer: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: COLORS.grey,
paddingHorizontal: 10,
paddingVertical: 10,
},
itemLabel: {
fontSize: 16,
fontWeight: '400',
color: COLORS.black,
},
dropdownWrapper: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
borderColor: COLORS.white,
},
dropdown: {
width: '100%',
paddingHorizontal: 15,
paddingVertical: 4,
justifyContent: 'center',
borderRadius: 8,
alignItems: 'center',
backgroundColor: COLORS.opwhite,
},
dropdownContainer: {
marginTop: 4,
borderRadius: 10,
overflow: 'hidden',
backgroundColor: 'rgba(255, 255,255, 0.01)',
},
dropdownPlaceholder: {
color: COLORS.grey1,
whiteSpace: 'pre-line', // Allow multiline for placeholder
},
selectedText: {
color: COLORS.gradient[0],
fontSize: 16,
fontWeight: '400',
whiteSpace: 'pre-line', // Allow multiline for selected text
},
iconStyle: {
width: 25,
height: 25,
tintColor: COLORS.white,
color: COLORS.white,
},
itemText: {
color: '#000',
},
searchInput: {
height: 40,
fontSize: 16,
borderRadius: 20,
color: COLORS.black,
},
categoryText: {
color: 'white',
fontSize: 12,
fontWeight: '500',
},
blurView: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: COLORS.opbluedark,
},
gradientView: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
});
export default DropDownV2;