mfrag38-react-native-textinput-with-icons-full
v1.1.1
Published
small react native package help you to make a material text input and allow you to add icons to the left and right side and icons have onPress feature
Downloads
33
Maintainers
mfrag38Readme
MFRAG38 Material Text Input With Icons 
Based On Material Text Input With Icons By Abdalla Emad Eldin
component for React Native (iOS & Android).
Usage
import React, { Component } from 'react';
import TextInput from 'mfrag38-react-native-textinput-with-icons-full';
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 mfrag38-react-native-textinput-with-icons-full#OR #npm install --save mfrag38-react-native-textinput-with-icons-full2- 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 |
| errorBackgroundColor | String | Transparent |
| 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)