![license](https://camo.githubusercontent.com/a023eb654319e676997f151827648e23884f0ef09aa1479456e6d5c25fefd622/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f726e2d6d6174657269616c2d75692d746578746669656c642e7376673f636f6c6f72423d343438616666)
Material UI texfield with consistent behaviour on Android, iOS and Web
![example](https://cloud.githubusercontent.com/assets/2055622/24325711/eaa4ff08-11af-11e7-8550-2504c1580979.gif)
- 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
yarn add rn-material-ui-textfield
npm install rn-material-ui-textfield
import React, { Component } from 'react';
import {
TextField,
FilledTextField,
OutlinedTextField,
} from 'rn-material-ui-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}
/>
);
}
}
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 |
- |
inputRef |
TextInput ref |
RefObject |
- |
Other TextInput properties will also work.
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 |
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 |
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 |
- |
git clone https://github.com/gabrieldonadel/rn-material-ui-textfield
cd rn-material-ui-textfield/example
yarn install
yarn run ios # or yarn run android
- Fork it (https://github.com/yourname/yourproject/fork)
- Create your feature branch (
git checkout -b feature/fooBar
)
- Commit your changes (
git commit -am 'Add some fooBar'
)
- Push to the branch (
git push origin feature/fooBar
)
- Create a new Pull Request