davibfarias-rn-material-ui-textfield 1.0.0 • Public • Published 2 years ago
rn-material-ui-textfield
Material UI 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)
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
yarn add rn-material-ui-textfield
npm install rn-material-ui-textfield
Usage
import React , { Component } from 'react'
import { TextField , FilledTextField , OutlinedTextField } from 'rn-material-ui-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
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)
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
-
inputRef
TextInput ref
RefObject
-
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
git clone https://github.com/gabrieldonadel/rn-material-ui-textfield
cd rn-material-ui-textfield/example
yarn install
yarn run ios # or yarn run android
Contributing
Fork it (https://github.com/yourname/yourproject/fork )
Create your feature branch (git checkout -b feature/fooBar
)
Commit your changes (git commit -am 'Add some fooBar'
)
Push to the branch (git push origin feature/fooBar
)
Create a new Pull Request
Package Sidebar Install npm i davibfarias-rn-material-ui-textfield
Downloads Weekly Downloads