react-native-material-textinput

Material Design Text Input

Textual input component for React Native (iOS & Android).

Usage

import React, { useState } from 'react'
import TextInput, { TextInputRef } from 'react-native-material-textinput'

const Example = () => {
  const inputRef = useRef<TextInputRef>(null)
  const [name, setName] = useState('')

  const handleInputChange = (value: typeof name) => setName(value)

  return <TextInput ref={inputRef} label="Name" value={name} onChangeText={handleInputChange} />
}

export default Example

Properties

Label

name	type	default
label	String
labelDuration	Number	200
labelColor	String	gray
labelActiveTop	Number	-18
labelActiveColor	String	#3f51b5
labelActiveScale	Number	0.8

Placeholder

Name	Type	Default
placeholder	String
placeholderColor	String	gray

Input

Name	Type	Default
ref	Ref
minHeight	Number
height	Number
maxHeight	Number
marginTop	Number
marginRight	Number
marginBottom	Number	8
marginLeft	Number
paddingTop	Number	20
paddingRight	Number	0
paddingBottom	Number	8
paddingLeft	Number	0
color	String	black
activeColor	String
fontFamily	String
fontSize	Number	15
fontWeight	String or Number	normal
onFocus	Function
onBlur	Function
onChangeText	Function
onContentSizeChange	Function

Underline

Name	Type	Default
underlineDuration	Number	200
underlineHeight	Number	1
underlineColor	String	gray
underlineActiveColor	String	#3f51b5
underlineActiveHeight	Number	2

ErrorHelper

Name	Type	Default
error	String
errorPaddingTop	Number	8
errorColor	String	#fc1f4a
errorFontSize	Number	12

Other TextInput properties will also work

RTL

Supported using I18nManager from react-native

License

The MIT License.

See LICENSE