@febfeb/react-native-dropdown

A single pure component for drop-down/combobox in react native

Requirement

Please install react-native-vector-icons

Instalation

yarn add @febfeb/react-native-dropdown

Usage (Simple)

import Dropdown from '@febfeb/react-native-dropdown';

let fruits = [
    { id: 1, label: 'Apple'},
    { id: 2, label: 'Orange'},
    { id: 3, label: 'Pineapple'},
];

const [fruit, setFruit] = useState(1);

return (
    <Dropdown
        label='Select fruit'
        value={fruit}
        data={fruits}
        onChange={(val) => {
            setFruit(val);
        }}/>
);

Usage (Dark Theme)

import Dropdown from '@febfeb/react-native-dropdown';

let fruits = [
    { id: 1, label: 'Apple'},
    { id: 2, label: 'Orange'},
    { id: 3, label: 'Pineapple'},
];

const [fruit, setFruit] = useState(1);

const theme = {
    boxStyle: {
        borderColor: 'blue',
    },
};

return (
    <Dropdown
        label="Select fruit"
        theme={{
            containerStyle: {
                backgroundColor: '#000',
            },
            boxStyle: {
                backgroundColor: '#000',
                borderColor: '#fff',
            },
            labelStyle: {
                color: '#fff',
            },
            textContentStyle: {
                color: '#fff',
            },
            rightIconStyle: {
                color: '#fff',
            },
            modalRootStyle: {
                backgroundColor: 'rgba(255,255,255,0.5)',
            },
            modalContentStyle: {
                backgroundColor: '#000',
            },
            searchWrapperStyle: {
                backgroundColor: '#222',
            },
            searchIconStyle: {
                color: '#fff',
            },
            searchInputStyle: {
                color: '#fff',
            },
            listStyle: {
                backgroundColor: '#000',
            },
            listTextStyle: {
                color: "#fff",
            },
        }}
        placeholderTextColor={'rgba(255,255,255,0.8)'}
        value={fruit}
        data={fruits}
        onChange={(val) => {
            setFruit(val);
        }}
    />
);

Props

Prop | Type | Description --- | --- | --- value | string/number | This is mandatory for selecting the default value data | array of object with id and label attribute | Used as array of source data label | string | Title onChange | function | This event will be triggered after user click the list item renderDisplay | function | Use this function to custom render your dropdown showSearchBar | boolean | Use this to show search bar (default false) theme | Object | This is if you want to customize the appearance placeholderTextColor | string color | This is if you want to customize the placeholderTextColor props in TextInput