Skip to content

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.

License

Notifications You must be signed in to change notification settings

hossein-zare/react-native-dropdown-picker

Repository files navigation

React Native Dropdown Picker

GitHub repo Build Status PRs welcome react-native-dropdown-picker is released under the MIT license. Current npm package version. Weekly npm downloads Documentation


πŸ“± Screenshots

Screenshot showing basic dropdown Screenshot showing badges Screenshot showing dark theme and parent items

The above screenshots were taken from this example.

πŸ‘‹ Usage

Basic usage

The following code shows basic usage of this library:

import React, {useState} from 'react';
import {View, Text} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

export default function App() {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(null);
    const [items, setItems] = useState([
        {label: 'Apple', value: 'apple'},
        {label: 'Banana', value: 'banana'},
        {label: 'Pear', value: 'pear'},
    ]);

    return (
        <View style={{flex: 1}}>
            <View
                style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                    paddingHorizontal: 15,
                }}>
                <DropDownPicker
                    open={open}
                    value={value}
                    items={items}
                    setOpen={setOpen}
                    setValue={setValue}
                    setItems={setItems}
                    placeholder={'Choose a fruit.'}
                />
            </View>

            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Text>Chosen fruit: {value === null ? 'none' : value}</Text>
            </View>
        </View>
    );
}

Further information on usage

You can find more examples in the examples subdirectory. This subdirectory is a working Expo project demonstrating this library. It shows how to use this library with class components as well as with function components, and in TypeScript as well as in JavaScript. Navigate into the examples subdirectory, run npm install, and then run npx expo start to see the examples working.

For further information on how to use this library, read the usage documentation.

πŸ“„ Further documentation

The docs can be read at: https://hossein-zare.github.io/react-native-dropdown-picker-website

The docs can be edited at: https://github.com/hossein-zare/react-native-dropdown-picker-website

πŸ˜• Support and issues

If you have questions or need help, you can ask a question on Stack Overflow or make a GitHub issue. You can also make a GitHub issue to report a bug or make a feature request.

πŸš€οΈ Contributing

See CONTRIBUTING.md.