Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/budiadiono/react-native-custom-picker
React native customizable picker component.
https://github.com/budiadiono/react-native-custom-picker
custom customizable dropdown modal picker react-native typescript
Last synced: about 1 month ago
JSON representation
React native customizable picker component.
- Host: GitHub
- URL: https://github.com/budiadiono/react-native-custom-picker
- Owner: budiadiono
- Created: 2018-03-05T04:39:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:39:50.000Z (almost 2 years ago)
- Last Synced: 2024-07-08T07:09:00.903Z (3 months ago)
- Topics: custom, customizable, dropdown, modal, picker, react-native, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-custom-picker
- Size: 1.15 MB
- Stars: 43
- Watchers: 4
- Forks: 8
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-custom-picker ★15 - React native customizable picker component. (Components / UI)
- awesome-reactnative-ui - react-native-custom-picker - native-custom-picker/master/doc/images/basic-example.gif "Basic Example Demo")| (Others)
- awesome-react-native - react-native-custom-picker ★15 - React native customizable picker component. (Components / UI)
- awesome-react-native - react-native-custom-picker ★15 - React native customizable picker component. (Components / UI)
- awesome-reactnative-ui - react-native-custom-picker - native-custom-picker/master/doc/images/basic-example.gif "Basic Example Demo")| (Others)
- awesome-react-native - react-native-custom-picker ★15 - React native customizable picker component. (Components / UI)
README
# React Native Custom Picker
[](https://badge.fury.io/js/react-native-custom-picker)
[](https://travis-ci.org/budiadiono/react-native-custom-picker)
React native customizable picker component.
## Installation
Using npm:
```
npm i -S react-native-custom-picker
```
or yarn:
```
yarn add react-native-custom-picker
```
## Props
| Prop Name | Data Type | Default Values | Description |
|---------------------|-----------|-----------------|---------------------------------------------------|
| **options** | any[] | undefined | Option list. |
| value | any | undefined | Current selected item. |
| defaultValue | any | undefined | Default value. When clear button pressed this value become selected item.|
| placeholder | string | 'Pick an item' | Placeholder, as default text to display when no option is selected. |
| modalAnimationType | 'none', 'slide' or 'fade' | 'none' | Modal animation type. |
| headerTemplate | HeaderTemplateFunction | undefined | Assign function to render header. |
| footerTemplate | FooterTemplateFunction | undefined | Assign function to render footer. |
| fieldTemplate | FieldTemplateFunction | Basic/default field view | Assign function to render field view. |
| fieldTemplateProps | [FieldTemplateProps](#fieldtemplateprops) | undefined | Props for field template |
| optionTemplate | OptionTemplateFunction | Basic/default option view | Assign function to render option. |
| optionTemplateProps | [OptionTemplateProps](#optiontemplateprops) | undefined | Props for option template |
| getLabel | (selectedItem: any) => string | Returns `selectedItem.toString()` | Assign function to return the selected option text to be displayed in field. |
| style | ViewStyle | default | Style of field container. |
| backdropStyle | ViewStyle | default | Style of modal backdrop. |
| modalStyle | ViewStyle | default | Dropdown modal style. |
| maxHeight | ViewStyle | default | Maximum height of modal. |
| refreshControl | [RefreshControl](https://facebook.github.io/react-native/docs/refreshcontrol) | undefined | Component for pull-to-refresh functionality.
| scrollViewProps | ScrollViewProps | undefined | ScrollView props. See: https://github.com/budiadiono/react-native-custom-picker/issues/3 |
| onValueChange | ViewStyle | undefined | Event fired when value has been changed. |
| onFocus | ViewStyle | undefined | Event fired when modal is opened. |
| onBlur | ViewStyle | undefined | Event fired when modal is closed. |
### FieldTemplateProps
| Prop Name | Data Type | Default Values | Description |
|---------------------|-----------|-----------------|---------------------------------------------------|
| textStyle | TextStyle | undefined | Style of field text. |
| containerStyle | ViewStyle | undefined | Style of field container. |
| clearImage | JSX.Element | cross icon | Image element for clear button. |
### OptionTemplateProps
| Prop Name | Data Type | Default Values | Description |
|---------------------|-----------|-----------------|---------------------------------------------------|
| textStyle | TextStyle | undefined | Style of option text. |
| containerStyle | ViewStyle | undefined | Style of option container. |
## Example
### Basic Example (No Custom)
You can use `CustomPicker` component directly as shown below:
```javascript
import * as React from 'react'
import { Alert, View } from 'react-native'
import { CustomPicker } from 'react-native-custom-picker'
export class BasicExample extends React.Component {
render() {
const options = ['One', 'Two', 'Three', 'Four', 'Five']
return (
{
Alert.alert('Selected Item', value || 'No item were selected!')
}}
/>
)
}
}
```
### Advanced Example (Customized)
Or customize it your self like this:
```javascript
import * as React from 'react'
import { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native'
import { CustomPicker } from 'react-native-custom-picker'
export class CustomExample extends React.Component {
render() {
const options = [
{
color: '#2660A4',
label: 'One',
value: 1
},
{
color: '#FF6B35',
label: 'Two',
value: 2
},
{
color: '#FFBC42',
label: 'Three',
value: 3
},
{
color: '#AD343E',
label: 'Four',
value: 4
},
{
color: '#051C2B',
label: 'Five',
value: 5
}
]
return (
item.label}
fieldTemplate={this.renderField}
optionTemplate={this.renderOption}
headerTemplate={this.renderHeader}
footerTemplate={this.renderFooter}
onValueChange={value => {
Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
}}
/>
)
}
renderHeader() {
return (
This is header
)
}
renderFooter(action) {
return (
{
Alert.alert('Footer', "You've click the footer!", [
{
text: 'OK'
},
{
text: 'Close Dropdown',
onPress: action.close.bind(this)
}
])
}}
>
This is footer, click me!
)
}
renderField(settings) {
const { selectedItem, defaultText, getLabel, clear } = settings
return (
{!selectedItem && {defaultText}}
{selectedItem && (
Clear
{getLabel(selectedItem)}
)}
)
}
renderOption(settings) {
const { item, getLabel } = settings
return (
{getLabel(item)}
)
}
}
const styles = StyleSheet.create({
container: {
borderColor: 'grey',
borderWidth: 1,
padding: 15
},
innerContainer: {
flexDirection: 'row',
alignItems: 'stretch'
},
text: {
fontSize: 18
},
headerFooterContainer: {
padding: 10,
alignItems: 'center'
},
clearButton: { backgroundColor: 'grey', borderRadius: 5, marginRight: 10, padding: 5 },
optionContainer: {
padding: 10,
borderBottomColor: 'grey',
borderBottomWidth: 1
},
optionInnerContainer: {
flex: 1,
flexDirection: 'row'
},
box: {
width: 20,
height: 20,
marginRight: 10
}
})
```
## Example Projects
[Built with Typescript](https://github.com/budiadiono/react-native-custom-picker-example-ts)
[Built with Javascript](https://github.com/budiadiono/react-native-custom-picker-example)
## License
MIT