Text in React Native

A deep dive into how to use the Text component in React Native and its modifiers such as font, color, alignment, line spacing and multiple lines.

In this tutorial, we'll take a deep dive into how to use the text component and its modifiers in React Native.

Next post ↑
Image in React Native
Previous post ↓
View in React Native

Text

Text in React Native is a component that allows you to display one or more lines of text. This is suitable for read-only information that's not editable.

iOS Screenshot of using Text component in React Native app

To use it, simply import Text from react-native package and render inside your component.

<View style={{ flex: 1 }}>
  <Text style={{ fontSize: 34, fontWeight: "bold" }}>Large Title</Text>
  <Text style={{ fontSize: 28, fontWeight: "600" }}>Title</Text>
  <Text style={{ fontSize: 22, fontWeight: "500" }}>Subtitle</Text>
  <Text style={{ fontSize: 17, fontWeight: "400" }}>Body Text</Text>
  <Text style={{ fontSize: 16, fontWeight: "400" }}>Callout Text</Text>
  <Text style={{ fontSize: 13, fontWeight: "400" }}>Footnote Text</Text>
</View>

Changing the Font

The style prop allows you to customize the text style. By default, it's going to use the default font specific to its platform. System fonts come with dynamic type, which automatically adjust its size for accessibility.

<Text style={{ fontFamily: "Helvetica", fontSize: 24 }}>Helvetica Font</Text>

System Fonts

You can use all system fonts that come with React Native.

<Text style={{ fontFamily: "Avenir", fontWeight: "bold", fontSize: 14 }}>
  Avenir Font
</Text>

List of iOS fonts available in React Native

  • Academy Engraved LET
  • AcademyEngravedLetPlain
  • Al Nile
  • AlNile-Bold
  • American Typewriter
  • AmericanTypewriter-Bold
  • AmericanTypewriter-Condensed
  • AmericanTypewriter-CondensedBold
  • AmericanTypewriter-CondensedLight
  • AmericanTypewriter-Light
  • Apple Color Emoji
  • Apple SD Gothic Neo
  • AppleColorEmoji
  • AppleSDGothicNeo-Bold
  • AppleSDGothicNeo-Light
  • AppleSDGothicNeo-Medium
  • AppleSDGothicNeo-Regular
  • AppleSDGothicNeo-SemiBold
  • AppleSDGothicNeo-Thin
  • AppleSDGothicNeo-UltraLight
  • Arial
  • Arial Hebrew
  • Arial Rounded MT Bold
  • Arial-BoldItalicMT
  • Arial-BoldMT
  • Arial-ItalicMT
  • ArialHebrew
  • ArialHebrew-Bold
  • ArialHebrew-Light
  • ArialMT
  • ArialRoundedMTBold
  • Avenir
  • Avenir Next
  • Avenir Next Condensed
  • Avenir-Black
  • Avenir-BlackOblique
  • Avenir-Book
  • Avenir-BookOblique
  • Avenir-Heavy
  • Avenir-HeavyOblique
  • Avenir-Light
  • Avenir-LightOblique
  • Avenir-Medium
  • Avenir-MediumOblique
  • Avenir-Oblique
  • Avenir-Roman
  • AvenirNext-Bold
  • AvenirNext-BoldItalic
  • AvenirNext-DemiBold
  • AvenirNext-DemiBoldItalic
  • AvenirNext-Heavy
  • AvenirNext-HeavyItalic
  • AvenirNext-Italic
  • AvenirNext-Medium
  • AvenirNext-MediumItalic
  • AvenirNext-Regular
  • AvenirNext-UltraLight
  • AvenirNext-UltraLightItalic
  • AvenirNextCondensed-Bold
  • AvenirNextCondensed-BoldItalic
  • AvenirNextCondensed-DemiBold
  • AvenirNextCondensed-DemiBoldItalic
  • AvenirNextCondensed-Heavy
  • AvenirNextCondensed-HeavyItalic
  • AvenirNextCondensed-Italic
  • AvenirNextCondensed-Medium
  • AvenirNextCondensed-MediumItalic
  • AvenirNextCondensed-Regular
  • AvenirNextCondensed-UltraLight
  • AvenirNextCondensed-UltraLightItalic
  • Bangla Sangam MN
  • Baskerville
  • Baskerville-Bold
  • Baskerville-BoldItalic
  • Baskerville-Italic
  • Baskerville-SemiBold
  • Baskerville-SemiBoldItalic
  • Bodoni 72
  • Bodoni 72 Oldstyle
  • Bodoni 72 Smallcaps
  • Bodoni Ornaments
  • BodoniOrnamentsITCTT
  • BodoniSvtyTwoITCTT-Bold
  • BodoniSvtyTwoITCTT-Book
  • BodoniSvtyTwoITCTT-BookIta
  • BodoniSvtyTwoOSITCTT-Bold
  • BodoniSvtyTwoOSITCTT-Book
  • BodoniSvtyTwoSCITCTT-Book
  • Bradley Hand
  • BradleyHandITCTT-Bold
  • Chalkboard SE
  • ChalkboardSE-Bold
  • ChalkboardSE-Light
  • ChalkboardSE-Regular
  • Chalkduster
  • Chalkduster
  • Cochin
  • Cochin-Bold
  • Cochin-BoldItalic
  • Cochin-Italic
  • Copperplate
  • Copperplate-Bold
  • Copperplate-Light
  • Courier
  • Courier New
  • Courier-Bold
  • Courier-BoldOblique
  • Courier-Oblique
  • CourierNewPS-BoldItalicMT
  • CourierNewPS-BoldMT
  • CourierNewPS-ItalicMT
  • CourierNewPSMT
  • Damascus
  • DamascusBold
  • DamascusLight
  • DamascusMedium
  • DamascusSemiBold
  • Devanagari Sangam MN
  • DevanagariSangamMN
  • DevanagariSangamMN-Bold
  • Didot
  • Didot-Bold
  • Didot-Italic
  • DiwanMishafi
  • Euphemia UCAS
  • EuphemiaUCAS-Bold
  • EuphemiaUCAS-Italic
  • Farah
  • Futura
  • Futura-CondensedExtraBold
  • Futura-CondensedMedium
  • Futura-Medium
  • Futura-MediumItalic
  • Geeza Pro
  • GeezaPro-Bold
  • Georgia
  • Georgia-Bold
  • Georgia-BoldItalic
  • Georgia-Italic
  • Gill Sans
  • GillSans-Bold
  • GillSans-BoldItalic
  • GillSans-Italic
  • GillSans-Light
  • GillSans-LightItalic
  • GillSans-SemiBold
  • GillSans-SemiBoldItalic
  • GillSans-UltraBold
  • Gujarati Sangam MN
  • GujaratiSangamMN
  • GujaratiSangamMN-Bold
  • Gurmukhi MN
  • GurmukhiMN-Bold
  • Heiti SC
  • Heiti TC
  • Helvetica
  • Helvetica Neue
  • Helvetica-Bold
  • Helvetica-BoldOblique
  • Helvetica-Light
  • Helvetica-LightOblique
  • Helvetica-Oblique
  • HelveticaNeue-Bold
  • HelveticaNeue-BoldItalic
  • HelveticaNeue-CondensedBlack
  • HelveticaNeue-CondensedBold
  • HelveticaNeue-Italic
  • HelveticaNeue-Light
  • HelveticaNeue-LightItalic
  • HelveticaNeue-Medium
  • HelveticaNeue-MediumItalic
  • HelveticaNeue-Thin
  • HelveticaNeue-ThinItalic
  • HelveticaNeue-UltraLight
  • HelveticaNeue-UltraLightItalic
  • Hiragino Mincho ProN
  • Hiragino Sans
  • HiraginoSans-W3
  • HiraginoSans-W6
  • HiraMinProN-W3
  • HiraMinProN-W6
  • Hoefler Text
  • HoeflerText-Black
  • HoeflerText-BlackItalic
  • HoeflerText-Italic
  • HoeflerText-Regular
  • Iowan Old Style
  • IowanOldStyle-Bold
  • IowanOldStyle-BoldItalic
  • IowanOldStyle-Italic
  • IowanOldStyle-Roman
  • Kailasa
  • Kailasa-Bold
  • Kannada Sangam MN
  • KannadaSangamMN
  • KannadaSangamMN-Bold
  • Khmer Sangam MN
  • Kohinoor Bangla
  • Kohinoor Devanagari
  • Kohinoor Telugu
  • KohinoorBangla-Light
  • KohinoorBangla-Regular
  • KohinoorBangla-Semibold
  • KohinoorDevanagari-Light
  • KohinoorDevanagari-Regular
  • KohinoorDevanagari-Semibold
  • KohinoorTelugu-Light
  • KohinoorTelugu-Medium
  • KohinoorTelugu-Regular
  • Lao Sangam MN
  • Malayalam Sangam MN
  • MalayalamSangamMN
  • MalayalamSangamMN-Bold
  • Marker Felt
  • MarkerFelt-Thin
  • MarkerFelt-Wide
  • Menlo
  • Menlo-Bold
  • Menlo-BoldItalic
  • Menlo-Italic
  • Menlo-Regular
  • Mishafi
  • Noteworthy
  • Noteworthy-Bold
  • Noteworthy-Light
  • Optima
  • Optima-Bold
  • Optima-BoldItalic
  • Optima-ExtraBlack
  • Optima-Italic
  • Optima-Regular
  • Oriya Sangam MN
  • OriyaSangamMN
  • OriyaSangamMN-Bold
  • Palatino
  • Palatino-Bold
  • Palatino-BoldItalic
  • Palatino-Italic
  • Palatino-Roman
  • Papyrus
  • Papyrus-Condensed
  • Party LET
  • PartyLetPlain
  • PingFang HK
  • PingFang SC
  • PingFang TC
  • PingFangHK-Light
  • PingFangHK-Medium
  • PingFangHK-Regular
  • PingFangHK-Semibold
  • PingFangHK-Thin
  • PingFangHK-Ultralight
  • PingFangSC-Light
  • PingFangSC-Medium
  • PingFangSC-Regular
  • PingFangSC-Semibold
  • PingFangSC-Thin
  • PingFangSC-Ultralight
  • PingFangTC-Light
  • PingFangTC-Medium
  • PingFangTC-Regular
  • PingFangTC-Semibold
  • PingFangTC-Thin
  • PingFangTC-Ultralight
  • Savoye LET
  • SavoyeLetPlain
  • Sinhala Sangam MN
  • SinhalaSangamMN
  • SinhalaSangamMN-Bold
  • Snell Roundhand
  • SnellRoundhand-Black
  • SnellRoundhand-Bold
  • Symbol
  • Tamil Sangam MN
  • TamilSangamMN-Bold
  • Telugu Sangam MN
  • Thonburi
  • Thonburi-Bold
  • Thonburi-Light
  • Times New Roman
  • TimesNewRomanPS-BoldItalicMT
  • TimesNewRomanPS-BoldMT
  • TimesNewRomanPS-ItalicMT
  • TimesNewRomanPSMT
  • Trebuchet MS
  • Trebuchet-BoldItalic
  • TrebuchetMS-Bold
  • TrebuchetMS-Italic
  • Verdana
  • Verdana-Bold
  • Verdana-BoldItalic
  • Verdana-Italic
  • Zapf Dingbats
  • ZapfDingbatsITC
  • Zapfino

List of Android fonts available in React Native

  • normal
  • notoserif
  • sans-serif
  • sans-serif-light
  • sans-serif-thin
  • sans-serif-condensed
  • sans-serif-medium
  • serif
  • Roboto
  • monospace

Alignment and sizing

You can add the style prop with width, height and textAlign attributes. This is especially useful for multi-line texts.

<Text style={{ width: 100, textAlign: "left" }}>
  Est culpa velit pariatur proident qui pariatur veniam irure ullamco pariatur
  officia magna.
</Text>

Line Spacing

Add more space between the lines with the lineHeight prop.

<Text style={{ lineHeight: 20 }}>
  Elit non qui pariatur dolore fugiat incididunt ea aute Lorem ex. Aliqua magna
  exercitation non quis. Ad Lorem incididunt commodo nostrud proident do duis
  Lorem.
</Text>

Line Limit

Limit the number of lines for your text with the numberOfLines prop. Overflowing characters will have the ellipsis at the end.

<Text numberOfLines={1}>
  Sunt occaecat dolor occaecat est. In adipisicing excepteur in exercitation
  aute adipisicing labore enim velit cillum exercitation consectetur.
</Text>

We hope you enjoyed this content and now better understand how to use Text in React Native.

Never miss a beat

Stay in the loop with our latest updates and offers - no spam, just the good stuff!