Skip to content

Latest commit

 

History

History
138 lines (114 loc) · 6.29 KB

readme.md

File metadata and controls

138 lines (114 loc) · 6.29 KB
Raw

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.

npm license travis codeclimate

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)
  • 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

Copyright 2018 Alexander Nazarov. All rights reserved.