n4kz / React Native Material Textfield
Licence: other
Material textfield
Stars: ✭ 852
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Material Textfield
Materialdesignsamples
Material Design 系列控件samples,讲了Material Design 系列新控件的使用方法和一些场景示例,使用详情请看对应博客,持续更新中...
Stars: ✭ 900 (+5.63%)
Mutual labels: material-design, material
Textfieldboxes
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.
Stars: ✭ 760 (-10.8%)
Mutual labels: material-design, material
React Native Material Dropdown
Material dropdown with consistent behaviour on iOS and Android
Stars: ✭ 661 (-22.42%)
Mutual labels: material-design, material
Fluid
📖 Library for QtQuick apps with Material Design
Stars: ✭ 601 (-29.46%)
Mutual labels: material-design, material
Materialize Sass
Materializecss rubygem for Rails Asset Pipeline / Sprockets
Stars: ✭ 785 (-7.86%)
Mutual labels: material-design, material
React Native Snackbar
🍱 Material Design "Snackbar" component for Android and iOS.
Stars: ✭ 613 (-28.05%)
Mutual labels: material-design, material
Mdl Skeleton
Material Design skeleton with ssr-engine
Stars: ✭ 17 (-98%)
Mutual labels: material-design, material
Material Design Template
Material Design Based One Page HTML Template
Stars: ✭ 572 (-32.86%)
Mutual labels: material-design, material
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (-8.1%)
Mutual labels: material-design, material
Material Remixer Android
Remixer for Android. Live adjustment of app variables.
Stars: ✭ 782 (-8.22%)
Mutual labels: material-design, material
Breeze
A Material Design game launcher for Windows
Stars: ✭ 22 (-97.42%)
Mutual labels: material-design, material
Matter
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
Stars: ✭ 888 (+4.23%)
Mutual labels: material-design, material
Material Awesome
Material and Mouse driven config for AwesomeWM 4.3
Stars: ✭ 588 (-30.99%)
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 (+626.41%)
Mutual labels: material-design, material
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (-31.22%)
Mutual labels: material-design, material
Wanandroid
🐔🏀【停止维护,已使用Jetpack+Mvvm重构】根据鸿神提供的WanAndroid开放Api来制作的产品级玩安卓App,采用Kotlin语言,基于Material Design+AndroidX +MVP+RxJava+Retrofit等框架开发,注释超详细,方便大家练手
Stars: ✭ 674 (-20.89%)
Mutual labels: material-design, material
Angular Mdc Web
Angular wrapper for Material Design (Web) Components
Stars: ✭ 542 (-36.38%)
Mutual labels: material-design, material
Taptargetview
An implementation of tap targets from the Material Design guidelines for feature discovery.
Stars: ✭ 5,114 (+500.23%)
Mutual labels: material-design, material
Materialscrollbar
An Android library that brings the Material Design 5.1 sidebar to pre-5.1 devices.
Stars: ✭ 761 (-10.68%)
Mutual labels: material-design, material
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (-6.34%)
Mutual labels: material-design, material
react-native-material-textfield
Material texfield with consistent behaviour on iOS and Android
Features
- Material design guidelines compliance
- Consistent look and feel on iOS and Android
- Animated state transitions (normal, focused and errored)
- Customizable font size, colors and animation duration
- Disabled state (with dotted underline)
- Outlined and filled fields
- Masked input support
- Multiline text input
- Character counter
- Prefix and suffix
- Accessory views
- Helper text
- RTL support
- Pure javascript implementation
Installation
npm install --save react-native-material-textfield
Usage
import React, { Component } from 'react';
import {
TextField,
FilledTextField,
OutlinedTextField,
} from 'react-native-material-textfield';
class Example extends Component {
fieldRef = React.createRef();
onSubmit = () => {
let { current: field } = this.fieldRef;
console.log(field.value());
};
formatText = (text) => {
return text.replace(/[^+\d]/g, '');
};
render() {
return (
<OutlinedTextField
label='Phone number'
keyboardType='phone-pad'
formatText={this.formatText}
onSubmitEditing={this.onSubmit}
ref={this.fieldRef}
/>
);
}
}
Properties
name | description | type | default |
---|---|---|---|
textColor | Text input color | String | rgba(0, 0, 0, .87) |
fontSize | Text input font size | Number | 16 |
labelFontSize | Text field label font size | Number | 12 |
lineWidth | Text field underline width | Number | 0.5 |
activeLineWidth | Text field active underline width | Number | 2 |
disabledLineWidth | Text field disabled underline width | Number | 1 |
tintColor | Text field accent color | String | rgb(0, 145, 234) |
baseColor | Text field base color | String | rgba(0, 0, 0, .38) |
label | Text field label text | String | - |
title | Text field helper text | String | - |
prefix | Text field prefix text | String | - |
suffix | Text field suffix text | String | - |
error | Text field error text | String | - |
errorColor | Text field color for errored state | String | rgb(213, 0, 0) |
lineType | Text field line type | String | solid |
disabledLineType | Text field line type in disabled state | String | dotted |
animationDuration | Text field animation duration in ms | Number | 225 |
characterRestriction | Text field soft limit for character counter | Number | - |
disabled | Text field availability | Boolean | false |
editable | Text field text can be edited | Boolean | true |
multiline | Text filed multiline input | Boolean | false |
contentInset | Layout configuration object | Object | {...} |
labelOffset | Label position adjustment | Object | {...} |
inputContainerStyle | Style for input container view | Object | - |
containerStyle | Style for container view | Object | - |
labelTextStyle | Style for label inner Text component | Object | - |
titleTextStyle | Style for title inner Text component | Object | - |
affixTextStyle | Style for affix inner Text component | Object | - |
formatText | Input mask callback | Function | - |
renderLeftAccessory | Render left input accessory view | Function | - |
renderRightAccessory | Render right input accessory view | Function | - |
onChangeText | Change text callback | Function | - |
onFocus | Focus callback | Function | - |
onBlur | Blur callback | Function | - |
Other TextInput properties will also work.
Content Inset
name | description | Normal | Filled | Outlined |
---|---|---|---|---|
top | Inset on the top side | 16 | 8 | 0 |
left | Inset on the left side | 0 | 12 | 12 |
right | Inset on the right side | 0 | 12 | 12 |
label | Space between label and TextInput | 4 | 4 | 4 |
input | Space between line and TextInput | 8 | 8 | 16 |
Label Offset
name | description | Normal | Filled | Outlined |
---|---|---|---|---|
x0 | Horizontal offset for inactive state | 0 | 0 | 0 |
y0 | Vertical offset for inactive state | 0 | -10 | 0 |
x1 | Horizontal offset for active state | 0 | 0 | 0 |
y1 | Vertical offset for active state | 0 | -2 | -10 |
Methods
name | description | returns |
---|---|---|
focus() | Acquire focus | - |
blur() | Release focus | - |
clear() | Clear text field | - |
value() | Get current value | String |
isFocused() | Get current focus state | Boolean |
isErrored() | Get current error state | Boolean |
isRestricted() | Get current restriction state | Boolean |
isDefaultVisible() | Get default value visibility | Boolean |
isPlaceholderVisible() | Get placeholder visibility | Boolean |
setValue() | Set current value | - |
Example
git clone https://github.com/n4kz/react-native-material-textfield
cd react-native-material-textfield/example
npm install
npm run ios # or npm run android
Copyright and License
BSD License
Copyright 2017-2019 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].