@mustapha-ghlissi/react-native-select-picker NPM

React Native Select Picker

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

Screenshots

Simple Dropdown Custom Dropdown Advanced Dropdown Inline Dropdown

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

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'
        }
    }}
/>