Elegant Single Select Component For React Native

A lightweight and customizable single select dropdown component for React Native.

More Features:

• iOS & Android support.
• Light & Dark Modes.
• Live search.
• Custom image for each option.

Install & Import:

# NPM
$ npm i @freakycoder/react-native-single-select --save

import RNSingleSelect, { ISingleSelectDataType } from "@freakycoder/react-native-single-select";

Basic Usage:

<RNSingleSelect
  data={staticData}
  onSelect={(selectedItem: ISingleSelectDataType) =>
    console.log("SelectedItem: ", selectedItem)
  }
/>

const staticData: Array<ISingleSelectDataType> = [
  { id: 0, value: "Item 1", imageSource: require("1.jpg") },
  { id: 1, value: "Item 2", imageSource: { uri: "1.jpg" } },
  { id: 2, value: "Item 3", imageSource: null },
];

Available props:

width?: number;
height?: number;
darkMode?: boolean;
imageWidth?: number;
imageHeight?: number;
placeholder?: string;
ImageComponent?: any;
TextComponent?: any;
disableAbsolute?: boolean;
arrowImageStyle?: ImageStyle;
menuItemTextStyle?: TextStyle;
menuBarContainerWidth?: number;
menuBarContainerHeight?: number;
disableFilterAnimation: boolean;
buttonContainerStyle?: ViewStyle;
menuBarContainerStyle?: ViewStyle;
data?: Array;
onTextChange: (text: string) => void;
onSelect: (selectedItem: ISingleSelectDataType) => void;

Preview:

Download Details:

Author: WrathChaos

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/WrathChaos/react-native-single-select

License: MIT