React-native-tecnovix-material-textfield NPM

Owner of lib

https://github.com/n4kz/react-native-material-textfield https://www.npmjs.com/package/react-native-material-textfield

Adaptations of inputs with specific customizations

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

Installation

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

Usage

import React, { Component } from 'react';
import { TextField } from 'react-native-tecnovix-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
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

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/n4kz/react-native-tecnovix-material-textfield
cd react-native-tecnovix-material-textfield/example
npm install
npm run ios # or npm run android