Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-material-dropdown-multiple

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-material-dropdown-multiple

Material dropdown

  • 0.11.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

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

namedescriptiontypedefault
labelText field label textString-
errorText field error textString-
animationDurationText field animation duration in msNumber225
fontSizeText field font sizeNumber16
labelFontSizeText field label font sizeNumber12
baseColorText field base colorStringrgba(0, 0, 0, .38)
textColorText field text colorStringrgba(0, 0, 0, .87)
itemColorDropdown item text color (inactive item)Stringrgba(0, 0, 0, .54)
selectedItemColorDropdown item text color (active item)Stringrgba(0, 0, 0, .87)
disabledItemColorDropdown item text color (disabled item)Stringrgba(0, 0, 0, .38)
dropdownPositionDropdown position (dynamic if undefined)Number-
itemCountDropdown visible item countNumber4
itemPaddingDropdown item vertical paddingNumber8
itemTextStyleDropdown item text stylesObject-
dropdownOffsetDropdown offsetObject{ top: 32, left: 0 }
dropdownMarginsDropdown marginsObject{ min: 8, max: 16 }
dataDropdown item dataArray[]
valueSelected valueString-
containerStyleStyles for container viewObject-
overlayStyleStyles for overlay viewObject-
pickerStyleStyles for item picker viewObject-
shadeOpacityShade opacity for dropdown itemsNumber0.12
rippleOpacityOpacity for ripple effectNumber0.54
rippleInsetsInsets for ripple on base componentObject{ top: 16, bottom: -8 }
rippleCenteredRipple on base component should be centeredBooleanfalse
renderBaseRender base componentFunction-
renderAccessoryRender text field accessoryFunction-
valueExtractorExtract value from item (args: item, index)Function({ value }) => value
labelExtractorExtract label from item (args: item, index)Function({ label }) => label
propsExtractorExtract props from item (args: item, index)Function() => null
onChangeTextSelection callback (args: value, index, data)Function-

Other TextField, TextInput and TouchableWithoutFeedback properties will also work

Methods

namedescriptionreturns
focus()Acquire focus (open dropdown)-
blur()Release focus (close dropdown)-
value()Get current valueString
selectedIndex()Get selected indexNumber
selectedItem()Get selected itemObject
isFocused()Get current focus stateBoolean

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

BSD License

Copyright 2017-2018 Alexander Nazarov. All rights reserved.

Keywords

FAQs

Package last updated on 10 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc