{"id":21524204,"url":"https://github.com/gxsshallot/react-native-picklist","last_synced_at":"2025-10-08T12:03:01.628Z","repository":{"id":32504658,"uuid":"133648881","full_name":"gxsshallot/react-native-picklist","owner":"gxsshallot","description":"A picklist page support single or multi select, single or multi level data, and display.","archived":false,"fork":false,"pushed_at":"2022-12-03T10:31:13.000Z","size":1781,"stargazers_count":28,"open_issues_count":13,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-16T01:40:25.666Z","etag":null,"topics":["multilevel-data","picklist","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gxsshallot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-16T10:21:46.000Z","updated_at":"2024-01-22T05:57:32.000Z","dependencies_parsed_at":"2023-01-14T21:26:14.026Z","dependency_job_id":null,"html_url":"https://github.com/gxsshallot/react-native-picklist","commit_stats":null,"previous_names":["rncommon/react-native-picklist"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/gxsshallot/react-native-picklist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-picklist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-picklist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-picklist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-picklist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gxsshallot","download_url":"https://codeload.github.com/gxsshallot/react-native-picklist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-picklist/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271420167,"owners_count":24756492,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["multilevel-data","picklist","react-native"],"created_at":"2024-11-24T01:21:32.051Z","updated_at":"2025-10-08T12:02:56.598Z","avatar_url":"https://github.com/gxsshallot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-picklist\n\n[![npm version](https://img.shields.io/npm/v/react-native-picklist.svg?style=flat)](https://www.npmjs.com/package/react-native-picklist)\n[![Build Status](https://travis-ci.org/gaoxiaosong/react-native-picklist.svg?branch=master)](https://travis-ci.org/gaoxiaosong/react-native-picklist)\n\n[中文说明](https://www.jianshu.com/p/e78b6187f5a0)\n\nThis is a picklist page. It supports:\n\n* Single Level or Multiple Level data.\n* Single Select or Multiple Select.\n* Show or Hide the internal components.\n* Customize the UI component.\n* Search in the data automaticlly.\n* Section style page.\n\n## ScreenShots\n\n\u003cp float=\"left\"\u003e\n\n\u003cimg src=\"/resource/1.gif\" width=\"25%\"\u003e\n\n\u003cimg src=\"/resource/2.gif\" width=\"25%\"\u003e\n\n\u003c/p\u003e\n\nSame UI on Android.\n\n## Install\n\nInstall by Yarn:\n\n```shell\nyarn add react-native-picklist\n```\n\nInstall by NPM:\n\n```shell\nnpm install --save react-native-picklist\n```\n\n## Usage\n\nImport the module in the file:\n\n```jsx\nimport PickList from 'react-native-picklist';\n\nexport default class TopPage extends React.PureComponent {\n    static navigationOptions = PickList.navigationOptions;\n\n    render() {\n        return (\n            \u003cPickList\n                // ...\n            /\u003e\n        );\n    }\n}\n```\n\nIf you want to use button in  `navigationOptions`, you should set following items:\n\n```javascript\nimport { HeaderButton } from 'react-navigation-header-buttons';\n\nHeaderButton.defaultProps.getButtonElement = (props) =\u003e {\n    const {title} = props;\n    return (\n        \u003cText\u003e\n            {title}\n        \u003c/Text\u003e\n    );\n};\n```\n\nYou can set the following properties or see example project to learn how to use it.\n\n## Properties\n\nRequired:\n\n* `title`:  Page title.\n* `data`: Data to show. We will construct a virtual root node to contain it.\n* `navigation`: Navigator's props.\n\nOptional:\n\n* `firstTitleLine`: First item displayed in `TitleLine` when it has the multi-level data and show the title line.\n* `isCascade`: When multi-level and multi-select are true, auto-cascading selects child nodes or not. Default is `true`.\n* `multilevel`: Has multi-level data or not. Default is `false`.\n* `multiselect`: Is multi-select or not. Default is `false`.\n* `onFinish`: Pass the selected items when finish selecting.\n* `rightTitle`: Button title on the right corner.\n* `rightClick`: Button click callback on the right corner.\n* `renderRow`: Customize a row display. You can override this property to make the list readonly. Default implement is in `DefaultRow.js`.\n* `renderHeader`: Customize header of page.\n* `renderSingleSelectIcon`: Customize single-selected icon.\n* `renderMultiSelectIcon`: Customize multi-selected icon.\n* `showBottomView`: Show bottom bar or not.\n* `showSearchView`: Show search bar or not.\n* `showTitleLine`: Show title line at the header or not.\n* `showAllCell`: Show select all or deselect all cell or not.\n* `showCount`: Show not leaf item's children count and selected count.\n* `numberOfTextLines`: Max number of lines of `Text` component in one row. Default is `0`, means no restrict of lines. You can set to `1` for single line text mode.\n* `directBackWhenSingle`: Directly go back to previous page or not when single-select data.\n* `cancelableWhenDirectBack`: Selected item is cancelable or not when single-select data and `directBackWhenSingle` is `true`.\n* `selectedIds`: Initial selected item's identifier list.\n* `selectable`: Can a tree node selectable or not.\n* `childrenKey`: Children key of tree node.\n* `idKey`: Identifier key of tree node, supports array of string or one string only.\n* `labelKey`: Label key of tree node.\n* `searchKeys`: Normal search keys of tree node.\n* `sort`: Sort method for data list.\n* `split`: Split method when generate sections of data list.\n* `flatListProps`: Props of `FlatList` when data is flat.\n* `sectionListProps`: Props of `SectionList` when data is splitted to sections.\n* `searchListProps`: Props of `FlatList` when searching.\n* `buttonProps`: Props of `HeaderButton` in navigation bar.\n* `labels`: Label text in component.\n\nYou can change labels globally by following statement:\n\n```javascript\nPickList.defaultProps.labels.xxx = 'xxx';\n```\n\nYou can call function with PickList view reference:\n\n```javascript\n\u003cPickList\n    ref={this.picklist = ref}\n    ...\n/\u003e\n\nthis.picklist.xxx();\n```\n\nFollowing functions supported:\n\n* `getSelectedItems: () =\u003e Tree[]`: Get current selected items. You can handle these with [Tree API](https://github.com/gaoxiaosong/general-tree#Interface).\n* `backToPreviousPage: () =\u003e boolean`: Auto go back to previous page. If it is the first page, it returns false. Otherwise it returns true.\n\n## Example Project\n\nYou can open the example project by following steps:\n\n1. Enter `example`. Use `yarn` or `npm install` to install the modules. Run `npm start` in a seperate terminal.\n1. Create a example project with entry file `index` and module name `test`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgxsshallot%2Freact-native-picklist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgxsshallot%2Freact-native-picklist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgxsshallot%2Freact-native-picklist/lists"}