Text | NativeBase | Universal Components for React and React Native

Search
⌘
K
Hire us
IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.
Explore gluestack-ui
Text
Text is used to render text and paragraphs within an interface.
Examples
ChangingFontSize
Playground
Truncated
Playground
Nested
Playground
Overridden
Playground
Props
children
Renders components as Text children. Accepts a JSX.Element or an array of JSX.Element.
Type: ReactNode
fontSize
The size of font
Type: number | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | number[] | string[] | Record<string, string>
noOfLines
Used to truncate text at a specific number of lines
Type: number
bold
Make the text bold.
Type: boolean
isTruncated
If true, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set.
Type: boolean
italic
Make the text italic.
Type: boolean
underline
Underline the text.
Type: boolean
strikeThrough
A horizontal line through its center.
Type: boolean
sub
Text will have smaller font size.
Type: boolean
highlight
Highlight the text with a yellow background.
Type: boolean
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the text.
Info: We can easily extend the text component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase