Rn-bottomsheet-select NPM

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.

select-list select expo Select Feild react native

0.0.2

1 year ago

0.0.1

1 year ago