Socket
Socket
Sign inDemoInstall

@ubaids/react-native-material-textfield

Package Overview
Dependencies
1
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ubaids/react-native-material-textfield

Material textfield


Version published
Maintainers
1
Weekly downloads
164
decreased by-28.07%

Weekly downloads

Readme

Source

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

BSD License

Copyright 2017-2019 Alexander Nazarov. All rights reserved.

Keywords

FAQs

Last updated on 07 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc