React-native-multi-options NPM

React Native Select

A simple select component for React Native.

react-native-multi-options

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