JSPM – react-native-fully-customizable-papplethemes-dropdown@0.0.6

Package Exports

react-native-fully-customizable-papplethemes-dropdown

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-fully-customizable-papplethemes-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A fully custom react-native dropdown by "PappleThemes" for both Android & iOS where you have complete access over font size, font color, position of the dropdown, height and width of dropdown, dropdown image and also the overlay color.

Features

Pure JS.
Compatible with both iOS and Android.
Highly customizable.
Same type of appearance in both iOS and Android
Control over font size, font family, font color.
Control over dropdown height, width and position.
Control over overlay color.
Control over dropdown image.
Control over dropdown image style.
Multiple dropdowns supported.

Demo

screenshot

Installation

npm i react-native-fully-customizable-papplethemes-dropdown

Usage

Import this module:

import PappleDropDown from 'react-native-fully-customizable-papplethemes-dropdown'

Basic Usage

import PappleDropDown from 'react-native-fully-customizable-papplethemes-dropdown'

this.state = {
    showDropDownMonth: false,
        selectedMonth: 'Select month',
        dropDownData: ['January', 'February', 'March', 'April', 'May', 'June']
}

openCloseDropDown() {
    this.setState({
        showDropDownMonth: !this.state.showDropDownMonth
        })
}

onSelectItem(selectedItem) {
    this.setState({
        selectedMonth: selectedItem,
        showDropDownMonth: !this.state.showDropDownMonth
    })
}

<PappleDropDown
    showDropDown={true}
    openCloseDropDown={this.openCloseDropDown.bind(this)}
    selectedValue={this.state.selectedMonth}
    dropDownData={this.state.dropDownData}
    onSelectItem={this.onSelectItem.bind(this)}
/>

Props

Prop	Type	Optional	Default	Description
`showDropDown`	bool	Yes	false	show/hide dropdown component.
`selectedValue`	string	No	Please select	selectedValue has the value which we just selected.
`dropDownData`	array	No	[ ]	data for dropdown.
`openCloseDropDown`	function	No		control open or close dropdown.
`onSelectItem`	function	No		select an option from dropdown.
`addDropDownImage`	bool	Yes	false	if given true, you can add your own dropdown arrow image.
`dropdownImage`	function	Yes		path to dropdown image.
`buttonContainerStyle`	style	Yes		style for click area on which dropdown should appear.
`dropDownContainerStyle`	style	Yes		style for position, height and width of dropdown.
`singleCellStyle`	style	Yes		style for dropdown single cell.
`dropDownTextStyle`	style	Yes		style for the text inside the dropdown container.
`overlayStyle`	style	Yes	rgba(0,0,0,0.1)	style to overlay background.
`dropdownImageStyle`	style	Yes		style for dropdown arrow.