React Native Select Picker

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

Screenshots

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

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

Authors

• @mustapha-ghlissi

Other libraries

• react-native-otp: One time password input for React Native.
• react-native-accordion: Reanimated collapsible sections for React Native.