Package Exports

react-native-material-textfield

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-material-textfield) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-material-textfield

Material texfield with consistent behaviour on iOS and Android

example

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)
Helper text
Character counter
Multiline text input
Pure javascript implementation

Installation

npm install --save react-native-material-textfield

Usage

import React, { Component } from 'react';
import { TextField } from 'react-native-material-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
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	-
error	Text field error text	String	-
errorColor	Text field color for errored state	String	rgb(213, 0, 0)
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
renderAccessory	Render input accessory view	Function	-
onChangeText	Change text callback	Function	-
onFocus	Focus callback	Function	-
onBlur	Blur callback	Function	-

Other TextInput properties will also work

Methods

name	description	return type
focus()	Acquire focus	undefined
blur()	Release focus	undefined
clear()	Clear text field	undefined
value()	Get current value	String
isFocused()	Get current focus state	Boolean
isRestricted()	Get current restriction state	Boolean

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