Open TheRakeshPurohit opened 4 years ago
for Android: add {backgroundColor: 'transparent'} style to Picker
BAckground color in itself removes the icon ... the person asked how to change the icon not how to remove it @aqweider
Definitely need this feature right now, any update?
I'm also interested in this answer
Something happening here at all? Also need this feature but still it seems like not possible.
Also interested in this feature
also interested
I think It's very important and must have.
any update? we need this feature.
You will need to adjust the container rather than editing picker itself. Here is my approach for changing the dropdown icon.
import React, { useRef, useState } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import colors from '../../themes/Colors';
import { Image } from 'react-native';
export default function () {
const [selectedOption, setSelectedOption] = useState("Hoy");
const pickerRef = useRef();
const handleFocus = () => {
pickerRef.current?.focus()
}
return (
<View style={{ ...styles.pickerWrapper, width: selectedOption == 'Hoy' ? 80 : 140 }}>
<Picker
ref={pickerRef}
selectedValue={selectedOption}
style={{ ...styles.picker, width: selectedOption == 'Hoy' ? 110 : 170 }}
onValueChange={(itemValue, itemIndex) =>
setSelectedOption(itemValue)
}
mode='dropdown'
icon={<Image source={require("../../assets/caretdown.png")} style={styles.dropdownIcon} />}
>
<Picker.Item label="Hoy" value="Hoy" style={{ ...styles.pickerItem }} />
<Picker.Item label="Esta semana" value="Esta semana" style={{ ...styles.pickerItem }} />
</Picker>
<TouchableOpacity onPress={handleFocus} style={{ ...styles.iconContainer }}>
<Image source={require("../../assets/caretdown.png")} style={styles.dropdownIcon} />
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
label: {
fontSize: 20,
marginBottom: 10,
},
pickerWrapper: {
height: 31,
backgroundColor: colors.white,
borderRadius: 4,
overflow: 'hidden'
},
picker: { height: 31, paddingVertical: 0, marginTop: -10, paddingTop: 0 },
pickerItem: { height: 31, fontFamily: 'WorkSans-Medium', color: colors.blacktxt, fontSize: 14, lineHeight: 16.8 },
selectedText: {
fontSize: 16,
color: 'green',
},
iconContainer: {
position: 'absolute',
right: 0,
top: 0,
backgroundColor: colors.white,
width: 31,
height: 31,
alignItems: 'center',
justifyContent: 'center'
},
dropdownIcon: {
width: 16,
height: 16,
}
});
I'm also interested in this answer.