react-native-password-eye

A simple and fully customizable React Native component for TextInputs

Usage no npm install needed!

<script type="module">
  import reactNativePasswordEye from 'https://cdn.skypack.dev/react-native-password-eye';
</script>

README

npm version GitHub license

react-native-password-eye

enter image description here

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'}
/>