{"id":3961,"url":"https://github.com/beefe/react-native-picker","last_synced_at":"2025-05-14T12:12:36.900Z","repository":{"id":2959648,"uuid":"47930526","full_name":"beefe/react-native-picker","owner":"beefe","description":"A Native Picker with high performance.","archived":false,"fork":false,"pushed_at":"2022-05-29T03:52:37.000Z","size":824,"stargazers_count":1752,"open_issues_count":208,"forks_count":787,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-05-11T19:43:38.794Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","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/beefe.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":"2015-12-13T18:11:28.000Z","updated_at":"2025-04-09T13:28:26.000Z","dependencies_parsed_at":"2022-07-14T07:20:40.931Z","dependency_job_id":null,"html_url":"https://github.com/beefe/react-native-picker","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beefe","download_url":"https://codeload.github.com/beefe/react-native-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140768,"owners_count":22021220,"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":[],"created_at":"2024-01-05T20:16:56.635Z","updated_at":"2025-05-14T12:12:31.887Z","avatar_url":"https://github.com/beefe.png","language":"Java","readme":"# react-native-picker\n\n[![npm version](https://img.shields.io/npm/v/react-native-picker.svg?style=flat-square)](https://www.npmjs.com/package/react-native-picker) \u003ca href=\"https://david-dm.org/beefe/react-native-picker\"\u003e\u003cimg src=\"https://david-dm.org/beefe/react-native-picker.svg?style=flat-square\" alt=\"dependency status\"\u003e\u003c/a\u003e   \n\n![ui3](./doc/ui3.jpg)\n![ui4](./doc/ui4.jpg)\n\n### Documentation\n\n#### Params\n\n|Key | Type | Default| Support | Description |\n| --- | --- | ---- | ------ | ----------- |\n|isLoop                | Boolean | false              |     Android  |   |\n|pickerTextEllipsisLen | number  | 6                  |     Android  |   |\n|pickerConfirmBtnText  | string  | confirm            | iOS/Android  |   |\n|pickerCancelBtnText   | string  | cancel             | iOS/Android  |   |\n|pickerTitleText       | string  | pls select         | iOS/Android  |   |\n|pickerConfirmBtnColor | array   | [1, 186, 245, 1]   | iOS/Android  |   |\n|pickerCancelBtnColor  | array   | [1, 186, 245, 1]   | iOS/Android  |   |\n|pickerTitleColor      | array   | [20, 20, 20, 1]    | iOS/Android  |   |\n|pickerToolBarBg       | array   | [232, 232, 232, 1] | iOS/Android  |   |\n|pickerBg              | array   | [196, 199, 206, 1] | iOS/Android  |   |\n|pickerToolBarFontSize | number  | 16                 | iOS/Android  |   |\n|wheelFlex             | array   | [1, 1, 1]          | iOS/Android  |   |\n|pickerFontSize        | number  | 16                 | iOS/Android  |   |\n|pickerFontColor       | array   | [31, 31, 31, 1]    | iOS/Android  |   |\n|pickerFontFamily      | string  |                    | iOS/Android  |   |\n|pickerRowHeight       | number  | 24                 | iOS          |   |\n|pickerData            | array   |                    | iOS/Android  |   |\n|selectedValue         | array   |                    | iOS/Android  |   |\n|onPickerConfirm       | function|                    | iOS/Android  |   |\n|onPickerCancel        | function|                    | iOS/Android  |   |\n|onPickerSelect        | function|                    | iOS/Android  |   |\n\n#### Methods\n\n|Key | Support | Description |\n| --- | ---- | ----------- |\n|init         | iOS/Android |init and pass parameters to picker      |\n|toggle       | iOS/Android |show or hide picker                     |\n|show         | iOS/Android |show picker                             |\n|hide         | iOS/Android |hide picker                             |\n|select       | iOS/Android |select a row                            |\n|isPickerShow | iOS/Android |get status of picker, return a boolean  |\n\n\n### Usage\n\n#### Step 1 - install\n\n```javascript\n\tnpm install react-native-picker --save\n```\n\n#### Step 2 - link\n\n```\n\treact-native link\n```\n\n#### Step 3 - import and use in project\n\n```javascript\nimport Picker from 'react-native-picker';\nlet data = [];\nfor(var i=0;i\u003c100;i++){\n    data.push(i);\n}\n\nPicker.init({\n    pickerData: data,\n    selectedValue: [59],\n    onPickerConfirm: data =\u003e {\n        console.log(data);\n    },\n    onPickerCancel: data =\u003e {\n        console.log(data);\n    },\n    onPickerSelect: data =\u003e {\n        console.log(data);\n    }\n});\nPicker.show();\n\t\n```\n\n### Integration With Existing Apps (`iOS`)\nThe `Podfile` will like below:\n``` ruby\nplatform :ios, '8.0'\ntarget 'YourTarget' do\n    pod 'React', :path =\u003e '../YOUR_REACT_NATIVE_PROJECT/node_modules/react-native', :subspecs =\u003e [\n    'Core',\n    ...\n    ]\n    pod 'Picker', :path =\u003e '../YOUR_REACT_NATIVE_PROJECT/node_modules/react-native-picker'\nend\n```\nAfter you have updated the `Podfile` of the existing app, you can install `react-native-picker` like below:\n``` bash\n$ pod install\n```\n\n### Notice\n\n#### support two modes:\n\n\u003cb\u003e1. parallel:\u003c/b\u003e such as time picker, wheels have no connection with each other\n\n\u003cb\u003e2. cascade:\u003c/b\u003e such as date picker, address picker .etc, when front wheel changed, the behind wheels will all be reset\n\n#### parallel:\n\n- single wheel:\n\n```javascript\npickerData = [1,2,3,4];\nselectedValue = 3;\n```\n\n- two or more wheel:\n\n```javascript\npickerData = [\n    [1,2,3,4],\n    [5,6,7,8],\n    ...\n];\nselectedValue = [1, 5];\n```\n\n#### cascade:\n\n- two wheel\n\n```javascript\npickerData = [\n    {\n        a: [1, 2, 3, 4]\n    },\n    {\n        b: [5, 6, 7, 8]\n    },\n    ...\n];\nselectedValue = ['a', 2];\n```\n\n- three wheel\n\n```javascript\npickerData = [\n    {\n        a: [\n            {\n                a1: [1, 2, 3, 4]\n            },\n            {\n                a2: [5, 6, 7, 8]\n            },\n            {\n                a3: [9, 10, 11, 12]\n            }\n        ]\n    },\n    {\n        b: [\n            {\n                b1: [11, 22, 33, 44]\n            },\n            {\n                b2: [55, 66, 77, 88]\n            },\n            {\n                b3: [99, 1010, 1111, 1212]\n            }\n        ]\n    },\n    {\n        c: [\n            {\n                c1: ['a', 'b', 'c']\n            },\n            {\n                c2: ['aa', 'bb', 'cc']\n            },\n            {\n                c3: ['aaa', 'bbb', 'ccc']\n            }\n        ]\n    },\n    ...\n]\n```\n\n### For pure javascript version -\u003e [v3.0.5](https://github.com/beefe/react-native-picker/tree/pure-javascript-version)  \n","funding_links":[],"categories":["Components","\u003ca name=\"Alter,-Prompt,-Action-\u0026-Dialog:-Native-Modules\"\u003eAlter, Prompt, Action \u0026 Dialog: Native Modules\u003c/a\u003e","Java","组件","Libraries","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeefe%2Freact-native-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-picker/lists"}