wrathchaos/react-native-multiple-select

Customizable & Animated, Easy to Use Multiple Select Library for React Native

Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them

"@freakycoder/react-native-bounceable": ">= 0.1.0",
"react-native-animated-spinkit": ">= 1.5.2",
"react-native-bouncy-checkbox": ">= 1.0.7"

Usage

Import

import RNMultiSelect, {
  IMultiSelectDataTypes,
} from "@freakycoder/react-native-multiple-select";

Fundamental Usage

<RNMultiSelect
  disableAbsolute
  data={staticData}
  onSelect={(selectedItems) => console.log("SelectedItems: ", selectedItems)}
/>

Data Format

You MUST use this format to generate menu items

import RNMultiSelect, {
  IMultiSelectDataTypes,
} from "@freakycoder/react-native-multiple-select";

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

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)
onDoneButtonPress	function	undefined	handle the onDoneButtonPress function
doneButtonTextStyle	style	default	change the done button's text style
doneButtonShadowColor	style	default	change the done button's shadow style
multiSelectionText	string	default	change the 3 or more items are selected's text part
placeholderTextStyle	style	default	extends or override the default placeholder's text style
Spinner	spinner component	Chase	change the spinner type
spinnerSize	number	30	change the spinner size
spinnerColor	color	default	change the spinner color

List of available types for Spinner

• <Plane />
• <Chase />
• <Bounce />
• <Wave />
• <Pulse />
• <Flow />
• <Swing />
• <Circle />
• <CircleFade />
• <Grid />
• <Fold />
• <Wander />

Future Plans

• LICENSE
• Typescript Challenge!
• Dark Mode (Coming Soon!)
• Write an article about the lib on Medium

Credits

Heavily Inspired by Manuel Rovira's Work

Author

FreakyCoder, [email protected]

License

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

react-native-multiple-select's Issues

Disable bounceable animation

Hi,

How can I disable bounceable animation on list toggle?

Thanks.

Scrolling disabled within ScrollView (Android)

I've been creating an RN app and testing it on both Android and iOS. I've placed the component within a ScrollView, however the scrolling of the multiselect becomes disabled in Android. This does not happen on iOS though, is there a fix for this? I've tried setting a fixed height but I've had no luck.

Invariant Violation: requireNativeComponent: "RNSpinkit" was not found in the UIManager.

Hello,

It seems this library crashes on expo with the following error: Invariant Violation: requireNativeComponent: "RNSpinkit" was not found in the UIManager.

How to produce:

• Install the lib and its dependencies
• Try to delete the placeholder text.
• Boom!, you will get the crash.

Dev env:

  Expo CLI 4.0.17 environment info:
    System:
      OS: macOS 11.2.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 14.15.1 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    IDEs:
      Xcode: 12.4/12D4e - /usr/bin/xcodebuild
    npmPackages:
      @expo/webpack-config: ^0.12.16 => 0.12.44 
      expo: ^39.0.5 => 39.0.5 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz => 0.63.2 
      react-native-web: ~0.13.7 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 4.0.17
    Expo Workflow: managed

Hacky proposal:
Maybe provide an option to disable text entry(typing) in the TextInput section since on Expo managed projects, RNSpinkit is not really supported.

BouncyCheckbox fill color is not customizable

Hi,

Please can you make the Checkbox fill color customizable?

I see that the doneButtonBackgroundColor can be changed and it will be nice to
have something similar for the checkbox fill color.

Something like menuItemCheckboxFillColor :)

Best,