react-native-fully-customizable-papplethemes-dropdown v0.0.7

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