Material Text Input With Icons

component for React Native (iOS & Android).

Usage

import React, { Component } from 'react'
import TextInput from 'react-native-textinput-with-icons'

export default class Example extends Component {
  state = {
    name: ''
  }

  render() {
    let { name } = this.state

    return (
      <TextInput
        label="Name"
        // RTL must used when label in arabic ex: label="اللغة العربيه"
        leftIcon="thumbsup"
        leftIconType="oct"
        rippleColor="blue"
        rightIcon="react"
        rightIconType="material"
        value={name}
        refrance={(refrance) => {
            this.input = refrance;
        }}
        onChangeText={name => this.setState({ name })}
      />
    )
  }
}

Supported Icons

Ionicons by Ben Sperry (v4.2.4, 696 icons)\ Octicons by Github, Inc. (v8.0.0, 177 icons)\ Evilicons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)\ FontAwesome by Dave Gandy (v4.7.0, 675 icons)\ MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)

Installation

1- Run yarn add react-native-textinput-with-icons
  #OR
  #npm install --save react-native-textinput-with-icons
2- Run react-native link react-native-vector-icons

Properties

`Attention`


    You must use RTL prop where label in arabic

Container

name	type	default
containerWidth	Number
containerMinWidth	Number	`150`
containerMaxWidth	Number	`screenWidth - '20%'`
containerMaxHeight	Number	`150`
containerMarginBottom	Number	`0`

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
minHeight	Number
height	Number
maxHeight	Number
marginTop	Number
marginRight	Number
marginEnd	Number
marginBottom	Number	`8`
marginLeft	Number
marginStart	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`

Icons

Name	Type	Default
leftIcon	String
leftIconSize	Number	`15`
leftIconColor	String	`#777777`
leftIconType	String	`ion`
onPressLeftIcon	Function
rightIcon	String
rightIconSize	Number	`15`
rightIconColor	String	`#777777`
rightIconType	String	`ion`
onPressRightIcon	Function
rippleColor	String	`rgba(220,220,220,10)`

Icon Types

Name	Type	iconLibrary
ion	String	IonIcons
oct	String	Octicons
evil	String	Evilicons
awesome	String	FontAwesome
material	String	MaterialCommunityIcons

Other TextInput properties will also work

## License

The MIT License.

See [LICENSE](LICENSE)

Package detail

react-native-textinput-with-icons

readme