react-native-fully-customizable-papplethemes-dropdown

    0.0.7 • Public • Published

    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

    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.

    Install

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

    DownloadsWeekly Downloads

    27

    Version

    0.0.7

    License

    ISC

    Unpacked Size

    111 kB

    Total Files

    6

    Last publish

    Collaborators

    • sharoonshaji