Text | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 allows the rendering of text and paragraphs within an interface.
Show Code
Playground
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: ResponsiveValue<number | "sm" | "2xs" | "xs" | "md" | "xl" | "3xl" | "5xl" | "lg" | "6xl" | "7xl" | "4xl" | "2xl" | (string & {}) | "8xl" | "9xl">
letterSpacing
Letter spacing
Type: ResponsiveValue<number | "sm" | "xs" | "md" | "xl" | "lg" | "2xl" | (string & {})>
lineHeight
Line height
Type: ResponsiveValue<number | "sm" | "2xs" | "xs" | "md" | "xl" | "3xl" | "5xl" | "lg" | "4xl" | "2xl" | (string & {})>
fontWeight
Font weight
Type: ResponsiveValue<number | "bold" | "medium" | (string & {}) | "hairline" | "thin" | "light" | "normal" | "semibold" | "extrabold" | "black" | "extraBlack">
font
Fonts
Type: ResponsiveValue<IFont>
noOfLines
Used to truncate text at a specific number of lines
Type: number
bold
Used to make the text bold.
Type: boolean
isTruncated
If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.
Type: boolean
italic
Used to make the text italic.
Type: boolean
underline
Used to underline the text.
Type: boolean
strikeThrough
A horizontal line through the center of the text.
Type: boolean
sub
Text will have smaller font size.
Type: boolean
highlight
Used to 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