CustomDropdown

A fully customizable dropdown/select component for React Native.
Supports single and multiple selection, optional search, and full styling customization. Works on both iOS and Android.

Features

• Single and multiple select modes
• Optional searchable list
• Customizable placeholder, colors, height, width, font size, and border radius
• Lightweight and easy to integrate
• Shadow and style support for dropdown list
• Works seamlessly with dynamic data

If you love this library, give us a star, you will be a ray of sunshine in our lives :)

Getting started

npm install custom-react-native-dropdown

or

yarn add custom-react-native-dropdown

Dropdown Props

| Prop | Type | Default | Description | | ------------------ | ------------------------------------------------ | ------------------ | ----------------------------------------------------------------------------- | | data | DropdownItem[] | [] | Array of items to show. Each item: { label: string; value: string\|number } | | placeholder | string | 'Select an item' | Text shown when nothing selected | | onSelect | (item: DropdownItem \| DropdownItem[]) => void | — | Callback when selection changes | | searchable | boolean | false | Whether to show a search input | | multiple | boolean | false | Whether multiple items can be selected | | selectedValues | DropdownItem[] | [] | Initial selected items | | primaryColor | string | '#007AFF' | Color for selected text / highlight | | dropdownBgColor | string | '#FFFFFF' | Background color of dropdown list | | textColor | string | '#333333' | Color of text items | | borderColor | string | '#CCCCCC' | Border color of dropdown | | placeholderColor | string | '#999999' | Color of the placeholder text | | selectedBgColor | string | '#E3F2FD' | Background color for selected item(s) in list | | dropdownShadow | boolean | true | Whether to show shadow on dropdown list | | fontSize | number | 16 | Font size for items and placeholder | | width | number \| string | '100%' | Width of dropdown trigger container | | height | number | 50 | Height of dropdown trigger container | | maxHeight | number | 220 | Maximum height of dropdown list | | borderRadius | number | 8 | Border radius for dropdown & list |

Dropdown example

  import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import CustomDropdown from './src/components/CustomDropdown';

interface DropdownItem {
  label: string;
  value: string | number;
}

export default function App() {
  const [selectedFruits, setSelectedFruits] = useState<DropdownItem[]>([]);

  const fruits = [
    { label: 'Apple', value: '1' },
    { label: 'Banana', value: '2' },
    { label: 'Cherry', value: '3' },
    { label: 'Mango', value: '4' },
    { label: 'Orange', value: '5' },
    { label: 'Grapes', value: '6' },
  ];

  return (
    <View style={styles.container}>
      <CustomDropdown
        data={fruits}
        placeholder="Select fruits"
        searchable
        multiple
        selectedValues={selectedFruits}
        onSelect={(items) => setSelectedFruits(items as DropdownItem[])}
        primaryColor="#D32F2F"
        dropdownBgColor="#FFEBEE"
        selectedBgColor="#FFCDD2"
        textColor="#212121"
        borderColor="#E57373"
        placeholderColor="#9E9E9E"
        width={350}
        height={40}
        maxHeight={250}
        borderRadius={10}
        fontSize={15}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#FAFAFA',
  },
});