n4kz / React Native Material Dropdown
Licence: other
Material dropdown with consistent behaviour on iOS and Android
Stars: ✭ 661
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Material Dropdown
Material Components Ios
[In maintenance mode] Modular and customizable Material Design UI components for iOS
Stars: ✭ 4,484 (+578.37%)
Mutual labels: material-design, material
Material Shell
A modern desktop interface for Linux. Improve your user experience and get rid of the anarchy of traditional desktop workflows. Designed to simplify navigation and reduce the need to manipulate windows in order to improve productivity. It's meant to be 100% predictable and bring the benefits of tools coveted by professionals to everyone.
Stars: ✭ 6,189 (+836.31%)
Mutual labels: material-design, material
Material Axure Library
An Axure widget library based on Google Material Design.
Stars: ✭ 490 (-25.87%)
Mutual labels: material-design, material
Fluid
📖 Library for QtQuick apps with Material Design
Stars: ✭ 601 (-9.08%)
Mutual labels: material-design, material
Material Design Template
Material Design Based One Page HTML Template
Stars: ✭ 572 (-13.46%)
Mutual labels: material-design, material
Sheets
⭐ Offers a range of beautiful sheets (dialogs & bottom sheets) for quick use in your project. Includes many ways to customize sheets.
Stars: ✭ 441 (-33.28%)
Mutual labels: material-design, material
Materialdesignextensions
Material Design Extensions is based on Material Design in XAML Toolkit to provide additional controls and features for WPF apps
Stars: ✭ 516 (-21.94%)
Mutual labels: material-design, material
Material Kit React Native
Material Kit React Native
Stars: ✭ 424 (-35.85%)
Mutual labels: material-design, material
Taptargetview
An implementation of tap targets from the Material Design guidelines for feature discovery.
Stars: ✭ 5,114 (+673.68%)
Mutual labels: material-design, material
Angular Mdc Web
Angular wrapper for Material Design (Web) Components
Stars: ✭ 542 (-18%)
Mutual labels: material-design, material
Components
Component infrastructure and Material Design components for Angular
Stars: ✭ 22,372 (+3284.57%)
Mutual labels: material-design, material
React Native Snackbar
🍱 Material Design "Snackbar" component for Android and iOS.
Stars: ✭ 613 (-7.26%)
Mutual labels: material-design, material
Mdb Ui Kit
Bootstrap 5 & Material Design 2.0 UI KIT
Stars: ✭ 21,830 (+3202.57%)
Mutual labels: material-design, material
Gatsby Material Starter
A high performance blog starter with Material design in mind for GatsbyJS.
Stars: ✭ 456 (-31.01%)
Mutual labels: material-design, material
Materialtimelineview
With MaterialTimelineView you can easily create a material looking timeline.
Stars: ✭ 443 (-32.98%)
Mutual labels: material-design, material
Material Viewpagerindicator
Dot-based Android ViewPager indicator with Material Design animations.
Stars: ✭ 511 (-22.69%)
Mutual labels: material-design, material
Material Auto Rotating Carousel
Introduce users to your app with this Material-style carousel.
Stars: ✭ 400 (-39.49%)
Mutual labels: material-design, material
Material Progressview
🔥A beautiful, gradual and simple used progress view for android.
Stars: ✭ 406 (-38.58%)
Mutual labels: material-design, material
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+643.72%)
Mutual labels: material-design, material
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (-11.35%)
Mutual labels: material-design, material
react-native-material-dropdown
Material dropdown with consistent behaviour on iOS and Android
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].