Skip to content

BahmanBinary/rnpicker

Repository files navigation

RNPicker

Preface

Hello friends! For a while I was looking for a good, customizable Picker for react native but most of these pickers have little flexibility. For example you can't support RTL correctly or use custom component for each picker items.

Documentation

Installation
npm install @bahmanbinary/rnpicker
yarn add @bahmanbinary/rnpicker
APIs
Props
Prop Type Default Description
data {label: string | number, value: string | number, selected?:boolean}[] [] Data for each item
rtl boolean false Enable right to left support
itemComponent React Native Component Wrapper component for each item
itemStyle {} - Custom style applied to each itemComponent
iconComponent React Native Component (props: { iconColor:string, iconSize:number, iconStyle:{} ,...props:any }) Icon component
onSelect ( item:string | number, index:number ) => void - Function that will be executed for each item selected
containerStyle {} - RNPicker container custom style
placeholder string 'Please select' Placeholder
placeholderStyle {} - RNPicker placeholder custom style
iconColor string 'black' Icon color applied to each iconComponent
iconSize number Icon size applied to each iconComponent
iconStyle {} - Custom style applied to each iconComponent
Methods
Method Type Description
dismissPicker () => void Dismiss opened picker
Usage
import React,{Component} from 'react';
import RNPicker from '@bahmanbinary/rnpicker';

export default class Example extends Component{
    render(){
return <RNPicker data=[
	{label:'item 1', value:1},
    {label:'item 2', value:2},
    {label:'item 3', value:3, selected:true},
    {label:'item 4', value:4},
    {label:'item 5', value:5}
]        
        />
    }
}

If this project was useful to you, give it a Star ! ⭐😎😉