GroupTextField
Material Design TextInput with warning message support Example
<GroupTextField
label={'placeholder'}
onChangeText={'Function'}
secureTextEntry
value={'value'}
warningMessage={'warning message'}
/>
Props
Prop | Type | Default | Required | Description |
---|---|---|---|---|
autoFocus | bool | Yes | If true, focuses the input on componentDidMount. | |
containerStyle | any | No | container style | |
keyboardType | string | 'default' | Yes | enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') |
placeholder | string | Yes | The string that will be rendered before text input has been entered. | |
secureTextEntry | bool | false | Yes | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. |
isDivider | bool | true | No | Divider is used between warning message and TextInput |
warningMessage | string | Yes | warning message | |
duration | number | 200 | No | A number representing the duration of floating label and underline animations in milliseconds. |
label | string | No | This string appears as the label. | |
highlightColor | string | Colors.fadedWhite | Yes | This string represents the hex code, rgb, or rgba color of the TextInput label and underline when it is active/focused on. |
labelColor | string | Colors.fadedWhite | No | This string represents the hex code, rgb, or rgba color of the TextInput label when it is inactive. |
borderColor | string | No | This string represents the hex code, rgb, or rgba color of the TextInput underline when it is inactive. | |
textColor | string | Colors.white | No | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput. Note: If you set textFocusColor or textBlurColor, those colors will override this one during the corresponding state of the TextInput. |
textFocusColor | string | No | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput when it is active/focused on. | |
textBlurColor | string | No | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput when it is inactive. | |
onFocus | func | No | ||
onBlur | func | No | Callback that is called when the text input is focused. | |
onChangeText | func | No | Callback that is called when the text input is blurred. | |
value | string | No | The value to show for the text input. | |
dense | bool | true | No | If true, it will render the "dense" input field which is smaller in height and has smaller font sizes. You can view more here. |
inputStyle | object | No | Style for TextInput | |
wrapperStyle | object | No | Style for TextInput View | |
labelStyle | object | No | Style for label | |
icon | No | |||
iconSize | 24 | Yes | ||
tintColor | Colors.grey | Yes |