is there any way to change default dropdown icon ?

[TheRakeshPurohit]

[BrandonBlanchard]

I'm also interested in this answer.

[aqweider]

for Android: add {backgroundColor: 'transparent'} style to Picker

[C-odes]

BAckground color in itself removes the icon ... the person asked how to change the icon not how to remove it @aqweider

[rajinpangkalpundai]

Definitely need this feature right now, any update?

[appboomorbust]

I'm also interested in this answer

[misha15w]

Something happening here at all? Also need this feature but still it seems like not possible.

[Andrea-Arguello]

Also interested in this feature

[nathalia-rus]

also interested

[ggepenyan]

I think It's very important and must have.

[Julio-de-Leon]

any update? we need this feature.

[billscope]

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,
    }
});