Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Text
Text is used to render 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" | "8xl" | "9xl" | (string & {})>
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
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
variant
Text component variant typings. Refer extendTheme
Type: unknown
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of text.
Info: We can easily extend the text component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase