JSPM

��<h1 align="center"> This is an adaptation of "react-native-dropdown-select-list" from "danish1658". </h1> <a href="https://github.com/danish1658/react-native-dropdown-select-list" target="_blank"> Link to his repository: https://github.com/danish1658/react-native-dropdown-select-list </a> <br> <hr> <br> <h1 align="center"> P+ Expo Dropdown Select List </h1> <div align="center"> React Native Select List Equivalent to Html's Select " </div> <p align="center" > <div style="display:flex;justify-content:space-evenly;align-items:center"> Multiple Select List | Select List :-------------------------:|:-------------------------:  |  </div> <br> </p> <br> <h4>Light weight and <b>Easy</b> to use dropdown select list.</h4> - Style it your way with style props of every view. - Smooth performance on all platforms IOS, Android and Web. - Change Font Family Easily which community picker lacks. - <b>Zero</b> dependencies <br> # Compatibility <br> | iOS | Android | Web | Expo | --------|---------|-----|------| | ' | ' | ' | ' | <br> # =�� Installation sh $ npm install expo-dropdown-select-list OR sh $ yarn add expo-dropdown-select-list <br> # =�� Basic Usage for SelectList jsx import { SelectList } from 'expo-dropdown-select-list' const App = () => { const [selected, setSelected] = React.useState(""); const data = [ {key:'1', value:'Mobiles', disabled:true}, {key:'2', value:'Appliances'}, {key:'3', value:'Cameras'}, {key:'4', value:'Computers', disabled:true}, {key:'5', value:'Vegetables'}, {key:'6', value:'Diary Products'}, {key:'7', value:'Drinks'}, ] return( <SelectList setSelected={(val) => setSelected(val)} data={data} save="value" /> ) }; <br> # =�� Basic Usage for MultipleSelectList jsx import { MultipleSelectList } from 'expo-dropdown-select-list' const App = () => { const [selected, setSelected] = React.useState([]); const data = [ {key:'1', value:'Mobiles', disabled:true}, {key:'2', value:'Appliances'}, {key:'3', value:'Cameras'}, {key:'4', value:'Computers', disabled:true}, {key:'5', value:'Vegetables'}, {key:'6', value:'Diary Products'}, {key:'7', value:'Drinks'}, ] return( <MultipleSelectList setSelected={(val) => setSelected(val)} data={data} save="value" onSelect={() => alert(selected)} label="Categories" /> ) }; <br> # =�'� General Props <i>Applicable on both <b>SelectList</b> & <b>MultipleSelectList</b> Components</i> | Name | Type | Description | | ---- | ---- | ----------- | | save| string | Pass ('key' or 'value') to save data of your choice in your local state variable | onSelect| Function | Pass any function that you want to trigger immediately after a value is selected | placeholder | String | Placeholder text that will be displayed in the select box | search | boolean | set to false if you dont want to use search functionality | maxHeight| Number | Maximum height of the dropdown wrapper to occupy | data| array or array[object]| Data which will be iterated as options of select list | setSelected| Function | For Setting the option value which will be stored in your local state | searchicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon | arrowicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon | closeicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon | searchPlaceholder| String | Custom placeholder text for search TextInput | defaultOption| Object | Pass default selected option in key value pair | fontFamily| string | Pass font name to apply globally on each text field of component | notFoundText| string | Pass your custom message if any search result returns empty | dropdownShown| boolean | Control your dropdown ( on & off ) state by changing its value to true or false <br> # =�'� General Style Props <i>Applicable on both <b>SelectList</b> & <b>MultipleSelectList</b> Components</i> | Name | Type | Description | | ---- | ---- | ----------- | | boxStyles| Object| Additional styles for select box parent wrapper | inputStyles| Object| Additional styles for text of selection box | dropdownStyles| Object| Additional styles for dropdown scrollview | dropdownItemStyles| Object| Additional styles for dropdown single list item | dropdownTextStyles| Object| Additional styles for dropdown list items text | disabledItemStyles| Object| Additional styles for disabled dropdown list item | disabledTextStyles| Object| Additional styles for disabled dropdown list items text <br> # =�� Advanced Usage jsx import { SelectList } from 'expo-dropdown-select-list' const App = () => { const [selected, setSelected] = React.useState(""); const data = [ {key:'1',value:'Jammu & Kashmir'}, {key:'2',value:'Gujrat'}, {key:'3',value:'Maharashtra'}, {key:'4',value:'Goa'}, ]; return( <SelectList onSelect={() => alert(selected)} setSelected={setSelected} fontFamily='lato' data={data} arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />} searchicon={<FontAwesome name="search" size={12} color={'black'} />} search={false} boxStyles={{borderRadius:0}} //override default styles defaultOption={{ key:'1', value:'Jammu & Kashmir' }} //default selected option /> ) }; <br> # =�� Getting Options From Database jsx import { SelectList } from 'expo-dropdown-select-list' const App = () => { const [selected, setSelected] = React.useState(""); const [data,setData] = React.useState([]); React.useEffect(() => //Get Values from database axios.get('https://jsonplaceholder.typicode.com/users') .then((response) => { // Store Values in Temporary Array let newArray = response.data.map((item) => { return {key: item.id, value: item.name} }) //Set Data Variable setData(newArray) }) .catch((e) => { console.log(e) }) ,[]) return( <SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} /> ) }; <br> # =�'� Additional Props <i>Applicable on <b>MultipleSelectList</b> Only</i> | Name | Type | Description | | ---- | ---- | ----------- | | label| string| Pass any string to be placed instead of default label <br> # =�'� Additional Style Props <i>Applicable on <b>MultipleSelectList</b> Only</i> | Name | Type | Description | | ---- | ---- | ----------- | | disabledCheckBoxStyles| Object| Additional styles disabled checkbox inside dropdown | checkBoxStyles| Object| Additional styles for active checkbox | badgeStyles| Object| Additional styles for badges of selected values | badgeTextStyles| Object| Additional styles for Text of badges of selected values | labelStyles| Object| Additional styles for label of multiple select list <br>