Installation

Add the dependency:

npm i @freakycoder/react-native-single-select
npx pod-install // After Install the `react-native-spinkit`

Peer Dependency

You need to install this dependency

"react-native-spinkit": "^1.5.1"

Features

• Light Mode ☀️
• Dark Mode 🌙
• TextInput 💬
• Fully Animated Functionality 😍
• Built-in Search Filter 🎊
• Image Feature 💪
• Custom Image Component Support 😋
• Custom Text Component Support 😋
• Many More...

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) | | onTextChange | function | undefined | handle the onTextChange function | | placeholderTextStyle | style | default | extends or override the default placeholder's text style | | placeholderTextColor | color | default | change the placeholder's text color | | spinnerType | string | "ThreeBounce" | change the spinner type | | spinnerSize | number | 30 | change the spinner size | | spinnerColor | color | default | change the spinner color | | initialValue | ISingleSelectDataType | null | change the initial selected item | | searchEnabled | boolean | true | change search inputs readonly state | | value | string | undefined | set the text input value | | nestedScrollEnabled | boolean | false | enable/disable nested scrolling for the items

List of available types for Spinner

• CircleFlip
• Bounce
• Wave
• WanderingCubes
• Pulse
• ChasingDots
• ThreeBounce
• Circle
• 9CubeGrid
• WordPress (IOS only)
• FadingCircle
• FadingCircleAlt
• Arc (IOS only)
• ArcAlt (IOS only)

Future Plans

• [x] ~~LICENSE~~
• [x] ~~Search Feature~~
• [x] ~~Image Feature~~
• [x] ~~Customizable Image Component~~
• [x] ~~Customizable Text Component~~
• [x] ~~Dark Theme / Light Theme Options~~
• [x] ~~More Customization for Colors~~
• [x] ~~Built-in Spinner~~
• [ ] Remove the react-native-spinkit and use react-native-animated-spinkit instead
• [ ] Customizable Animations
• [ ] Write an article about the lib on Medium

Credits

Heavily Inspired by Manuel Rovira Dribbble

Author

FreakyCoder, [email protected]

License

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