native-dropdown-widget

React Native Dropown Widget is a library which have the capability to provides a variety of options to customize the dropdown to match the design and functionality of your application.

Screenshots

Badges

Features

• Easy to use
• Single or Multiselect option for items
• Responsive for Cross platform
• Have wast option for customization
• Implemented with typescript

Nothing is pleasanter than exploring a library. Give us rate If you like this library :-)

Getting started

npm install native-dropdown-widget --save

or

yarn add native-dropdown-widget

and voilà!!

Dropdown Props

| Props | Params | isRequire | Description | | -------------------------- | ---------------------- | --------- | -------------------------------------------------------------------------- | | data | Array | Yes | Plain array containing dropdown options. | | selectedItem | any[] | Yes | Array containing selected items. | | setSelectedItem | (items: any[]) => void | Yes | Function to set selected items. | | style | Object | No | Style object for the dropdown component. | | containerStyle | Object | No | Style object for the dropdown container. | | innerContainerStyle | Object | No | Style object for the inner container of the dropdown. | | innerContentContainerStyle | Object | No | Style object for the inner content container. | | listStyle | Object | No | Style object for the dropdown list. | | listTextStyle | Object | No | Style object for the text within the dropdown list. | | placeholder | String | No | Placeholder text when no option is selected. | | placeholderStyle | Object | No | Style object for the placeholder text. | | leftIcon | string | No | Icon to be displayed on the left side. | | leftIconStyle | object | No | Style object for the left icon. | | dropDownIcon | Component | No | Custom component to be used as the dropdown icon. | | scrollEnabled | Boolean | No | Enable/disable scrolling in the dropdown list. | | cardContainerStyle | Object | No | Style object for the card container (if used). | | cardStyle | Object | No | Style object for the card component (if used). | | cardTextStyle | Object | No | Style object for the text within the card (if used). | | cardIcon | Component | No | Custom component to be used as the card icon (if used). | | cardIconView | Component | No | Custom component to wrap the card icon (if used). | | isInverted | boolean | No | Boolean indicating if the table is inverted. | | isOverLay | boolean | No | Boolean indicating if the table is overlayed or overlap on behind content. | | singleSelection | boolean | No | Boolean indicating single selection mode or want only one selection. |

Examples Array - 1

const ExpArray = () => [
  "vvlgray",
  "vlgray",
  "lgray",
  "gray",
  "sgray",
  "vsgray",
];

Call the library directly or Import by copying this below -

import DropDownComponent from "native-dropdown-widget";

Usage/Examples 1 - Basic

const [selectedItem, setSelectedItem] = useState(null);

function App() {
  return (
    <DropDownComponent
      data={ExpArray()}
      placeholder={"gray"}
      scrollEnabled={true}
      isOverLay={false}
      selectedItem={selectedItem}
      setSelectedItem={setSelectedItem}
      dropDownIcon={<></>}
    />
  );
}

Usage/Examples 2 - Inverted list With Icons

(Note - You can use any JSX.Element)

const [selectedItem, setSelectedItem] = useState(null);

function App() {
  return (
    <DropDownComponent
      data={ExpArray()}
      placeholder={"gray"}
      scrollEnabled={true}
      isOverLay={false}
      selectedItem={selectedItem}
      setSelectedItem={setSelectedItem}
      leftIcon={<Text>{"❄"}</Text>}
      isInverted
    />
  );
}

Author

• Nouman khan

License

MIT