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

Installation

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

Usage

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

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

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

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

Properties

tintColor - Text field accent color (default: rgb(0, 145, 234))
textColor - Text input color (default: rgba(0, 0, 0, .87)
baseColor - Text field base color (default: rgba(0, 0, 0, .38))
label - Text field label text
error - Text field error text
errorColor - Text field color for errored state (default: rgb(213, 0, 0))
animationDuration - Text field animation duration in ms (default: 225)
characterRestriction - Text field soft limit for character counter
onFocus - Focus callback
onBlur - Blur callback

Methods

focus() - Acquire focus
blur() - Release focus
clear() - Clear text field
value() - Get current value
isFocused() - Get current focus state
isRestricted() - Get current restriction state

Example

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

Copyright and License

BSD License