Customize elements in react-native-dropdown-picker

Question

React Native Dropdown Picker is the most popular library to implement a dropdown in React Native. But in the library, I could not find a way to customize the dropdown arrow and the ticks in the dropdown list. They are by default in black color and cannot be customized with my knowledge.

Basic implementation:

import DropDownPicker from 'react-native-dropdown-picker';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
     { label: 'ice-cream', value: '1' },
     { label: 'strawberry', value: '2' },
     { label: 'grapes', value: '3' },
     { label: 'fruit salad', value: '4' },
     { label: 'jello', value: '5' },
     { label: 'apple', value: '6' },
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

Sample Output:[Click here to see the output]2

There is a prop in the called arrowIconStyle. But for that also, I could not find a way to give a color as a style.

Ex: arrowIconStyle={{color: 'white'}}

Unfortunately this does not work and gives an error: 

Type '{ color: string; }' is not assignable to type 'StyleProp'.ts(2322)

Can someone please help me regarding this?

Thank you.

Answer 1

//to change the dropdown box style
dropDownContainerStyle={{
  backgroundColor: "#dfdfdf"
}}

// to style the selected item style
selectedItemContainerStyle={{
   backgroundColor: "grey"
}}

for more details visit their website

and check the Dropdown and List and Items sections

Answer 2

This code is using core components without any third party library except icons, I love icons!!! :D ;) <3

Android Sample

Web Sample

iOs Sample

Click Me!!! to try this code on Expo Snack

import { StyleSheet, Text, View, Pressable, Dimensions, Modal, TouchableOpacity, FlatList } from "react-native";
import React from "react";
import Icon from 'react-native-vector-icons/AntDesign';

export default class SignUp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            genders: ['Male', 'Female', 'Others'],
            genderModal: false,
            selectedGender: "Select Gender",
            genderDropdownTop: 0,
        }
    }

    componentDidMount() {
        console.log('componentDidMount called.');
    }

    shouldComponentUpdate(nextProp, nextState) {
        console.log('shouldComponentUpdate nextProp: ' + nextProp);
        console.log('shouldComponentUpdate nextState: ' + nextState);
        return true;
    }

    render() {
        return (
            <>
                <View style={{ alignSelf: "center", alignItems: "center", backgroundColor: "black", marginLeft: 10, marginRight: 10, width: Dimensions.get('window').width - 30, height: 600 }}>
                    {/* Selecting person dropdown */}
                    <View>
                        <Modal visible={this.state.genderModal}
                            transparent
                            animationType="slide"
                            onRequestClose={() => this.setState({ genderModal: false })}>
                            <TouchableOpacity
                                style={{ width: '100%', height: '80%', justifyContent: 'center', alignItems: 'center' }}>
                                <View style={{ backgroundColor: '#000000', width: 130, shadowRadius: 4, shadowOffset: { height: 4, width: 0 }, shadowOpacity: 0.5, borderColor: 'white', borderWidth: 1, top: this.state.genderDropdownTop }}>
                                    <FlatList
                                        data={this.state.genders}
                                        renderItem={({ item }) => (
                                            <TouchableOpacity style={{ paddingHorizontal: 10, paddingVertical: 10, borderBottomWidth: 1, borderColor: 'white', borderWidth: 1 }} onPress={() => {
                                                this.setState({ genderModal: false })
                                                this.setState({ selectedGender: item })
                                            }}>
                                                <Text style={{ color: '#fff' }}> {item} </Text>
                                            </TouchableOpacity>
                                        )}
                                        keyExtractor={(index) => index.toString()}
                                    />
                                </View>
                            </TouchableOpacity>
                        </Modal>
                    </View>
                    < View style={{ flexDirection: 'row-reverse', borderColor: 'white', borderWidth: 1, width: 150, marginTop: 10 }}>
                        <Pressable
                            onPress={() => this.setState({ genderModal: true })}>
                            <Icon size={30} color="white" name="circledown" />
                        </Pressable>
                        < Text style={{ color: 'white', marginRight: 10, fontSize: 20 }}> {this.state.selectedGender} </Text>
                    </View>
                </View >
            </>
        );
    }

    componentDidUpdate(prevProp, prevState) {
        console.log('componentDidUpdate prevProp: ' + prevProp);
        console.log('componentDidUpdate prevState: ' + prevState);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount called.');
    }

    componentDidCatch(error, info) {
        console.log('componentDidCatch Error: ' + error);
        console.log('componentDidCatch Info: ' + info);
    }
}

Answer 3

You can customize the icons in this way.

import DropDownPicker from 'react-native-dropdown-picker';
import AntDesign from 'react-native-vector-icons/AntDesign';

                    <DropDownPicker
                    showArrowIcon={true}
                    ArrowDownIconComponent={({style}) => (
                      <AntDesign
                        style={{marginRight: 5}}
                        color="green"
                        name="check"
                        size={20}
                      />
                    )}
                    ArrowUpIconComponent={({style}) => (
                      <AntDesign
                        style={{marginRight: 5}}
                        color="red"
                        name="check"
                        size={20}
                      />
                    )}
                    showTickIcon={true}
                    TickIconComponent={({style}) => (
                      <AntDesign
                        style={{marginRight: 5}}
                        color="green"
                        name="check"
                        size={20}
                      />
                    )}
/>

Answer 4

try to change the arrow icon and implement your own styles for the icon like the following: https://snack.expo.dev/@hewr/57a779