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 propertie 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	InputColor	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.

Sizes

One of 'small' | 'default' | 'medium' | 'large'

Name	Type	Value
small	string	Font size and Icon size: FONT_SIZE.small Label font size: for material FONT_SIZE.small * 0.78 for default FONT_SIZE.small
default	string	Font size and Icon size: FONT_SIZE.default Label font size: for material FONT_SIZE.default * 0.78 for default FONT_SIZE.default
medium	string	Font size and Icon size: FONT_SIZE.medium Label font size: for material FONT_SIZE.medium * 0.78 for default FONT_SIZE.medium
large	string	FFont size and Icon size: FONT_SIZE.large Label font size: for material FONT_SIZE.large * 0.78 for default FONT_SIZE.large

BorderRadius

One of 'none' | 'small' | 'medium' | 'large' | 'full' | number

Name	Type	Value
none	number	0
small	number	2
medium	number	4
large	number	6
full	number	99999
	number	Any number value.

BorderWidth

One of 'none' | 'hairline' | 'thin' | 'base' | 'thick' | number

Name	Type	Value
none	number	0
hairline	StyleSheet.hairlineWidth	This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements.
thin	number	1
base	number	2
thick	number	3
	number	Any number value

InputColor

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

Name	Type	Value	Preview
			Light	Dark
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
	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.