README

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:

yarn add @abdulmatinsanni/react-native-picklist

Install by NPM:

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

Usage

Import the module in the file:

import PickList from "react-native-picklist";

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

  render() {
    return (
      <PickList
      // ...
      />
    );
  }
}

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

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

HeaderButton.defaultProps.getButtonElement = props => {
  const { title } = props;
  return <Text>{title}</Text>;
};

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:

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

You can call function with PickList view reference:

<PickList
    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:

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

Usage no npm install needed!