Skip to content

V99 Document

V99Input

V99Input¶

Display Input.

I. Props¶

Name	Type	Default	Description
containerStyles	ViewStyle	-	Style to the container of whole component
placeholder	string	true	Hint displays only when staticLabel prop is set to true. This prop is used to show a preview of the input to the user
isPassword	boolean	false	Set this to true if is password to have a show/hide input and secureTextEntry automatically
onSubmit	() => void	-	Callback for action submit on the keyboard
showPasswordContainerStyles	ViewStyle	-	Style to the show/hide password container
inputStyles	\| 'H1' \| 'H2' \| 'H3' \| 'T1' \| 'T2' \| 'T3' \| 'B1' \| 'B2' \| 'B3' \| 'B4' \| 'L1' \| 'L2' \| 'L3' \| 'L4'	B2	Style to the input base on V99Text style
isFocused	boolean	-	Required if onFocus or onBlur is overrided
mask	string	-	Set a mask to your input
multiline	boolean	-	Set multi line for your input
maxLength	number	-	Maxinum number of characters allowed. Overriden by mask if present
showCountdown	boolean	-	Shows the remaining number of characters allowed to be typed if maxLength or mask are present
showCountdownStyles	TextStyle	-	Style to the countdown text
countdownLabel	string	-	Label for the remaining number of characters allowed shown after the number
onTogglePassword	(show: boolean) => void	-	Callback for show/hide password
togglePassword	boolean	-	Prop for force toggling show/hide password. If set to true, shows the password, and when set to false hides it.
textError	string	-	Text when error

II. Usage¶

import { V99Input } from 'v99-kits'

III. AppInput list:¶

Input normal
Input password

1. Input normal¶

Example¶

                    <V99Input
                      placeholder={'Username'}
                      style={{
                        paddingHorizontal: V99Spacing.s16,
                        paddingTop: V99Spacing.s12,
                      }}
                    />

                    <V99Input
                      placeholder={'Username'}
                      value={username}
                      onChangeText={setUsername}
                      style={{
                        paddingHorizontal: V99Spacing.s16,
                        paddingTop: V99Spacing.s12,
                      }}
                    />

Demo¶

Input

2. Input password¶

Example¶

                     <V99Input
                      style={{
                        paddingHorizontal: V99Spacing.s16,
                        marginTop: V99Spacing.s16,
                      }}
                      placeholder={'Password'}
                      customLabelStyles={{ leftBlurred: 0.001 }}
                      maxLength={19}
                      isPassword={true}
                      textError={'Mật khẩu yêu cầu ít nhất 6 kí tự'}
                    />
                    <V99Input
                      style={{
                        paddingHorizontal: V99Spacing.s16,
                        marginTop: V99Spacing.s16,
                      }}
                      placeholder={'Password'}
                      value={password}
                      customLabelStyles={{ leftBlurred: 0.001 }}
                      onChangeText={setPassword}
                      maxLength={19}
                      isPassword={true}
                      textError={'Mật khẩu yêu cầu ít nhất 6 kí tự'}
                    />
                    <V99Input
                      style={{
                        paddingHorizontal: V99Spacing.s16,
                        marginTop: V99Spacing.s16,
                      }}
                      placeholder={'Password'}
                      value={password}
                      customLabelStyles={{ leftBlurred: 0.001 }}
                      onChangeText={setPassword}
                      maxLength={19}
                      isPassword={true}
                      textError={'Mật khẩu yêu cầu ít nhất 6 kí tự'}
                    />
                  </View>

Demo¶

Input_pass