@freakycoder/react-native-single-select

Dark Theme	Light Theme

Installation

Add the dependency:

npm i @freakycoder/react-native-single-select

Dependency

"fuse.js": ">= 6.4.1",

Usage

Import

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

Fundamental Usage

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

Menu Item Format

You must use this format for generating menu bar item.

const staticData: Array<ISingleSelectDataType> = [
  { id: 0, value: "Euismod Justo" },
  { id: 1, value: "Risus Venenatis" },
  { id: 2, value: "Vestibulum Ullamcorper" },
  { id: 3, value: "Lorem Nibh" },
  { id: 4, value: "Ligula Amet" },
];

OR with ImageSource

const staticData: Array<ISingleSelectDataType> = [
  { id: 0, value: "Euismod Justo", imageSource: require("./assets/..") },
  { id: 1, value: "Risus Venenatis", imageSource: { uri: "...url" } },
  { id: 1, value: "Risus Venenatis", imageSource: null },
];

Also, here is the interface of ISingleSelectDataType:

export interface ISingleSelectDataType {
  id: number;
  value: string;
  imageSource?: any;
  data?: any;
}

Configuration - Props

Property	Type	Default	Description
onSelect	function	undefined	set the selection function when a menu item is selected
data	Array	undefined	set the menu item data array for generating menu bar items
width	number	250	change the width of the component
height	number	50	change the height of the main single select button
darkMode	boolean	false	change the theme of the component to dark theme
placeholder	string	"Select"	change the placeholder of the single select component
imageHeight	number	25	change the image source's menu item's image height
imageWidth	number	25	change the image source's menu item's image width
ImageComponent	component	Image	set your own custom Image component instead of default Image one
TextComponent	component	Text	set your own custom Text component instead of default Text one
buttonContainerStyle	ViewStyle	default	change/override the top of the single select button (the main one)
menuBarContainerStyle	ViewStyle	default	change/override the top of the single select bottom menu bar
arrowImageStyle	ImageStyle	default	change/override the top of the arrow image's style
menuItemTextStyle	TextStyle	default	change/override the top of the each menu bar's item text style
disableAbsolute	boolean	false	if you do not want to use the library without absolute to fix bottom menubar's overlaps simply make it true
menuBarContainerWidth	number	250	change the bottom menu bar's width
menuBarContainerHeight	number	150	change the bottom menu bar's height
disableFilterAnimation	boolean	false	disable the filter animation for huge lists (especially on Android)

Future Plans

• LICENSE
• Search Feature
• Image Feature
• Customizable Image Component
• Customizable Text Component
• Dark Theme / Light Theme Options
• Customizable Animations
• Write an article about the lib on Medium

Credits

Heavily Inspired by Manuel Rovira Dribbble

Author

FreakyCoder, [e-mail]

License

React Native Single Select is available under the MIT license. See the LICENSE file for more info.