react-native-select-component

A customizable and reusable react-native-select-component dropdown component for React Native.

This component provides a user-friendly way to select options in your app with the flexibility to pass your own styles, icons, and customization props.

---

Installation

To install it from an npm package :

1npm install react-native-select-component

Expo :

1npx expo install react-native-select-component

---

Usage

Basic Example

1import React, { useState } from 'react';
2import { View } from 'react-native';
3import RNSelect from 'react-native-select-component';
4
5const App = () => {
6  const [selectedValue, setSelectedValue] = useState('');
7
8  return (
9    <View style={{ padding: 20 }}>
10      <RNSelect
11        name="example"
12        options={[
13          { value: '1', label: 'Option 1' },
14          { value: '2', label: 'Option 2' },
15          { value: '3', label: 'Option 3' },
16        ]}
17        value={selectedValue}
18        handleChange={(name, value) => setSelectedValue(value)}
19        placeholder="Select an option"
20      />
21    </View>
22  );
23};
24
25export default App;

---

Props

Required Props

Name	Type	Description
name	string	A unique name for the dropdown (useful in forms or when managing multiple dropdowns).
options	{ value: string, label: string }[]	The array of options for the dropdown. Each option must have a value and a label.
value	string	The currently selected value.
handleChange	(name: string, value: string) => void	Callback function triggered when an option is selected.

Optional Props

Name	Type	Default	Description
placeholder	string	'Select an option'	Placeholder text displayed when no value is selected.
style	ViewStyle	{}	Additional styles for the component's container.
fontSize	number	16	Font size of the selected text in the dropdown trigger.
triggerTextColor	string	'black'	Color of the text displayed in the dropdown trigger.
triggerBorderColor	string	'gray'	Border color of the dropdown trigger.
triggerBackgroundColor	string	'#fff'	Background color of the dropdown trigger.
IconComponent	React.ReactNode	null	Custom icon to display inside the dropdown trigger.

---

Advanced Usage

Custom Icon Example

You can pass any icon component (e.g., from @expo/vector-icons) as the IconComponent prop.

1import { MaterialIcons } from '@expo/vector-icons';
2
3<RNSelect
4  name="year"
5  options={[
6    { value: '1', label: 'First Year' },
7    { value: '2', label: 'Second Year' },
8  ]}
9  value="1"
10  handleChange={(name, value) => console.log(name, value)}
11  placeholder="Select Year"
12  IconComponent={<MaterialIcons name="arrow-drop-down" size={24} color="black" />}
13/>

---

Styling Example

Customize the dropdown trigger with styles:

1<RNSelect
2  name="example"
3  options={[
4    { value: '1', label: 'Option 1' },
5    { value: '2', label: 'Option 2' },
6  ]}
7  value="1"
8  handleChange={(name, value) => console.log(name, value)}
9  placeholder="Custom Trigger"
10  fontSize={18}
11  triggerTextColor="blue"
12  triggerBorderColor="red"
13  triggerBackgroundColor="lightgray"
14/>

---

Screenshots

Trigger View	Dropdown View

---

Limitations

• The component currently supports flat lists for dropdown options. If you need grouped options or hierarchical data, you'll need to customize it further.
• Custom styling for individual options is not yet supported (but can be extended easily).

---

Contributing

We welcome contributions to improve this component! Feel free to open issues or submit pull requests.

1. Fork the repository.
2. Make your changes.
3. Submit a pull request.

---

License

This component is licensed under the MIT License. Feel free to use it in your projects!

---

Additional Notes

• Make sure to use consistent value and label pairs in the options array.
• Test your styles on different devices to ensure proper rendering.

---