Version: 3.0.0

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 number | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | number[] | string[] | Record<string, string> The size of font -
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 ColorProps, BackgroundProps, BorderProps, PositionProps, LayoutProps, OutlineProps, ExtraProps, PlatformProps, ShadowProps, FlexProps, TypographyProps, 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.