README
react-native-fully-customizable-papplethemes-dropdown
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
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. |