react-native-input-select

react-native-input-select

A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.

Installation

With npm

npm install react-native-input-select

With yarn

yarn add react-native-input-select

Basic Usage

import React from 'react';
import Dropdown from 'react-native-input-select';

export default function App() {
  const [country, setCountry] = React.useState();

  return (
      <Dropdown
        label="Country"
        placeholder="Select an option..."
        options={[
          { name: 'Albania', code: 'AL' },
          { name: 'Åland Islands', code: 'AX' },
          { name: 'Algeria', code: 'DZ' },
          { name: 'American Samoa', code: 'AS' },
          { name: 'Andorra', code: 'AD' },
          { name: 'Angola', code: 'AO' },
          { name: 'Anguilla', code: 'AI' },
          { name: 'Antarctica', code: 'AQ' },
          { name: 'Antigua and Barbuda', code: 'AG' },
        ]}
        optionLabel={'name'}
        optionValue={'code'}
        selectedValue={country}
        onValueChange={(value) => setCountry(value)}
        primaryColor={'green'}
      />
  );
}

For more examples visit our wiki page

iOS

Android

Props

Proptypes	Datatype	Example
label	string	Countries
placeholder	string	Select a country
options	Array	[{ name: 'Albania', code: 'AL' }, { name: 'Åland Islands', code: 'AX' }]
optionLabel	string	name
optionValue	string	code
error	string	This is a required field
helperText	string	Only countries in the east are listed
selectedValue	string or Array	AL or [AL, AX]
onValueChange	function	()=>{}
isMultiple	Boolean	true
isSearchable	Boolean	true
disabled	Boolean	true
labelStyle	Object	{color: 'red', fontSize: 15, fontWeight: '500'}
placeholderStyle	Object	{color: 'red', fontSize: 15, fontWeight: '500'}
dropdownStyle	Object	{borderColor: 'blue', margin: 5, borderWidth:0 ...}
dropdownContainerStyle	Object	{backgroundColor: 'red', width: '30%', ...}
searchInputStyle	Object	{backgroundColor: 'red', borderRadius: 0, ...}
selectedItemStyle	Object	{backgroundColor: 'red', color: 'yellow', ...}
multipleSelectedItemStyle	Object	{backgroundColor: 'red', color: 'yellow', ...}
modalBackgroundStyle	Object	{backgroundColor: 'rgba(196, 198, 246, 0.5)'}
modalOptionsContainer	Object	{padding: 5}
dropdownErrorStyle	Object	{borderWidth: 2, borderStyle: 'solid'}
dropdownErrorTextStyle	Object	{color: 'red', fontWeight:'500'}
dropdownHelperTextStyle	Object	{color: 'green', fontWeight:'500'}
primaryColor	string	blue
checkboxSize	number	20
checkboxStyle	Object	{backgroundColor: 'blue', borderRadius: 30, padding: 10}
checkboxLabelStyle	Object	{color: 'red', fontWeight:'500'}
listHeaderComponent	React Component	<Text You can add any component to the top of this list <Text>
listFooterComponent	React Component	<Text You can add any component to the bottom of this list <Text>

Contributing

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

License

MIT

Video Demo

https://user-images.githubusercontent.com/9849221/230516294-a1aca5a7-65f5-4d9c-9b7f-a057807cf35f.mov

Changelog

v0.28.0

14 April 2023

• feat: added new props for header and footer component 4f7af81
• chore: release 0.28.0 df7d749