{"id":4342,"url":"https://github.com/talut/react-native-picker-module","last_synced_at":"2025-08-04T01:32:05.854Z","repository":{"id":34048371,"uuid":"167326569","full_name":"talut/react-native-picker-module","owner":"talut","description":"React Native Picker Module Android \u0026 IOS","archived":false,"fork":false,"pushed_at":"2023-03-15T15:29:43.000Z","size":265,"stargazers_count":97,"open_issues_count":4,"forks_count":34,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T02:36:27.328Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/talut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":null,"patreon":"talut","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-01-24T07:55:05.000Z","updated_at":"2024-02-02T07:16:59.000Z","dependencies_parsed_at":"2024-01-08T01:02:52.354Z","dependency_job_id":"98681064-3c2e-4577-927a-210c0f12501d","html_url":"https://github.com/talut/react-native-picker-module","commit_stats":{"total_commits":80,"total_committers":10,"mean_commits":8.0,"dds":0.5,"last_synced_commit":"fbd00cf27f40b8c4e2ca87adbaba86f3913d3598"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-picker-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-picker-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-picker-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-picker-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/talut","download_url":"https://codeload.github.com/talut/react-native-picker-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"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:17:08.906Z","updated_at":"2024-12-07T08:30:31.881Z","avatar_url":"https://github.com/talut.png","language":"Java","readme":"# React Native Picker Module for Android \u0026 IOS\n\nWith this package you can easily use picker with onPress function.\n\nUsing `react-native-modal` and `@react-native-picker/picker` component for IOS and using `RecyclerView` and `AlertDialog` for Android as `NativeModule`.\n\n\n\u003cimg src=\"./docs/android-picker-module.png\" width=\"200\"\u003e \u003cimg width=\"200\" src=\"./docs/ios-picker-module.png\"\u003e\n\n## v2.0.7 released.\n- Picker library updated to `@react-native-picker/picker` from `@react-native-community/picker`\n\n## v2.0.6 released.\n- TypeScript type definitions updated.\n- Android Gradle updated.\n- `backgroundColor` prop added for Android.\n- `tintColor` prop added for Android \u0026 IOS.\n- `confirmButtonAlwaysEnabled` prop added for IOS.\n- `pickerRef` changed to `ref` and `forwardRef` used.\n\n\n## v2.0.4 released.\n- @react-native-picker/picker added because picker maintainer is changed.\n\n### v2.0.31 released.\n\n### v2.0.31\n- PRs merged. Some issues fixed\n\n### v2.0.2\n- Android input.substr issue solved.\n\n### v2.0.1\n- On IOS null value issue solved.\n\n### Version 2.0.0\n- useNativeDriver flag added.\n- @react-native-community/picker added because picker extracted from core react native\n- react-native-modal added to package for IOS\n- selectedColor added\n- disabled \u0026 enabled IOS confirm button styles added.\n- Now we can set object array for items or array.\n- IOS part start using hooks\n- confirmButtonStyle \u0026 cancelButtonStyle \u0026 contentContainerStyle added\n- Adding image to picker item at Android removed. If you need this feature please use v1.3.1\n- **And a lot of upgrade...**\n\n\n## Getting Started\n\n**With YARN**\n\n```\nyarn add react-native-picker-module \u0026\u0026 yarn add react-native-modal \u0026\u0026 yarn add @react-native-picker/picker\n```\n\n#### After React Native v0.60.0\n\n```\ncd ios \u0026\u0026 pod install\n```\n\n#### Before React Native v0.60.0\n**Automatic linking**\n\n```\nreact-native link react-native-picker-module\n```\n\n**Manual Linking**\n\n**[Manual Installation](/docs/manual-installation.md)** (If something went wrong with react-native link)\n\n## Props\n\n| Props                          | Type                 | Default \u0026 Description   | Required | OS        |\n|--------------------------------|----------------------|-------------------------|----------|-----------|\n| value                          | string               | -                       |**No**        |Android, IOS|\n| useNativeDriver                | bool                 | `true`                  |**No**        |IOS|\n| backdropColor                  | string               | -                       |**No**        |IOS|\n| backdropOpacity                | double               | `0.7`                   |**No**        |IOS|\n| items                          | array / object array | -                       |**Yes**    |Android, IOS|\n| title                          | string               | -                       |**No**        |Android, IOS|\n| titleStyle                     | object               | {}                      |**No**        |IOS        |\n| confirmButtonStyle             | object               | {}                      |**No**        |IOS        |\n| cancelButtonStyle              | object               | {}                      |**No**        |IOS        |\n| contentContainerStyle          | object               | {}                      |**No**        |IOS        |\n| itemStyle                      | object               | {}                      |**No**        |IOS        |\n| cancelButtonTextStyle          | object               | {}                      |**No**        |IOS        |\n| confirmButtonEnabledTextStyle  | object               | {}                      |**No**        |IOS        |\n| confirmButtonDisabledTextStyle | object               | {}                      |**No**        |IOS        |\n| ref                            | RefObject            | -                       |**Yes**   |Android, IOS|\n| onValueChange                  | func                 | (value: string) =\u003e void |**Yes**   |Android, IOS|\n| cancelButton                   | string               | `Cancel`                |**No**        |IOS        |\n| confirmButton                  | string               | `Confirm`               |**No**        |IOS        |\n| onCancel                       | func                 | -                       |**No**    |Android, IOS|\n| selectedColor                  | string               | -                       |**No**    |Android, IOS|\n| backgroundColor                | string               | -                       |**No**    |Android|\n| tintColor                      | string               | -                       |**No**    |Android, IOS|\n| confirmButtonAlwaysEnabled     | bool                 | `false`                  |**No**    |IOS|\n\n\n## Usage with Hooks\n```javascript\nimport React, {useRef, useState} from 'react';\nimport {Button, SafeAreaView, Text} from 'react-native';\nimport ReactNativePickerModule, {PickerRef} from 'react-native-picker-module';\n\nconst App = () =\u003e {\n    const pickerRef = useRef\u003cPickerRef\u003e(null);\n    const [value, setValue] = useState();\n    const dataset_1 = [1, 2, 'Java', 'Kotlin', 'C++', 'C#', 'PHP'];\n    return (\n            \u003c\u003e\n                \u003cSafeAreaView\u003e\n                    \u003cButton\n                            title=\"Select a language\"\n                            onPress={() =\u003e pickerRef.current?.show()}\n                    /\u003e\n                    \u003cText\u003eSelected Item Text: {value}\u003c/Text\u003e\n                \u003c/SafeAreaView\u003e\n                \u003cReactNativePickerModule\n                        ref={pickerRef}\n                        value={value}\n                        title={'Select a language'}\n                        items={dataset_1}\n                        titleStyle={{color: 'white'}}\n                        itemStyle={{color: 'white'}}\n                        selectedColor=\"#FC0\"\n                        confirmButtonEnabledTextStyle={{color: 'white'}}\n                        confirmButtonDisabledTextStyle={{color: 'grey'}}\n                        cancelButtonTextStyle={{color: 'white'}}\n                        confirmButtonStyle={{\n                            backgroundColor: 'rgba(0,0,0,1)',\n                        }}\n                        cancelButtonStyle={{\n                            backgroundColor: 'rgba(0,0,0,1)',\n                        }}\n                        contentContainerStyle={{\n                            backgroundColor: 'rgba(0,0,0,1)',\n                        }}\n                        onCancel={() =\u003e {\n                            console.log('Cancelled');\n                        }}\n                        onValueChange={value =\u003e {\n                            console.log('value: ', value);\n                            setValue(value);\n                        }}\n                /\u003e\n            \u003c/\u003e\n    );\n};\n\nexport default App;\n\n\n```\n\n## FYI\nYou can use more than one picker in same screen. You just need to set different pickerRef.\n\n## License\nThis project is licensed under the MIT License - see the LICENSE.md file for details\n","funding_links":["https://patreon.com/talut"],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalut%2Freact-native-picker-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalut%2Freact-native-picker-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalut%2Freact-native-picker-module/lists"}