Non Productive Monday

    react-native-material-dropdown-update

    0.12.0 • Public • Published

    react-native-material-dropdown

    npm license codeclimate

    Material dropdown with consistent behaviour on iOS and Android

    example

    Features

    • Easy to use
    • Consistent look and feel on iOS and Android
    • Customizable font size, colors and animation duration
    • Dynamic dropdown size and position
    • Configurable visible item count
    • RTL support
    • Pure javascript implementation

    Installation

    npm install --save react-native-material-dropdown

    Usage

    import React, { Component } from 'react';
    import { Dropdown } from 'react-native-material-dropdown';
     
    class Example extends Component {
      render() {
        let data = [{
          value: 'Banana',
        }, {
          value: 'Mango',
        }, {
          value: 'Pear',
        }];
     
        return (
          <Dropdown
            label='Favorite Fruit'
            data={data}
          />
        );
      }
    }

    Properties

    name description type default
    label Text field label text String -
    error Text field error text String -
    animationDuration Text field animation duration in ms Number 225
    fontSize Text field font size Number 16
    labelFontSize Text field label font size Number 12
    baseColor Text field base color String rgba(0, 0, 0, .38)
    textColor Text field text color String rgba(0, 0, 0, .87)
    itemColor Dropdown item text color (inactive item) String rgba(0, 0, 0, .54)
    selectedItemColor Dropdown item text color (active item) String rgba(0, 0, 0, .87)
    disabledItemColor Dropdown item text color (disabled item) String rgba(0, 0, 0, .38)
    dropdownPosition Dropdown position (dynamic if undefined) Number -
    itemCount Dropdown visible item count Number 4
    itemPadding Dropdown item vertical padding Number 8
    itemTextStyle Dropdown item text styles Object -
    dropdownOffset Dropdown offset Object { top: 32, left: 0 }
    dropdownMargins Dropdown margins Object { min: 8, max: 16 }
    data Dropdown item data Array []
    value Selected value String -
    containerStyle Styles for container view Object -
    overlayStyle Styles for overlay view Object -
    pickerStyle Styles for item picker view Object -
    shadeOpacity Shade opacity for dropdown items Number 0.12
    rippleOpacity Opacity for ripple effect Number 0.54
    rippleInsets Insets for ripple on base component Object { top: 16, bottom: -8 }
    rippleCentered Ripple on base component should be centered Boolean false
    renderBase Render base component Function -
    renderAccessory Render text field accessory Function -
    valueExtractor Extract value from item (args: item, index) Function ({ value }) => value
    labelExtractor Extract label from item (args: item, index) Function ({ label }) => label
    propsExtractor Extract props from item (args: item, index) Function () => null
    onChangeText Selection callback (args: value, index, data) Function -

    Other TextField, TextInput and TouchableWithoutFeedback properties will also work

    Methods

    name description returns
    focus() Acquire focus (open dropdown) -
    blur() Release focus (close dropdown) -
    value() Get current value String
    selectedIndex() Get selected index Number
    selectedItem() Get selected item Object
    isFocused() Get current focus state Boolean

    Example

    git clone https://github.com/n4kz/react-native-material-dropdown
    cd react-native-material-dropdown/example
    npm install
    npm run ios # or npm run android 

    Copyright and License

    BSD License

    Copyright 2017-2018 Alexander Nazarov. All rights reserved.

    Install

    npm i react-native-material-dropdown-update

    DownloadsWeekly Downloads

    26

    Version

    0.12.0

    License

    BSD-3-Clause

    Unpacked Size

    27.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • coolblaze03