Version: 3.2.1

Text

Text is used to render text and paragraphs within an interface.

Examples#

ChangingFontSize#

Truncated#

Nested#

Overridden#

Props#

Name Type Description Default
children ReactNode Renders components as Text children. Accepts a JSX.Element or an array of JSX.Element. -
fontSize ResponsiveValue<number | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | (string & {})> The size of font -
letterSpacing ResponsiveValue<number | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | (string & {})> Letter spacing -
lineHeight ResponsiveValue<number | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | (string & {})> Line height -
fontWeight ResponsiveValue<number | "bold" | (string & {}) | "hairline" | "thin" | "light" | "normal" | "medium" | "semibold" | "extrabold" | "black" | "extraBlack"> Font weight -
font ResponsiveValue<IFont> Fonts -
noOfLines number Used to truncate text at a specific number of lines -
bold boolean Make the text bold. -
isTruncated boolean If true, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set. -
italic boolean Make the text italic. -
underline boolean Underline the text. -
strikeThrough boolean A horizontal line through its center. -
sub boolean Text will have smaller font size. -
highlight boolean Highlight the text with a yellow background. -

Text implements PlatformProps, ColorProps, LayoutProps, BorderProps, ShadowProps, PositionProps, FlexProps, BackgroundProps, TextProp

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of text
We can easily extend the text component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Text: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.