react-native-materialui-textfield

This work is heavily based on the fantastic work n4kz has done. That project seems to have been unmaintained, so this one has spawned.

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)
Multiline text input
Character counter
Prefix and suffix
Accessory view
Helper text
RTL support
Pure javascript implementation

Installation

npm install --save react-native-materialui-textfield

Usage

import React, { Component } from 'react';
import { TextField } from 'react-native-materialui-textfield';

class Example extends Component {
  state = {
    phone: '',
  };

  render() {
    let { phone } = this.state;

    return (
      <TextField
        label='Phone number'
        value={phone}
        onChangeText={ (phone) => this.setState({ phone }) }
      />
    );
  }
}

Properties

name	description	type	default
textColor	Text input color	String	rgba(0, 0, 0, .87)
fontSize	Text input font size	Number	16
titleFontSize	Text field title and error fontSize	Number	12
labelFontSize	Text field label font size	Number	12
labelHeight	Text field label base height	Number	32
labelPadding	Text field label base padding	Number	4
inputContainerPadding	Text field input container base padding	Number	8
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)
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
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	-
renderAccessory	Render input accessory view	Function	-
onChangeText	Change text callback	Function	-
onFocus	Focus callback	Function	-
onBlur	Blur callback	Function	-
helpersNumberOfLines	Error and Title number of lines	Function	1

Other TextInput properties will also work

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
isRestricted()	Get current restriction state	Boolean

Example

git clone https://github.com/petrogad/react-native-materialui-textfield
cd react-native-materialui-textfield/example
npm install
npm run ios # or npm run android

Copyright and License

BSD License

sethcwhiting/react-native-materialui-textfield