- install react-native-vector-icon
- Run:
$ npm install --save react-native-password-eye
import TextBox from 'react-native-password-eye';
place <TextBox>
tag wherever you want to have it.
<TextBox onChangeText={(text) => console.log('onChangeText: ', text)} />
props | required |
---|---|
onChangeText | YES |
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 |
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 |
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'}
/>