@rose-hulman/react-native-dropdown-selector v0.1.0

React Native Dropdown Selector

A custom react native component for dropdown lists. Emulates some functionality of the HTML <select> tag.

Features

• Cross-platform uniformity
• Select one or more items from the list
• Support for custom component styling
• Import data with versatile structure
• Item prioritization

Demo

Create a react native project with example/App.tsx as the main file. Running the application will look similar to the screenshots below.

Usage

All example code is written in TypeScript. Begin by importing the Selector component and Data type.

import Selector, { Data } from 'react-native-dropdown-selector';

Define your Data array. The label field is required for each entry, but priority and data are optional.

const data: Data[] = [
  { label: 'Item 1' },
  { label: 'Item 2', data: { additionalParam: 'value' } },
  { label: 'Item 3', priority: true },
];

Define your onSelect function. Your function will only take in a Data object.

const onDataSelect = (data: Data) => {
  // Do something
};

Add a Selector component to your view.

<>
  <Selector.Select data={data} onSelect={onDataSelect} />
  {/* or use the MultiSelect component */}
  <Selector.MultiSelect data={data} onSelect={onMultiDataSelect} />
</>

That's it! Run your app to see the selector in action.

The Data Object

You must follow the formatting of this object for the selector component to function.

label (required)

The value of the item shown in the selector. Type: string | JSX.Element

priority

If enabled, the element will move to the top of the list regardless of its current position. Type: boolean

data

Additional data for the item. This is not directly used by the Selector component. Type: object

Props

data (required)

Holds the items used for the Selector. Type: Data[]

defaultValue

Choose an item to be selected before the user interacts with the Selector. Type: Data (single select) or Data[] (multi select)

listHeight

The height of the dropdown list. Defaults to 200. Type: number

placeholderText

Replace the default Selector text when an item hasn't been selected. The default value is Click me. Type: string | JSX.Element

boxStyle

Custom styles for the main Selector box. Type: ViewStyle

boxTextStyle

Custom styles for the text inside the main Selector box. Type: ViewStyle

boxTextHighlightStyle (MultiSelect only)

Custom styles for the text highlight inside the main Selector box. Type: ViewStyle

listStyle

Custom styles for the Selector dropdown list. Type: ViewStyle

listTextStyle

Custom styles for the text inside the Selector dropdown list. Type: ViewStyle

selectedItemStyle

Custom styles for the active item inside the Selector dropdown list. Type: ViewStyle

dropdownArrowColor

Custom color for the dropdown arrow inside the main Selector box. Type: ColorValue

clearButtonStyle (MultiSelect only)

Custom color for the clear button. Type: ViewStyle

clearButtonIconColor (MultiSelect only)

Custom color for the icon inside the clear button. Type: ColorValue

Callbacks

onSelect (required)

Called when the user selects an item from the selector. Type: Function (e: Data) => void (single select) or Function (e: Data[]) => void (multi select)

Development

To contribute to the development of this project, please refer to the development guide.