React Native Select

A simple select component for React Native.

TODO

• Add support for single selection
• Add support for multiple selections
• Add support for disabled options
• Add support for disabled select
• Add support for placeholder
• Add search functionality
• Add support for placeholder color
• Add tests
• Add support for custom components
• Add support for custom styles
• Add support for custom placeholder
• Add support for validation
• GitHub Actions for CI/CD

Installation (Not available yet)

npm install react-native-multi-options

Usage

import React from 'react';
import { View } from 'react-native';
import Select from 'react-native-multi-options';

const options = [
  { label: 'One', value: 'one' },
  { label: 'Two', value: 'two' },
  { label: 'Three', value: 'three' },
];

const App = () => {
  const [value, setValue] = React.useState('one');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Select
        multiple
        options={options}
        value={value}
        onChange={(option) => setValue(option)}
        disabledOptions={[options[1]]}
        borderColor="red"
      />
    </View>
  );
};

Props

Prop	Type	Default	Description
options	Array	[]	Options to be displayed in the select
value	String		Value of the selected option
onChange	Function		Callback function to be called when an option is selected
multiple	Boolean	false	Whether the select should allow multiple selections
disabled	Boolean	false	Whether the select should be disabled
placeholder	String	Select...	Placeholder text to be displayed when no option is selected
placeholderTextColor	String	#999	Placeholder text color
style	Object		Style object to be applied to the select
optionStyle	Object		Style object to be applied to the options
optionTextStyle	Object		Style object to be applied to the option text
optionContainerStyle	Object		Style object to be applied to the option container
optionContainerTextStyle	Object		Style object to be applied to the option container text
optionSelectedStyle	Object		Style object to be applied to the selected option
optionSelectedTextStyle	Object		Style object to be applied to the selected option text
borderColor	String	#999	Border color of the container

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