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 |