0.16.1 • Published 4 years ago

react-native-material-textfield v0.16.1

Weekly downloads
16,608
License
BSD-3-Clause
Repository
github
Last release
4 years ago

react-native-material-textfield

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)
  • Outlined and filled fields
  • Masked input support
  • Multiline text input
  • Character counter
  • Prefix and suffix
  • Accessory views
  • Helper text
  • RTL support
  • Pure javascript implementation

Installation

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

Usage

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

class Example extends Component {
  fieldRef = React.createRef();

  onSubmit = () => {
    let { current: field } = this.fieldRef;

    console.log(field.value());
  };

  formatText = (text) => {
    return text.replace(/[^+\d]/g, '');
  };

  render() {
    return (
      <OutlinedTextField
        label='Phone number'
        keyboardType='phone-pad'
        formatText={this.formatText}
        onSubmitEditing={this.onSubmit}
        ref={this.fieldRef}
      />
    );
  }
}

Properties

namedescriptiontypedefault
textColorText input colorStringrgba(0, 0, 0, .87)
fontSizeText input font sizeNumber16
labelFontSizeText field label font sizeNumber12
lineWidthText field underline widthNumber0.5
activeLineWidthText field active underline widthNumber2
disabledLineWidthText field disabled underline widthNumber1
tintColorText field accent colorStringrgb(0, 145, 234)
baseColorText field base colorStringrgba(0, 0, 0, .38)
labelText field label textString-
titleText field helper textString-
prefixText field prefix textString-
suffixText field suffix textString-
errorText field error textString-
errorColorText field color for errored stateStringrgb(213, 0, 0)
lineTypeText field line typeStringsolid
disabledLineTypeText field line type in disabled stateStringdotted
animationDurationText field animation duration in msNumber225
characterRestrictionText field soft limit for character counterNumber-
disabledText field availabilityBooleanfalse
editableText field text can be editedBooleantrue
multilineText filed multiline inputBooleanfalse
contentInsetLayout configuration objectObject{...}
labelOffsetLabel position adjustmentObject{...}
inputContainerStyleStyle for input container viewObject-
containerStyleStyle for container viewObject-
labelTextStyleStyle for label inner Text componentObject-
titleTextStyleStyle for title inner Text componentObject-
affixTextStyleStyle for affix inner Text componentObject-
formatTextInput mask callbackFunction-
renderLeftAccessoryRender left input accessory viewFunction-
renderRightAccessoryRender right input accessory viewFunction-
onChangeTextChange text callbackFunction-
onFocusFocus callbackFunction-
onBlurBlur callbackFunction-

Other TextInput properties will also work.

Content Inset

namedescriptionNormalFilledOutlined
topInset on the top side1680
leftInset on the left side01212
rightInset on the right side01212
labelSpace between label and TextInput444
inputSpace between line and TextInput8816

Label Offset

namedescriptionNormalFilledOutlined
x0Horizontal offset for inactive state000
y0Vertical offset for inactive state0-100
x1Horizontal offset for active state000
y1Vertical offset for active state0-2-10

Methods

namedescriptionreturns
focus()Acquire focus-
blur()Release focus-
clear()Clear text field-
value()Get current valueString
isFocused()Get current focus stateBoolean
isErrored()Get current error stateBoolean
isRestricted()Get current restriction stateBoolean
isDefaultVisible()Get default value visibilityBoolean
isPlaceholderVisible()Get placeholder visibilityBoolean
setValue()Set current value-

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

Copyright 2017-2019 Alexander Nazarov. All rights reserved.

0.16.1

4 years ago

0.16.0

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

6 years ago

0.11.0

6 years ago

0.10.4

6 years ago

0.10.3

6 years ago

0.10.2

6 years ago

0.10.1

6 years ago

0.10.0

7 years ago

0.9.0

7 years ago

0.8.4

7 years ago

0.8.3

7 years ago

0.8.2

7 years ago

0.8.1

7 years ago

0.8.0

7 years ago

0.7.0

7 years ago

0.6.5

7 years ago

0.6.4

7 years ago

0.6.3

7 years ago

0.6.2

7 years ago

0.6.1

7 years ago

0.6.0

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

7 years ago

0.4.0

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago