react-native-picklist


This is a picklist page. It supports:

- Single Level or Multiple Level data.
- Single Select or Multiple Select.
- Show or Hide the internal components.
- Customize the UI component.
- Search in the data automaticlly.
- Section style page.

ScreenShots

Same UI on Android.

Install

Install by Yarn:

``shell
yarn add @abdulmatinsanni/react-native-picklist
`

Install by NPM:

`shell
npm install --save @abdulmatinsanni/react-native-picklist
`

Usage

Import the module in the file:

`jsx
import PickList from "react-native-picklist";

export default class TopPage extends React.PureComponent {
static navigationOptions = PickList.navigationOptions;

render() {
return (
// ...
/>
);
}
}
`

If you want to use button in navigationOptions, you should set following items:

`javascript
import { HeaderButton } from "react-navigation-header-buttons";

HeaderButton.defaultProps.getButtonElement = props => {
const { title } = props;
return {title};
};
`

You can set the following properties or see example project to learn how to use it.

Properties

Required:

- title: Page title.
- data: Data to show. We will construct a virtual root node to contain it.
- navigation: Navigator's props.

Optional:

- firstTitleLine: First item displayed in TitleLine when it has the multi-level data and show the title line.
- isCascade: When multi-level and multi-select are true, auto-cascading selects child nodes or not. Default is true.
- multilevel: Has multi-level data or not. Default is false.
- multiselect: Is multi-select or not. Default is false.
- onFinish: Pass the selected items when finish selecting.
- rightTitle: Button title on the right corner.
- rightClick: Button click callback on the right corner.
- renderRow: Customize a row display. You can override this property to make the list readonly. Default implement is in DefaultRow.js.
- renderHeader: Customize header of page.
- renderSingleSelectIcon: Customize single-selected icon.
- renderMultiSelectIcon: Customize multi-selected icon.
- showBottomView: Show bottom bar or not.
- showSearchView: Show search bar or not.
- showTitleLine: Show title line at the header or not.
- showAllCell: Show select all or deselect all cell or not.
- showCount: Show not leaf item's children count and selected count.
- 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.
- directBackWhenSingle: Directly go back to previous page or not when single-select data.
- cancelableWhenDirectBack: Selected item is cancelable or not when single-select data and directBackWhenSingle is true.
- selectedIds: Initial selected item's identifier list.
- selectable: Can a tree node selectable or not.
- childrenKey: Children key of tree node.
- idKey: Identifier key of tree node, supports array of string or one string only.
- labelKey: Label key of tree node.
- searchKeys: Normal search keys of tree node.
- sort: Sort method for data list.
- split: Split method when generate sections of data list.
- flatListProps: Props of FlatList when data is flat.
- sectionListProps: Props of SectionList when data is splitted to sections.
- searchListProps: Props of FlatList when searching.
- buttonProps: Props of HeaderButton in navigation bar.
- labels: Label text in component.

You can change labels globally by following statement:

`javascript
PickList.defaultProps.labels.xxx = "xxx";
`

You can call function with PickList view reference:

`javascript
ref={this.picklist = ref}
...
/>

this.picklist.xxx();
`

Following functions supported:

- getSelectedItems: () => Tree[]: Get current selected items. You can handle these with Tree API.
- backToPreviousPage: () => boolean: Auto go back to previous page. If it is the first page, it returns false. Otherwise it returns true.

Example Project

You can open the example project by following steps:

1. Enter example. Use yarn or npm install to install the modules. Run npm start in a seperate terminal.
1. Create a example project with entry file index and module name test`.