{"id":4292,"url":"https://github.com/budiadiono/react-native-custom-picker","last_synced_at":"2025-10-24T06:38:41.609Z","repository":{"id":42352889,"uuid":"123865446","full_name":"budiadiono/react-native-custom-picker","owner":"budiadiono","description":"React native customizable picker component.","archived":false,"fork":false,"pushed_at":"2022-12-08T17:39:50.000Z","size":1209,"stargazers_count":43,"open_issues_count":38,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-13T09:04:08.330Z","etag":null,"topics":["custom","customizable","dropdown","modal","picker","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-custom-picker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/budiadiono.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-05T04:39:41.000Z","updated_at":"2023-09-08T17:37:30.000Z","dependencies_parsed_at":"2023-01-25T15:01:22.364Z","dependency_job_id":null,"html_url":"https://github.com/budiadiono/react-native-custom-picker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-custom-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-custom-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-custom-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-custom-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/budiadiono","download_url":"https://codeload.github.com/budiadiono/react-native-custom-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826788,"owners_count":20354220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom","customizable","dropdown","modal","picker","react-native","typescript"],"created_at":"2024-01-05T20:17:07.115Z","updated_at":"2025-10-24T06:38:36.580Z","avatar_url":"https://github.com/budiadiono.png","language":"TypeScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# React Native Custom Picker\n\n[![npm version](https://badge.fury.io/js/react-native-custom-picker.svg)](https://badge.fury.io/js/react-native-custom-picker)\n[![build status](https://travis-ci.org/budiadiono/react-native-custom-picker.svg)](https://travis-ci.org/budiadiono/react-native-custom-picker)\n\nReact native customizable picker component.\n\n## Installation\n\nUsing npm:\n\n```\nnpm i -S react-native-custom-picker\n```\n\nor yarn:\n\n```\nyarn add react-native-custom-picker\n```\n\n## Props\n\n| Prop Name           | Data Type | Default Values  | Description                                       |\n|---------------------|-----------|-----------------|---------------------------------------------------|\n| **options**         | any[]     | undefined       | Option list.                                      |\n| value               | any       | undefined       | Current selected item.                            |\n| defaultValue        | any       | undefined       | Default value. When clear button pressed this value become selected item.|\n| placeholder         | string    | 'Pick an item'  | Placeholder, as default text to display when no option is selected. |\n| modalAnimationType  | 'none', 'slide' or 'fade' | 'none' | Modal animation type. |\n| headerTemplate      | HeaderTemplateFunction | undefined | Assign function to render header. |\n| footerTemplate      | FooterTemplateFunction | undefined | Assign function to render footer. |\n| fieldTemplate       | FieldTemplateFunction | Basic/default field view | Assign function to render field view. |\n| fieldTemplateProps  | [FieldTemplateProps](#fieldtemplateprops)     | undefined | Props for field template |\n| optionTemplate      | OptionTemplateFunction | Basic/default option view | Assign function to render option. |\n| optionTemplateProps | [OptionTemplateProps](#optiontemplateprops)     | undefined | Props for option template |\n| getLabel      | (selectedItem: any) =\u003e string | Returns `selectedItem.toString()`  | Assign function to return the selected option text to be displayed in field. |\n| style               | ViewStyle | default         | Style of field container.                         |\n| backdropStyle       | ViewStyle | default         | Style of modal backdrop.                          |\n| modalStyle          | ViewStyle | default         | Dropdown modal style.                             |\n| maxHeight           | ViewStyle | default         | Maximum height of modal.                          |\n| refreshControl      | [RefreshControl](https://facebook.github.io/react-native/docs/refreshcontrol) | undefined | Component for pull-to-refresh functionality.\n| scrollViewProps     | ScrollViewProps | undefined | ScrollView props. See: https://github.com/budiadiono/react-native-custom-picker/issues/3 |\n| onValueChange       | ViewStyle | undefined       | Event fired when value has been changed.          |\n| onFocus             | ViewStyle | undefined       | Event fired when modal is opened.                 |\n| onBlur              | ViewStyle | undefined       | Event fired when modal is closed.                 |\n\n### FieldTemplateProps\n\n| Prop Name           | Data Type | Default Values  | Description                                       |\n|---------------------|-----------|-----------------|---------------------------------------------------|\n| textStyle           | TextStyle | undefined       | Style of field text.                              |\n| containerStyle      | ViewStyle | undefined       | Style of field container.                         |\n| clearImage          | JSX.Element | cross icon    | Image element for clear button.                   |\n\n### OptionTemplateProps\n\n| Prop Name           | Data Type | Default Values  | Description                                       |\n|---------------------|-----------|-----------------|---------------------------------------------------|\n| textStyle           | TextStyle | undefined       | Style of option text.                             |\n| containerStyle      | ViewStyle | undefined       | Style of option container.                        |\n\n\n## Example\n\n### Basic Example (No Custom)\n\nYou can use `CustomPicker` component directly as shown below:\n\n![Basic Example Demo](https://rawgit.com/budiadiono/react-native-custom-picker/master/doc/images/basic-example.gif \"Basic Example Demo\")\n\n```javascript\nimport * as React from 'react'\nimport { Alert, View } from 'react-native'\nimport { CustomPicker } from 'react-native-custom-picker'\n\nexport class BasicExample extends React.Component {\n  render() {\n    const options = ['One', 'Two', 'Three', 'Four', 'Five']\n    return (\n      \u003cView style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}\u003e\n        \u003cCustomPicker\n          options={options}\n          onValueChange={value =\u003e {\n            Alert.alert('Selected Item', value || 'No item were selected!')\n          }}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n### Advanced Example (Customized)\n\nOr customize it your self like this:\n\n![Advanced Example Demo](https://rawgit.com/budiadiono/react-native-custom-picker/master/doc/images/advanced-example.gif \"Advanced Example Demo\")\n\n```javascript\nimport * as React from 'react'\nimport { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native'\nimport { CustomPicker } from 'react-native-custom-picker'\n\nexport class CustomExample extends React.Component {\n  render() {\n    const options = [\n      {\n        color: '#2660A4',\n        label: 'One',\n        value: 1\n      },\n      {\n        color: '#FF6B35',\n        label: 'Two',\n        value: 2\n      },\n      {\n        color: '#FFBC42',\n        label: 'Three',\n        value: 3\n      },\n      {\n        color: '#AD343E',\n        label: 'Four',\n        value: 4\n      },\n      {\n        color: '#051C2B',\n        label: 'Five',\n        value: 5\n      }\n    ]\n    return (\n      \u003cView style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}\u003e\n        \u003cCustomPicker\n          placeholder={'Please select your favorite item...'}\n          options={options}\n          getLabel={item =\u003e item.label}\n          fieldTemplate={this.renderField}\n          optionTemplate={this.renderOption}\n          headerTemplate={this.renderHeader}\n          footerTemplate={this.renderFooter}\n          onValueChange={value =\u003e {\n            Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')\n          }}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n\n  renderHeader() {\n    return (\n      \u003cView style={styles.headerFooterContainer}\u003e\n        \u003cText\u003eThis is header\u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n\n  renderFooter(action) {\n    return (\n      \u003cTouchableOpacity\n        style={styles.headerFooterContainer}\n        onPress={() =\u003e {\n          Alert.alert('Footer', \"You've click the footer!\", [\n            {\n              text: 'OK'\n            },\n            {\n              text: 'Close Dropdown',\n              onPress: action.close.bind(this)\n            }\n          ])\n        }}\n      \u003e\n        \u003cText\u003eThis is footer, click me!\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    )\n  }\n\n  renderField(settings) {\n    const { selectedItem, defaultText, getLabel, clear } = settings\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cView\u003e\n          {!selectedItem \u0026\u0026 \u003cText style={[styles.text, { color: 'grey' }]}\u003e{defaultText}\u003c/Text\u003e}\n          {selectedItem \u0026\u0026 (\n            \u003cView style={styles.innerContainer}\u003e\n              \u003cTouchableOpacity style={styles.clearButton} onPress={clear}\u003e\n                \u003cText style={{ color: '#fff' }}\u003eClear\u003c/Text\u003e\n              \u003c/TouchableOpacity\u003e\n              \u003cText style={[styles.text, { color: selectedItem.color }]}\u003e\n                {getLabel(selectedItem)}\n              \u003c/Text\u003e\n            \u003c/View\u003e\n          )}\n        \u003c/View\u003e\n      \u003c/View\u003e\n    )\n  }\n\n  renderOption(settings) {\n    const { item, getLabel } = settings\n    return (\n      \u003cView style={styles.optionContainer}\u003e\n        \u003cView style={styles.innerContainer}\u003e\n          \u003cView style={[styles.box, { backgroundColor: item.color }]} /\u003e\n          \u003cText style={{ color: item.color, alignSelf: 'flex-start' }}\u003e{getLabel(item)}\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    borderColor: 'grey',\n    borderWidth: 1,\n    padding: 15\n  },\n  innerContainer: {\n    flexDirection: 'row',\n    alignItems: 'stretch'\n  },\n  text: {\n    fontSize: 18\n  },\n  headerFooterContainer: {\n    padding: 10,\n    alignItems: 'center'\n  },\n  clearButton: { backgroundColor: 'grey', borderRadius: 5, marginRight: 10, padding: 5 },\n  optionContainer: {\n    padding: 10,\n    borderBottomColor: 'grey',\n    borderBottomWidth: 1\n  },\n  optionInnerContainer: {\n    flex: 1,\n    flexDirection: 'row'\n  },\n  box: {\n    width: 20,\n    height: 20,\n    marginRight: 10\n  }\n})\n```\n\n## Example Projects\n\n[Built with Typescript](https://github.com/budiadiono/react-native-custom-picker-example-ts)\n\n[Built with Javascript](https://github.com/budiadiono/react-native-custom-picker-example)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudiadiono%2Freact-native-custom-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbudiadiono%2Freact-native-custom-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudiadiono%2Freact-native-custom-picker/lists"}