Text | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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