react-native-textinput-with-icons

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)