The above screenshots were taken from this example.

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>
    );
}

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.

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

PRs should be made against and merged into the dev-5.x branch, which is set as the default branch on GitHub.

Releases are currently made from the 5.x branch.

To make a new release, follow these steps:

• Verify the development branch has all the changes desired in the release and works well
• You can test changes to this library and experiment easily with patch-package
• Once you have made changes, and after finalizing them, use npm pack to test your new, changed version of this library locally and check it works correctly
• Make and merge a final PR into the development branch that increments the version number in package.json
• Make and merge a PR from the development branch to the release branch
• Using the GitHub web UI, draft a new release using the tag name vx.x.x (replace the x values as appropriate). Use the release branch as the target, with the release name being vx.x.x (again, with appropriate numbers in place of x)
• Verify in the GitHub Actions panel for the repository that npm publish succeeded