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. To display a line of text, you initialize Text and set a String value.
<Text>Text content</Text>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 LETAcademyEngravedLetPlainAl NileAlNile-BoldAmerican TypewriterAmericanTypewriter-BoldAmericanTypewriter-CondensedAmericanTypewriter-CondensedBoldAmericanTypewriter-CondensedLightAmericanTypewriter-LightApple Color EmojiApple SD Gothic NeoAppleColorEmojiAppleSDGothicNeo-BoldAppleSDGothicNeo-LightAppleSDGothicNeo-MediumAppleSDGothicNeo-RegularAppleSDGothicNeo-SemiBoldAppleSDGothicNeo-ThinAppleSDGothicNeo-UltraLightArialArial HebrewArial Rounded MT BoldArial-BoldItalicMTArial-BoldMTArial-ItalicMTArialHebrewArialHebrew-BoldArialHebrew-LightArialMTArialRoundedMTBoldAvenirAvenir NextAvenir Next CondensedAvenir-BlackAvenir-BlackObliqueAvenir-BookAvenir-BookObliqueAvenir-HeavyAvenir-HeavyObliqueAvenir-LightAvenir-LightObliqueAvenir-MediumAvenir-MediumObliqueAvenir-ObliqueAvenir-RomanAvenirNext-BoldAvenirNext-BoldItalicAvenirNext-DemiBoldAvenirNext-DemiBoldItalicAvenirNext-HeavyAvenirNext-HeavyItalicAvenirNext-ItalicAvenirNext-MediumAvenirNext-MediumItalicAvenirNext-RegularAvenirNext-UltraLightAvenirNext-UltraLightItalicAvenirNextCondensed-BoldAvenirNextCondensed-BoldItalicAvenirNextCondensed-DemiBoldAvenirNextCondensed-DemiBoldItalicAvenirNextCondensed-HeavyAvenirNextCondensed-HeavyItalicAvenirNextCondensed-ItalicAvenirNextCondensed-MediumAvenirNextCondensed-MediumItalicAvenirNextCondensed-RegularAvenirNextCondensed-UltraLightAvenirNextCondensed-UltraLightItalicBangla Sangam MNBaskervilleBaskerville-BoldBaskerville-BoldItalicBaskerville-ItalicBaskerville-SemiBoldBaskerville-SemiBoldItalicBodoni 72Bodoni 72 OldstyleBodoni 72 SmallcapsBodoni OrnamentsBodoniOrnamentsITCTTBodoniSvtyTwoITCTT-BoldBodoniSvtyTwoITCTT-BookBodoniSvtyTwoITCTT-BookItaBodoniSvtyTwoOSITCTT-BoldBodoniSvtyTwoOSITCTT-BookBodoniSvtyTwoSCITCTT-BookBradley HandBradleyHandITCTT-BoldChalkboard SEChalkboardSE-BoldChalkboardSE-LightChalkboardSE-RegularChalkdusterChalkdusterCochinCochin-BoldCochin-BoldItalicCochin-ItalicCopperplateCopperplate-BoldCopperplate-LightCourierCourier NewCourier-BoldCourier-BoldObliqueCourier-ObliqueCourierNewPS-BoldItalicMTCourierNewPS-BoldMTCourierNewPS-ItalicMTCourierNewPSMTDamascusDamascusBoldDamascusLightDamascusMediumDamascusSemiBoldDevanagari Sangam MNDevanagariSangamMNDevanagariSangamMN-BoldDidotDidot-BoldDidot-ItalicDiwanMishafiEuphemia UCASEuphemiaUCAS-BoldEuphemiaUCAS-ItalicFarahFuturaFutura-CondensedExtraBoldFutura-CondensedMediumFutura-MediumFutura-MediumItalicGeeza ProGeezaPro-BoldGeorgiaGeorgia-BoldGeorgia-BoldItalicGeorgia-ItalicGill SansGillSans-BoldGillSans-BoldItalicGillSans-ItalicGillSans-LightGillSans-LightItalicGillSans-SemiBoldGillSans-SemiBoldItalicGillSans-UltraBoldGujarati Sangam MNGujaratiSangamMNGujaratiSangamMN-BoldGurmukhi MNGurmukhiMN-BoldHeiti SCHeiti TCHelveticaHelvetica NeueHelvetica-BoldHelvetica-BoldObliqueHelvetica-LightHelvetica-LightObliqueHelvetica-ObliqueHelveticaNeue-BoldHelveticaNeue-BoldItalicHelveticaNeue-CondensedBlackHelveticaNeue-CondensedBoldHelveticaNeue-ItalicHelveticaNeue-LightHelveticaNeue-LightItalicHelveticaNeue-MediumHelveticaNeue-MediumItalicHelveticaNeue-ThinHelveticaNeue-ThinItalicHelveticaNeue-UltraLightHelveticaNeue-UltraLightItalicHiragino Mincho ProNHiragino SansHiraginoSans-W3HiraginoSans-W6HiraMinProN-W3HiraMinProN-W6Hoefler TextHoeflerText-BlackHoeflerText-BlackItalicHoeflerText-ItalicHoeflerText-RegularIowan Old StyleIowanOldStyle-BoldIowanOldStyle-BoldItalicIowanOldStyle-ItalicIowanOldStyle-RomanKailasaKailasa-BoldKannada Sangam MNKannadaSangamMNKannadaSangamMN-BoldKhmer Sangam MNKohinoor BanglaKohinoor DevanagariKohinoor TeluguKohinoorBangla-LightKohinoorBangla-RegularKohinoorBangla-SemiboldKohinoorDevanagari-LightKohinoorDevanagari-RegularKohinoorDevanagari-SemiboldKohinoorTelugu-LightKohinoorTelugu-MediumKohinoorTelugu-RegularLao Sangam MNMalayalam Sangam MNMalayalamSangamMNMalayalamSangamMN-BoldMarker FeltMarkerFelt-ThinMarkerFelt-WideMenloMenlo-BoldMenlo-BoldItalicMenlo-ItalicMenlo-RegularMishafiNoteworthyNoteworthy-BoldNoteworthy-LightOptimaOptima-BoldOptima-BoldItalicOptima-ExtraBlackOptima-ItalicOptima-RegularOriya Sangam MNOriyaSangamMNOriyaSangamMN-BoldPalatinoPalatino-BoldPalatino-BoldItalicPalatino-ItalicPalatino-RomanPapyrusPapyrus-CondensedParty LETPartyLetPlainPingFang HKPingFang SCPingFang TCPingFangHK-LightPingFangHK-MediumPingFangHK-RegularPingFangHK-SemiboldPingFangHK-ThinPingFangHK-UltralightPingFangSC-LightPingFangSC-MediumPingFangSC-RegularPingFangSC-SemiboldPingFangSC-ThinPingFangSC-UltralightPingFangTC-LightPingFangTC-MediumPingFangTC-RegularPingFangTC-SemiboldPingFangTC-ThinPingFangTC-UltralightSavoye LETSavoyeLetPlainSinhala Sangam MNSinhalaSangamMNSinhalaSangamMN-BoldSnell RoundhandSnellRoundhand-BlackSnellRoundhand-BoldSymbolTamil Sangam MNTamilSangamMN-BoldTelugu Sangam MNThonburiThonburi-BoldThonburi-LightTimes New RomanTimesNewRomanPS-BoldItalicMTTimesNewRomanPS-BoldMTTimesNewRomanPS-ItalicMTTimesNewRomanPSMTTrebuchet MSTrebuchet-BoldItalicTrebuchetMS-BoldTrebuchetMS-ItalicVerdanaVerdana-BoldVerdana-BoldItalicVerdana-ItalicZapf DingbatsZapfDingbatsITCZapfino
List of Android fonts available in React Native
normalnotoserifsans-serifsans-serif-lightsans-serif-thinsans-serif-condensedsans-serif-mediumserifRobotomonospace
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.