React Native Select

A simple select component for React Native.

TODO

• [x] Add support for single selection
• [x] Add support for multiple selections
• [x] Add support for disabled options
• [x] Add support for disabled select
• [x] Add support for placeholder
• [ ] Add search functionality
• [ ] Add support for placeholder color
• [ ] Add tests
• [ ] Add support for custom components
• [x] 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