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
9
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)