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.