react-native-material-textfield-new

Supports Latest react-native version 0.70.*

Material texfield with consistent behaviour on iOS and Android.

This package is a cloned version of react-native-material-textfield. I've added few fixes to the package.

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

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

or

1yarn add react-native-material-textfield-new

Usage

1import React, { Component } from 'react';
2import {
3  TextField,
4  FilledTextField,
5  OutlinedTextField,
6} from 'react-native-material-textfield-new';
7
8class Example extends Component {
9  fieldRef = React.createRef();
10
11  onSubmit = () => {
12    let { current: field } = this.fieldRef;
13
14    console.log(field.value());
15  };
16
17  formatText = (text) => {
18    return text.replace(/[^+\d]/g, '');
19  };
20
21  render() {
22    return (
23      <OutlinedTextField
24        label='Phone number'
25        keyboardType='phone-pad'
26        formatText={this.formatText}
27        onSubmitEditing={this.onSubmit}
28        ref={this.fieldRef}
29      />
30    );
31  }
32}

Properties

name	description	type	default
textColor	Text input color	String	rgba(0, 0, 0, .87)
fontSize	Text input font size	Number	16
labelFontSize	Text field label font size	Number	12
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)
errorTestId	Text field error testID	String	-
lineType	Text field line type	String	solid
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
contentInset	Layout configuration object	Object	{...}
labelOffset	Label position adjustment	Object	{...}
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	-
formatText	Input mask callback	Function	-
renderLeftAccessory	Render left input accessory view	Function	-
renderRightAccessory	Render right input accessory view	Function	-
onChangeText	Change text callback	Function	-
onFocus	Focus callback	Function	-
onBlur	Blur callback	Function	-

Other TextInput properties will also work.

Content Inset

name	description	Normal	Filled	Outlined
top	Inset on the top side	16	8	0
left	Inset on the left side	0	12	12
right	Inset on the right side	0	12	12
label	Space between label and TextInput	4	4	4
input	Space between line and TextInput	8	8	16

Label Offset

name	description	Normal	Filled	Outlined
x0	Horizontal offset for inactive state	0	0	0
y0	Vertical offset for inactive state	0	-10	0
x1	Horizontal offset for active state	0	0	0
y1	Vertical offset for active state	0	-2	-10

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
isErrored()	Get current error state	Boolean
isRestricted()	Get current restriction state	Boolean
isDefaultVisible()	Get default value visibility	Boolean
isPlaceholderVisible()	Get placeholder visibility	Boolean
setValue()	Set current value	-

Example - (Development)

We are using Yalc to manage local dependency for development.

1git clone https://github.com/sriram10/react-native-material-textfield-new
2
3cd react-native-material-textfield-new
4yarn
5npx yarn publish
6cd exampleApp
7npx yalc add react-native-material-textfield-new
8yarn
9yarn ios # or yarn android

Copyright and License

BSD License Copyright 2022 Sriram. All rights reserved.

Credits

Thanks to Alexander Nazarov for creating this awesome library.