react-native-password-eye

Installation

1. install react-native-vector-icon
2. Run: $ npm install --save react-native-password-eye

usage

 import TextBox from 'react-native-password-eye'; 

place <TextBox> tag wherever you want to have it.

<TextBox onChangeText={(text) => console.log('onChangeText: ', text)} />

Methods

|props | required | |--|--| | onChangeText | YES |

Properties

|props|value | default value| |--|--|--| | alertType| one of success, warning, error | null| | blurOnSubmit| bool | false | | hint| string | null| | hintColor| string |#818181 | | hintStyles| style| | | inputStyle| style| | | placeholder| string| | | placeholderTextColor| string| #C5C5C5| | rtl| bool | false| | returnKeyType| enum ( similar to default TextInput ) | next | | secureTextEntry| bool | false| | style| style | |

styles

|props|description | |--|--| | containerStyles | styling for view containing the input and the hint message | | inputStyle | styling for Input Component | | hintStyles | styling for hint text in the bottom of the input |

customize icons

|props|description | default value | |--|--|--| | iconFamily | one of the icon sets of react-native-vector-icon | Feather| | iconSuccess | icon name for the success icon | smile | | iconSuccessColor | icon color for the success icon | #28a745 | | iconWarning | icon name for the warning icon | alert-triangle | | iconWarningColor | icon color for the warning icon | #ffc107 | | iconAlert | icon name for the error icon | alert-circle | | iconAlertColor | icon color for the error icon | #dc3545 | | eyeColor | icon color for the eye icon | #2E2E2E |

example:

import TextBox from 'react-native-password-eye';

<TextBox 
	iconFamily={'MaterialCommunityIcons'}
	iconSuccess={'emoticon-happy-outline'}
	iconWarning={'alert-outline'}
	iconAlert={'alert-octagon-outline'}
/>