react-native-cross-select

Select component for react native

Features

• Using Portal
• Multiple and Single Select
• Searchable Select
• Fully Modifiable

---

Installation

With NPM

npm install react-native-cross-select

With YARN

yarn add react-native-cross-select

---

Usage

• Add provider to main app file

import { SelectProvider } from 'react-native-cross-select';

const Index = () => (
  <SelectProvider>
    <App />
  </SelectProvider>
);

---

Components

• Single Select

import Select, { ISelect } from 'react-native-cross-select';

const DATA = [
    {
        label:"Input 1",
        value:1
    },
    {
        label:"Input 2",
        value:2
    }
]

const App = () => {
    const handleChange:ISelect.Select.SelectOnSelectProp = (data) => {
        console.log('Data: ', data);
    };
    
    return(
        <Select data={DATA} onSelect={handleChange} />
    )
};

---

• Multiple Select

import { ISelect, MultipleSelect } from 'react-native-cross-select';

const DATA = [
    {
        label:"Input 1",
        value:1
    },
    {
        label:"Input 2",
        value:2
    }
]

const App = () => {
    const handleMultipleChange:ISelect.Select.MultipleSelectOnSelectProp = (data) => {
        console.log('Datas: ', data);
    };
    
    return(
        <MultipleSelect data={DATA} onSelect={handleMultipleChange} />
    )
};

---

• Single Select With Search

import Select, { ISelect } from 'react-native-cross-select';

const DATA = [
    {
        label:"Input 1",
        value:1
    },
    {
        label:"Input 2",
        value:2
    }
]

const App = () => {
    const handleChange:ISelect.Select.SelectOnSelectProp = (data) => {
        console.log('Data: ', data);
    };
    
    return(
        <Select data={DATA} onSelect={handleChange} searchable />
    )
};

---

• Multiple Select With Search

import { ISelect, MultipleSelect } from 'react-native-cross-select';

const DATA = [
    {
        label:"Input 1",
        value:1
    },
    {
        label:"Input 2",
        value:2
    }
]

const App = () => {
    const handleMultipleChange:ISelect.Select.MultipleSelectOnSelectProp = (data) => {
        console.log('Datas: ', data);
    };
    
    return(
        <MultipleSelect data={DATA} onSelect={handleMultipleChange} searchable />
    )
};

Props

Name	Description	Type	Default	Required
data	Data array	{label:string; value:string	number}[] (Array of data object)	[]
placeholder	Placeholder for select box	string	Please select... (if searchable true then it's "Search here...")	false
width	width of select box	number	250	false
height	height of select box	number	40	false
boxClosedBorderColor	Box border color while it's close state	string	-	false
boxOpenedBorderColor	Box border color while it's open state	string	-	false
closeOnSelect	Close on select (it's only for single select)	boolean	true	false
onSelect	Callback function to handle change	function	-	true
placeHolderTextStyle	Custom text style for placeholder	RN style object	{}	false
textStyle	Custom text style	RN style object	{}	false
arrowColorOnSelected	Arrow color while select box open state	string	-	false
arrowColor	Arrow color while select box close state	string	-	false
backgroundColor	Background color of box	string	-	false
searchable	Searchable support	boolean	-	false
listItemTextStyle	Custom text style for list item	RN style object	{}	false
listBoxBackgroundColor	List box background color	string	-	false
maxListHeight	Max list height	number	-	false
listItemSelectedTextStyle	Custom text style for list item while selected state	RN style object	{}	false
listItemSelectedBackgroundColor	Custom style for list item while selected state	RN style object	{}	false
notFoundTextStyle	Not found text style	RN style object	{}	false
noDataText	No data text	string	No data found	false
defaultValue	Default value [For single select]	string	-	false
defaultValues	Default values [For multiple select]	array	-	false

---

Thanks for

• @gorhom/portal

---

License

MIT