@rcarls/react-native-paper-select

A select-like input component for projects leveraging react-native-paper.

What can it do?

• Single or multi-select input that supports undefined value
• Can be a controlled or uncontrolled input
• Easy to use with sensible defaults, react-native-paper theme support
• Accepts a render function for custom components
• Has dropdown or modal menu variants
  • Default: modal in mobile environments, otherwise dropdown
• Options can be any collection, or simply an array of strings. For collections:
  • Default: Use value, key or id keys for option values
  • Default: Use label key for option label
  • Also accepts functions to map options to values and labels
• value can be undefined with clear selection support

Dependencies

• react-native
• react-native-vector-icons
• react-native-paper

Installation

1npm install @rcarls/react-native-paper-select

or

1yarn add @rcarls/react-native-paper-select

Usage

1import * as React from 'react';
2import { PaperSelect } from '@rcarls/react-native-paper-select';
3
4const options = ['one', 'two', 'three'];
5
6const MyComponent = () => {
7  const [value, setValue] = React.useState('');
8
9  return (
10    <PaperSelect
11      label="Example"
12      options={options}
13      onSelection={(option) => setValue(option)}
14    />
15  );
16};
17
18export default MyComponent;

Try it out

You can run the example module by performing these steps:

1yarn && yarn example web

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library