Version: 3.0.7

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 \| "xxs" \| "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>
 )
}