Text Box

FlexNative Text Box is part of the @flexnative/inputs package. To use the FlexNative Text Box you needs to install @flexnative/inputs package. Fallow this link on how to install the package.

API

import { NumericTextBox } from '@flexnative/inputs';

Component

TextBox

Type: React.PureComponent<TextBoxProps<T>>

Properties

info

TextBoxProps props extends TextInputProps from react-native so any TextInputProps properties from React Native it is applicable also in Text Box of @flexnative/inputs package.

Name	Type	Required	Default Value	Description
type	InputType	false	outlined	Input type.
size	Sizes	false	default	Input Sizes. One of Sizes type.
radius	BorderRadius	false	medium	Input border radius. One of BorderRadius type
borderWidth	BorderWidth	false	none	Optional input borders width. One of BorderWidth type
borderColor	ColorValue	false	undefined	Input borders color according react-native ColorValue.
activeBorderColor	ColorValue	false	undefined	Border color for active state according react-native ColorValue.
disabled	boolean	false	false	Set the input as disabled.
color	Color	false	theme.color.default	Color by theme or a custom color according react-native ColorValue.
backgroundColor	ColorValue	false	undefined	Input background color.
activeBorderColor	ColorValue	false	undefined	Border color for active state according react-native ColorValue.
material	boolean	false	false	Indicator if input should looks like Material input.
helperText	string	false	undefined	Helper text about input.
label	string	React.ReactElement	false	undefined
labelStyle	StyleProp<TextStyle> or ((state: StateCallbackType) => StyleProp<TextStyle>)	false	undefined	Either text styles or a function that receives a boolean reflecting whether the component is currently active and returns text styles.
prefix	keyof IconName or React.ReactElement	false	undefined	A keyof IconName to add icon form @flexnative/icon package, or React.ReactElement to display a custom element as prefix adornments
prefixStyle	StyleProp<TextStyle or TextStyle> or ((state: StateCallbackType) => StyleProp<TextStyle>)	false	undefined	Custom style for for prefix component. Either view styles or a function that receives a boolean reflecting whether the component is currently active and returns view styles.
prefixSeparator	boolean	false	false	If true a separator border it is show on prefix element.
suffix	keyof IconName or React.ReactElement	false	undefined	A keyof IconName to add icon form @flexnative/icon package, or React.ReactElement to display a custom element as surfix adornments
suffixStyle	StyleProp<TextStyle or TextStyle> or ((state: StateCallbackType) => StyleProp<TextStyle>)	false	undefined	Custom style for for prefix component. Either view styles or a function that receives a boolean reflecting whether the component is currently active and returns view styles.
suffixSeparator	boolean	false	false	If true a separator border it is show on suffix element.
isError	boolean	false	false	Indicates if the input has an error state.

Color

One of 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | ColorValue

Name	Type	Value	Preview
			Light	Dark
white	ColorValue	theme.colors.white	#FFFFFF	#FFFFFF
black	ColorValue	theme.colors.black	#424242	#424242
background	ColorValue	theme.colors.background	#f8f8f8	#000000
default	ColorValue	theme.colors.default	#f5f5f5	#404040
card	ColorValue	theme.colors.card	#ffffff	#232323
text	ColorValue	theme.colors.text	#424242	#ffffff
border	ColorValue	theme.colors.border	#42424226	#ffffff1A
placeholder	ColorValue	theme.colors.placeholder	#0000001A	#FFFFFF1A
info	ColorValue	theme.colors.info	#3e80ed	#3e80ed
success	ColorValue	theme.colors.success	#5ec232	#5ec232
warning	ColorValue	theme.colors.warning	#ffc107	#ffc107
error	ColorValue	theme.colors.error	#d51923	#d51923
dark	ColorValue	theme.colors.dark	#424242	#424242
secondary	ColorValue	theme.colors.secondary	#666666	#5C5C5C
light	ColorValue	theme.colors.light	#ebebeb	#ebebeb
primary	ColorValue	theme.colors.primary	#ff6358	#ff6358
overlay	ColorValue	theme.colors.overlay	#00000021	#FFFFFF21
	ColorValue	Any ColorValue chosen by developer.

📄️ Default

The following examples demonstrates the Text Boxes in action.

📄️ Material

The following examples demonstrates the Text Boxes in action.