/react-native-select-picker

Reanimated React Native Select Picker: reanimated dropdown select compatible with Android, IOS and Web

Primary LanguageTypeScriptMIT LicenseMIT

React Native Select Picker

@mustapha-ghlissi/react-native-select-picker: a Reanimated Picker Select for React Native.

MIT License npm npm npm npm github github github github

Screenshots

Simple Dropdown Custom Dropdown Advanced Dropdown Inline Dropdown

Demo

Demo

Example

You can check out this Example.

Installation

Installing the package

Use npm or yarn to install the package.

npm i @mustapha-ghlissi/react-native-select-picker
yarn add @mustapha-ghlissi/react-native-select-picker
Installing dependencies
npm i react-native-reanimated react-native-vector-icons
yarn add react-native-reanimated react-native-vector-icons

Note: to finish the installation, you have to finish configuring the installed dependencies react-native-reanimated and react-native-vector-icons.

Usage

import Dropdown from '@mustapha-ghlissi/react-native-select-picker';
import type {DropdownItem} from '@mustapha-ghlissi/react-native-select-picker';

const items: DropdownItem[] = [
    {
        label: 'Item 1',        
        value: 1
    },
    {
        label: 'Item 2',
        value: 2
    }
];

<Dropdown items={items}/>

Props

Parameter Type Description
items array<DropdownItem>: required List of items
displayItems number: optional Number of items to show in the dropdown
placeholder string: optional Inputtext placeholder
styles DropdownStyle : optional Dropdown styles
icon string, ReactNode: optional Dropdown toggler icon
outlineColor string: optional Dropdown outlineColor (default = '#000')
borderColor string: optional Dropdown borderColor (default = '#EBEAEC')
borderWidth number: optional Border width used for the dropdown (default = 1)
inline boolean: optional Display th dropdown in inlined mode. ((default = false))
multiple boolean: optional Render multi choice dropdown. ((default = false))
checkIcon string, ReactNode: optional Display the icon when the option is checked. React native vector icons is used and MaterialCommunityIcons is used by default.
animationDuration number: optional The spending duration to toggle the dropdown. ((default = 200))
onSelectChange callback: required Callback that returns the selected item/items (depending on multiple prop).

Types

DropdownStyle
Parameter Type Description
inputContainer ViewStyle: optional InputText Container style
inputText TextStyle: optional InputText field style
dropdownToggler ViewStyle: optional Dropdown Toggle style which wraps the InputText
iconContainer ViewStyle: optional Icon container style
dropdownList ViewStyle: optional Dropdown list style
dropdownItem ViewStyle: optional Dropdown list item style
dropdownItemText ViewStyle: optional Dropdown item text style
activeItem ViewStyle: optional Active item style
activeItemText TextStyle: optional Active item text style

DropdownItem
Parameter Type Description
label string: required Option label
value any: required Option value

Advanced Usage

import Dropdown from '@mustapha-ghlissi/react-native-select-picker';
import type {DropdownItem} from '@mustapha-ghlissi/react-native-select-picker';
import Icon from 'react-native-vector-icons/Ionicons';


const items: DropdownItem[] = [
    {
        label: 'Item 1',        
        value: 1
    },
    {
        label: 'Item 2',
        value: 2
    }
];

<Dropdown 
    items={items}
    inline
    multiple
    icon={<Icon name="chevron-down" size={26} />}
    styles={{
        inputContainer:  {
            borderColor: '#DEDEDE',
        },
        inputText: {
            fontSize: 19,
            fontFamily: 'Montserrat-Medium',
        },
        activeItem: {
            backgroundColor: 'purple',
        },
        activeItemText: {
            color: '#FFF'
        }
    }}
/>

Donate

Please contribute or donate so we can spend more time on this library.

Donate with Wise by clicking this link or by scanning the QRCode

Wise

Authors

Other libraries