Owner of lib

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

Copyright 2017 Alexander Nazarov

Adaptations of inputs with specific customizations

react-native-tecnovix-material-textfield

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

| fontAnimate | when I was in focus use alterative font | 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 | - |

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

Copyright and License

BSD License

Copyright 2017 Alexander Nazarov. All rights reserved.