@mustapha-ghlissi/react-native-select-picker
v1.1.2
Published
React Native Select Picker: Reanimated dropdown select compatible with Android, IOS and Web
Downloads
95
Maintainers
Readme
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
Other libraries
- react-native-otp: One time password input for React Native.
- react-native-accordion: Reanimated collapsible sections for React Native.