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:

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