rn-custom-select-dropdown

A customizable dropdown select component for React Native, powered by React Native Reanimated, React Native Gesture Handler, and React Native SVG .

✨ Features

• Smooth animations using react-native-reanimated
• Gesture support with react-native-gesture-handler
• SVG icons and via react-native-svg
• Full customization of style and behavior
• TypeScript support out of the box

📦 Installation

1npm install rn-custom-select-dropdown
2# or
3yarn add rn-custom-select-dropdown

Then install the required peer dependencies:

1npm install react-native-reanimated react-native-gesture-handler react-native-svg

Make sure you’ve properly configured:

• react-native-reanimated (installation guide)
• react-native-gesture-handler (installation guide)
• react-native-svg (installation guide)

---

🚀 Usage

1import React, { useState } from "react";
2import { GestureHandlerRootView } from "react-native-gesture-handler";
3import Select, { ISelectItem } from "rn-custom-select-dropdown";
4import { england, france, spain } from "./assets";
5
6const countries: Array<ISelectItem<string>> = [
7  {
8    label: "France",
9    value: "France",
10    picture: france,
11  },
12  {
13    label: "England",
14    value: "England",
15    picture: england,
16  },
17  {
18    label: "Spain",
19    value: "Spain",
20    picture: spain,
21  },
22];
23
24export default function App() {
25  const [selectedValue, setSelectedValue] =
26    useState<ISelectItem<string> | null>(null);
27
28  return (
29    <GestureHandlerRootView style={{ flex: 1 }}>
30      <Select
31        data={countries}
32        value={selectedValue}
33        onChange={(newValue) => {
34          setSelectedValue(newValue);
35        }}
36      />
37    </GestureHandlerRootView>
38  );
39}

---

🔧 Props

Prop	Type	Default	Description
data	ISelectItem<T>[]	required	List of items to show in the dropdown
value	ISelectItem<T> | null	null	The currently selected item
onChange	(newValue: ISelectItem<T>) => void	undefined	Callback when an item is selected
placeholder	string	"Select option"	Placeholder text when no value is selected
label	string	undefined	Optional label displayed above the select field
isRequired	boolean	false	Whether the field is required
isError	boolean	false	Indicates error state
errorMessage	string	undefined	Error message displayed when isError is true
labelStyle	StyleProp<TextStyle>	undefined	Style for the label text
containerStyle	StyleProp<ViewStyle>	undefined	Style for the outer container
inputContainerStyle	StyleProp<ViewStyle>	undefined	Style for the input wrapper
itemBackgroundColor	string	undefined	Background color for each item
selectedItemBackgroundColor	string	undefined	Background color for the selected item
itemLabelColor	string	undefined	Text color for unselected items
selectedItemLabelColor	string	undefined	Text color for the selected item
itemLabelStyle	StyleProp<TextStyle>	undefined	Custom text style for item labels
selectedItemLabelStyle	StyleProp<TextStyle>	undefined	Custom text style for the selected item label
placeholderStyle	StyleProp<TextStyle>	undefined	Style for the placeholder text
checkColor	string	undefined	Color of the check icon shown for selected item
checkSize	number	undefined	Size of the check icon
arrowColor	string	undefined	Color of the dropdown arrow
arrowSize	number	undefined	Size of the dropdown arrow
arrowContainerStyle	StyleProp<ViewStyle>	undefined	Style for the arrow container
customArrowIcon	React.ReactNode	undefined	Custom arrow icon component
shouldCloseAfterSelection	boolean	true	Determines whether the dropdown closes after selection
isArrowShown	boolean	true	Show or hide the arrow icon
onSelectOpened	() => void	undefined	Callback triggered when the dropdown opens
onSelectClosed	() => void	undefined	Callback triggered when the dropdown closes
customDropdownOffset	number	56	distance between input and dropdown
dropdownItemStyle	StyleProp<ViewStyle>	undefined	style for the dropdown item
customArrowRotation	number	-180	arrow rotation angle

📦 ISelectItem<T>

Prop	Type	Default	Description
label	string	required	Text to display for the option
value	T	required	Value associated with the option
picture	ImageSourcePropType	undefined	Optional image shown with the option

---

📚 Contributing

Issues and pull requests are welcome! Please open an issue first to discuss major changes.

Made with ❤️ by Dhia Ben Hamouda