rn-bottomsheet-select

A reusable React Native component for a bottom sheet select field heavily inspired by this Infinite Red tutorial

Installation

Install the package via npm:

1npm install rn-bottomsheet-select

Ensure you have the required peer dependencies installed:

1npm install @gorhom/bottom-sheet react-native-safe-area-context

Usage

Here’s an example of how to use the SelectField component in your React Native project:

1import React, { useRef } from 'react';
2import { SelectField } from 'rn-bottomsheet-select';
3
4const options = [
5  { value: 'option1', label: 'Option 1' },
6  { value: 'option2', label: 'Option 2' },
7  // more options
8];
9
10const App = () => {
11  const selectFieldRef = useRef(null);
12
13  return (
14    <SelectField
15      ref={selectFieldRef}
16      options={options}
17      onSelect={(value) => console.log(value)}
18      placeholder="Select an option"
19    />
20  );
21};
22
23export default App;

Props

Prop	Type	Default	Description
value	string[]	[]	Selected values.
labelTextStyle	TextStyle	undefined	Style for the label text.
listCaption	string	undefined	Caption for the list.
renderValue	(value: string[]) => string	undefined	Function to render the selected value(s) as a string.
onSelect	(value: string[]) => void	undefined	Callback function when an option is selected.
options	Array<{ value: string | number; label: string; caption?: string; disabled?: boolean }>	[]	Array of options.
multiple	boolean	false	Enable multiple selection.
description	string	undefined	Description for the select field.
label	string	undefined	Label for the select field.
placeholder	string	undefined	Placeholder text for the select field.

Methods

You can call methods on the component reference:

presentOptions(): Open the bottom sheet.

dismissOptions(): Close the bottom sheet.

Example

1import React, { useRef } from 'react';
2import { SelectField } from 'rn-bottomsheet-select';
3import { Button, View } from 'react-native';
4
5const App = () => {
6  const selectFieldRef = useRef(null);
7
8  const openOptions = () => {
9    selectFieldRef.current.presentOptions();
10  };
11
12  return (
13    <View>
14      <SelectField
15        ref={selectFieldRef}
16        options={[
17          { value: 'option1', label: 'Option 1' },
18          { value: 'option2', label: 'Option 2' },
19        ]}
20        onSelect={(value) => console.log(value)}
21        placeholder="Select an option"
22      />
23      <Button title="Open Options" onPress={openOptions} />
24    </View>
25  );
26};
27
28export default App;
29

Contributions

Contributions are welcome! If you have any improvements or suggestions, please open an issue or submit a pull request.

• Fork the repository.
• Create a new branch (git checkout -b feature/your-feature).
• Commit your changes (git commit -m 'Add some feature').
• Push to the branch (git push origin feature/your-feature).
• Open a Pull Request.

License

This project is licensed under the MIT License.