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:

npm install rn-bottomsheet-select

Ensure you have the required peer dependencies installed:

npm 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:

import React, { useRef } from 'react';
import { SelectField } from 'rn-bottomsheet-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  // more options
];

const App = () => {
  const selectFieldRef = useRef(null);

  return (
    <SelectField
      ref={selectFieldRef}
      options={options}
      onSelect={(value) => console.log(value)}
      placeholder="Select an option"
    />
  );
};

export 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

import React, { useRef } from 'react';
import { SelectField } from 'rn-bottomsheet-select';
import { Button, View } from 'react-native';

const App = () => {
  const selectFieldRef = useRef(null);

  const openOptions = () => {
    selectFieldRef.current.presentOptions();
  };

  return (
    <View>
      <SelectField
        ref={selectFieldRef}
        options={[
          { value: 'option1', label: 'Option 1' },
          { value: 'option2', label: 'Option 2' },
        ]}
        onSelect={(value) => console.log(value)}
        placeholder="Select an option"
      />
      <Button title="Open Options" onPress={openOptions} />
    </View>
  );
};

export default App;

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.