React Native Dropdown Picker

📱 Screenshots

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.