this repo has no description
kitten.sh
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-text" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Text · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/text><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Text · React Native"><meta data-rh=true name=description content="A React component for displaying text."><meta data-rh=true property=og:description content="A React component for displaying text."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/text><link data-rh=true rel=alternate href=https://reactnative.dev/docs/text hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/text hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs>
2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
3</defs></svg>
4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/text>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/text>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/text>0.79</a><li><a class=dropdown__link href=/docs/0.78/text>0.78</a><li><a class=dropdown__link href=/docs/0.77/text>0.77</a><li><a class=dropdown__link href=/docs/0.76/text>0.76</a><li><a class=dropdown__link href=/docs/0.75/text>0.75</a><li><a class=dropdown__link href=/docs/0.74/text>0.74</a><li><a class=dropdown__link href=/docs/0.73/text>0.73</a><li><a class=dropdown__link href=/docs/0.72/text>0.72</a><li><a class=dropdown__link href=/docs/0.71/text>0.71</a><li><a class=dropdown__link href=/docs/0.70/text>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/components-and-apis>Core Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/components-and-apis>Core Components and APIs</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/activityindicator>ActivityIndicator</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/button>Button</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/flatlist>FlatList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/image>Image</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/imagebackground>ImageBackground</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/keyboardavoidingview>KeyboardAvoidingView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/modal>Modal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/pressable>Pressable</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/refreshcontrol>RefreshControl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/scrollview>ScrollView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sectionlist>SectionList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/statusbar>StatusBar</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/switch>Switch</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/text>Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/textinput>TextInput</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablehighlight>TouchableHighlight</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchableopacity>TouchableOpacity</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablewithoutfeedback>TouchableWithoutFeedback</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view>View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/virtualizedlist>VirtualizedList</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/drawerlayoutandroid>Android Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawerlayoutandroid>DrawerLayoutAndroid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablenativefeedback>TouchableNativeFeedback</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/inputaccessoryview>iOS Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/inputaccessoryview>InputAccessoryView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/safeareaview>SafeAreaView</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/image-style-props>Props</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Text</h1></header><p>A React component for displaying text.</p>
5<p><code>Text</code> supports nesting, styling, and touch handling.</p>
6<p>In the following example, the nested title and body text will inherit the <code>fontFamily</code> from <code>styles.baseText</code>, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:</p>
7<div class=snack-player data-snack-name="Text Function Component Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7BText%2C%20StyleSheet%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20TextInANest%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BtitleText%2C%20setTitleText%5D%20%3D%20useState(%5C%22Bird's%20Nest%5C%22)%3B%5Cn%20%20const%20bodyText%20%3D%20'This%20is%20not%20really%20a%20bird%20nest.'%3B%5Cn%5Cn%20%20const%20onPressTitle%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20setTitleText(%5C%22Bird's%20Nest%20%5Bpressed%5D%5C%22)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.baseText%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.titleText%7D%20onPress%3D%7BonPressTitle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7BtitleText%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20numberOfLines%3D%7B5%7D%3E%7BbodyText%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20baseText%3A%20%7B%5Cn%20%20%20%20fontFamily%3A%20'Cochin'%2C%5Cn%20%20%7D%2C%5Cn%20%20titleText%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2020%2C%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20TextInANest%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div>
8<h2 class="anchor anchorWithStickyNavbar_JmGV" id=nested-text>Nested text<a href=#nested-text class=hash-link aria-label="Direct link to Nested text" title="Direct link to Nested text"></a></h2>
9<p>Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (<code>NSAttributedString</code> on iOS, <code>SpannableString</code> on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.</p>
10<div class=snack-player data-snack-name="Nested Text Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7BText%2C%20StyleSheet%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20BoldAndBeautiful%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.baseText%7D%3E%5Cn%20%20%20%20%20%20%20%20I%20am%20bold%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.innerText%7D%3E%20and%20red%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20baseText%3A%20%7B%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%7D%2C%5Cn%20%20innerText%3A%20%7B%5Cn%20%20%20%20color%3A%20'red'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20BoldAndBeautiful%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div>
11<p>Behind the scenes, React Native converts this to a flat <code>NSAttributedString</code> or <code>SpannableString</code> that contains the following information:</p>
12<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token string" style=color:#8dc891>"I am bold and red"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token number" style=color:#5a9bcf>0</span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>9</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> bold</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token number" style=color:#5a9bcf>9</span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>17</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> bold</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> red</span><br></span></code></pre></div></div>
13<h2 class="anchor anchorWithStickyNavbar_JmGV" id=containers>Containers<a href=#containers class=hash-link aria-label="Direct link to Containers" title="Direct link to Containers"></a></h2>
14<p>The <code><Text></code> element is unique relative to layout: everything inside is no longer using the Flexbox layout but using text layout. This means that elements inside of a <code><Text></code> are no longer rectangles, but wrap when they see the end of the line.</p>
15<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">First part and </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">second part</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// Text container: the text will be inline, if the space allows it</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |First part and second part|</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// otherwise, the text will flow as if it was one</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |First part |</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |and second |</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |part |</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">First part and </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">second part</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// View container: each text is its own block</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |First part and|</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |second part |</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// otherwise, the text will flow in its own block</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |First part |</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |and |</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// |second part|</span><br></span></code></pre></div></div>
16<h2 class="anchor anchorWithStickyNavbar_JmGV" id=limited-style-inheritance>Limited Style Inheritance<a href=#limited-style-inheritance class=hash-link aria-label="Direct link to Limited Style Inheritance" title="Direct link to Limited Style Inheritance"></a></h2>
17<p>On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:</p>
18<div class="language-css codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>css</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-css codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token selector" style=color:#2aa198>html</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>font-family</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token string" style=color:#8dc891>'lucida grande'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> tahoma</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> verdana</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> arial</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> sans-serif</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>font-size</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>11</span><span class="token unit">px</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>color</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> </span><span class="token hexcode color">#141823</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div>
19<p>All elements in the document will inherit this font unless they or one of their parents specifies a new rule.</p>
20<p>In React Native, we are more strict about it: <strong>you must wrap all the text nodes inside of a <code><Text></code> component</strong>. You cannot have a text node directly under a <code><View></code>.</p>
21<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1>// BAD: will raise exception, can't have a text node as child of a <View></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> Some text</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// GOOD</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> Some text</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div>
22<p>You also lose the ability to set up a default font for an entire subtree. Meanwhile, <code>fontFamily</code> only accepts a single font name, which is different from <code>font-family</code> in CSS. The recommended way to use consistent fonts and sizes across your application is to create a component <code>MyAppText</code> that includes them and use this component across your app. You can also use this component to make more specific components like <code>MyAppHeaderText</code> for other kinds of text.</p>
23<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>MyAppText</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> Text styled with the default font for the entire application</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>MyAppText</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>MyAppHeaderText</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Text styled as a header</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>MyAppHeaderText</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div>
24<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
25<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token function-variable function" style=color:#79b6f2>MyAppHeaderText</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">children</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>MyAppText</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>fontSize</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>20</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">children</span><span class="token punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>MyAppText</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
26<p>Composing <code>MyAppText</code> in this way ensures that we get the styles from a top-level component, but leaves us the ability to add/override them in specific use cases.</p>
27<p>React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.</p>
28<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>fontWeight</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'bold'</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> I am bold</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>color</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'red'</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">and red</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div>
29<p>We believe that this more constrained way to style text will yield better apps:</p>
30<ul>
31<li>
32<p>(Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.</p>
33</li>
34<li>
35<p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.</p>
36</li>
37</ul>
38<hr>
39<h1>Reference</h1>
40<h2 class="anchor anchorWithStickyNavbar_JmGV" id=props>Props<a href=#props class=hash-link aria-label="Direct link to Props" title="Direct link to Props"></a></h2>
41<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityhint><code>accessibilityHint</code><a href=#accessibilityhint class=hash-link aria-label="Direct link to accessibilityhint" title="Direct link to accessibilityhint"></a></h3>
42<p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.</p>
43<table><thead><tr><th>Type<tbody><tr><td>string</table>
44<hr>
45<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylanguage-ios><code>accessibilityLanguage</code> <div class="label ios">iOS</div><a href=#accessibilitylanguage-ios class=hash-link aria-label="Direct link to accessibilitylanguage-ios" title="Direct link to accessibilitylanguage-ios"></a></h3>
46<p>A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the <a href=https://www.rfc-editor.org/info/bcp47 target=_blank rel="noopener noreferrer">BCP 47 specification</a>.</p>
47<p>See the <a href=https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage target=_blank rel="noopener noreferrer">iOS <code>accessibilityLanguage</code> doc</a> for more information.</p>
48<table><thead><tr><th>Type<tbody><tr><td>string</table>
49<hr>
50<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylabel><code>accessibilityLabel</code><a href=#accessibilitylabel class=hash-link aria-label="Direct link to accessibilitylabel" title="Direct link to accessibilitylabel"></a></h3>
51<p>Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the <code>Text</code> nodes separated by space.</p>
52<table><thead><tr><th>Type<tbody><tr><td>string</table>
53<hr>
54<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityrole><code>accessibilityRole</code><a href=#accessibilityrole class=hash-link aria-label="Direct link to accessibilityrole" title="Direct link to accessibilityrole"></a></h3>
55<p>Tells the screen reader to treat the currently focused on element as having a specific role.</p>
56<p>On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the <a href=/docs/accessibility#accessibilitytraits-ios>Accessibility guide</a> for more information.</p>
57<p>On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS</p>
58<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/accessibility#accessibilityrole>AccessibilityRole</a></table>
59<hr>
60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitystate><code>accessibilityState</code><a href=#accessibilitystate class=hash-link aria-label="Direct link to accessibilitystate" title="Direct link to accessibilitystate"></a></h3>
61<p>Tells the screen reader to treat the currently focused on element as being in a specific state.</p>
62<p>You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. <code>{selected: true, disabled: true}</code>.</p>
63<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/accessibility#accessibilitystate>AccessibilityState</a></table>
64<hr>
65<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityactions><code>accessibilityActions</code><a href=#accessibilityactions class=hash-link aria-label="Direct link to accessibilityactions" title="Direct link to accessibilityactions"></a></h3>
66<p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The <code>accessibilityActions</code> property should contain a list of action objects. Each action object should contain the field name and label.</p>
67<p>See the <a href=/docs/accessibility#accessibility-actions>Accessibility guide</a> for more information.</p>
68<table><thead><tr><th>Type<th>Required<tbody><tr><td>array<td>No</table>
69<hr>
70<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onaccessibilityaction><code>onAccessibilityAction</code><a href=#onaccessibilityaction class=hash-link aria-label="Direct link to onaccessibilityaction" title="Direct link to onaccessibilityaction"></a></h3>
71<p>Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.</p>
72<p>See the <a href=/docs/accessibility#accessibility-actions>Accessibility guide</a> for more information.</p>
73<table><thead><tr><th>Type<th>Required<tbody><tr><td>function<td>No</table>
74<hr>
75<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessible><code>accessible</code><a href=#accessible class=hash-link aria-label="Direct link to accessible" title="Direct link to accessible"></a></h3>
76<p>When set to <code>true</code>, indicates that the view is an accessibility element.</p>
77<p>See the <a href=/docs/accessibility#accessible-ios-android>Accessibility guide</a> for more information.</p>
78<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>true</code></table>
79<hr>
80<h3 class="anchor anchorWithStickyNavbar_JmGV" id=adjustsfontsizetofit><code>adjustsFontSizeToFit</code><a href=#adjustsfontsizetofit class=hash-link aria-label="Direct link to adjustsfontsizetofit" title="Direct link to adjustsfontsizetofit"></a></h3>
81<p>Specifies whether fonts should be scaled down automatically to fit given style constraints.</p>
82<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table>
83<hr>
84<h3 class="anchor anchorWithStickyNavbar_JmGV" id=allowfontscaling><code>allowFontScaling</code><a href=#allowfontscaling class=hash-link aria-label="Direct link to allowfontscaling" title="Direct link to allowfontscaling"></a></h3>
85<p>Specifies whether fonts should scale to respect Text Size accessibility settings.</p>
86<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>true</code></table>
87<hr>
88<h3 class="anchor anchorWithStickyNavbar_JmGV" id=android_hyphenationfrequency-android><code>android_hyphenationFrequency</code> <div class="label android">Android</div><a href=#android_hyphenationfrequency-android class=hash-link aria-label="Direct link to android_hyphenationfrequency-android" title="Direct link to android_hyphenationfrequency-android"></a></h3>
89<p>Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.</p>
90<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'none'</code>, <code>'normal'</code>,<code>'full'</code>)<td><code>'none'</code></table>
91<hr>
92<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-busy><code>aria-busy</code><a href=#aria-busy class=hash-link aria-label="Direct link to aria-busy" title="Direct link to aria-busy"></a></h3>
93<p>Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.</p>
94<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table>
95<hr>
96<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-checked><code>aria-checked</code><a href=#aria-checked class=hash-link aria-label="Direct link to aria-checked" title="Direct link to aria-checked"></a></h3>
97<p>Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.</p>
98<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean, 'mixed'<td>false</table>
99<hr>
100<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-disabled><code>aria-disabled</code><a href=#aria-disabled class=hash-link aria-label="Direct link to aria-disabled" title="Direct link to aria-disabled"></a></h3>
101<p>Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.</p>
102<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table>
103<hr>
104<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-expanded><code>aria-expanded</code><a href=#aria-expanded class=hash-link aria-label="Direct link to aria-expanded" title="Direct link to aria-expanded"></a></h3>
105<p>Indicates whether an expandable element is currently expanded or collapsed.</p>
106<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table>
107<hr>
108<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-label><code>aria-label</code><a href=#aria-label class=hash-link aria-label="Direct link to aria-label" title="Direct link to aria-label"></a></h3>
109<p>Defines a string value that labels an interactive element.</p>
110<table><thead><tr><th>Type<tbody><tr><td>string</table>
111<hr>
112<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-selected><code>aria-selected</code><a href=#aria-selected class=hash-link aria-label="Direct link to aria-selected" title="Direct link to aria-selected"></a></h3>
113<p>Indicates whether a selectable element is currently selected or not.</p>
114<table><thead><tr><th>Type<tbody><tr><td>boolean</table>
115<h3 class="anchor anchorWithStickyNavbar_JmGV" id=datadetectortype-android><code>dataDetectorType</code> <div class="label android">Android</div><a href=#datadetectortype-android class=hash-link aria-label="Direct link to datadetectortype-android" title="Direct link to datadetectortype-android"></a></h3>
116<p>Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.</p>
117<p>You can provide only one type.</p>
118<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'phoneNumber'</code>, <code>'link'</code>, <code>'email'</code>, <code>'none'</code>, <code>'all'</code>)<td><code>'none'</code></table>
119<hr>
120<h3 class="anchor anchorWithStickyNavbar_JmGV" id=disabled-android><code>disabled</code> <div class="label android">Android</div><a href=#disabled-android class=hash-link aria-label="Direct link to disabled-android" title="Direct link to disabled-android"></a></h3>
121<p>Specifies the disabled state of the text view for testing purposes.</p>
122<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table>
123<hr>
124<h3 class="anchor anchorWithStickyNavbar_JmGV" id=dynamictyperamp-ios><code>dynamicTypeRamp</code> <div class="label ios">iOS</div><a href=#dynamictyperamp-ios class=hash-link aria-label="Direct link to dynamictyperamp-ios" title="Direct link to dynamictyperamp-ios"></a></h3>
125<p>The <a href=https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically target=_blank rel="noopener noreferrer">Dynamic Type</a> ramp to apply to this element on iOS.</p>
126<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'caption2'</code>, <code>'caption1'</code>, <code>'footnote'</code>, <code>'subheadline'</code>, <code>'callout'</code>, <code>'body'</code>, <code>'headline'</code>, <code>'title3'</code>, <code>'title2'</code>, <code>'title1'</code>, <code>'largeTitle'</code>)<td><code>'body'</code></table>
127<hr>
128<h3 class="anchor anchorWithStickyNavbar_JmGV" id=ellipsizemode><code>ellipsizeMode</code><a href=#ellipsizemode class=hash-link aria-label="Direct link to ellipsizemode" title="Direct link to ellipsizemode"></a></h3>
129<p>When <code>numberOfLines</code> is set, this prop defines how the text will be truncated. <code>numberOfLines</code> must be set in conjunction with this prop.</p>
130<p>This can be one of the following values:</p>
131<ul>
132<li><code>head</code> - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"</li>
133<li><code>middle</code> - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"</li>
134<li><code>tail</code> - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."</li>
135<li><code>clip</code> - Lines are not drawn past the edge of the text container.</li>
136</ul>
137<blockquote>
138<p>On Android, when <code>numberOfLines</code> is set to a value higher than <code>1</code>, only <code>tail</code> value will work correctly.</p>
139</blockquote>
140<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'head'</code>, <code>'middle'</code>, <code>'tail'</code>, <code>'clip'</code>)<td><code>tail</code></table>
141<hr>
142<h3 class="anchor anchorWithStickyNavbar_JmGV" id=id><code>id</code><a href=#id class=hash-link aria-label="Direct link to id" title="Direct link to id"></a></h3>
143<p>Used to locate this view from native code. Has precedence over <code>nativeID</code> prop.</p>
144<table><thead><tr><th>Type<tbody><tr><td>string</table>
145<hr>
146<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maxfontsizemultiplier><code>maxFontSizeMultiplier</code><a href=#maxfontsizemultiplier class=hash-link aria-label="Direct link to maxfontsizemultiplier" title="Direct link to maxfontsizemultiplier"></a></h3>
147<p>Specifies the largest possible scale a font can reach when <code>allowFontScaling</code> is enabled. Possible values:</p>
148<ul>
149<li><code>null/undefined</code>: inherit from the parent node or the global default (0)</li>
150<li><code>0</code>: no max, ignore parent/global default</li>
151<li><code>>= 1</code>: sets the <code>maxFontSizeMultiplier</code> of this node to this value</li>
152</ul>
153<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>undefined</code></table>
154<hr>
155<h3 class="anchor anchorWithStickyNavbar_JmGV" id=minimumfontscale-ios><code>minimumFontScale</code> <div class="label ios">iOS</div><a href=#minimumfontscale-ios class=hash-link aria-label="Direct link to minimumfontscale-ios" title="Direct link to minimumfontscale-ios"></a></h3>
156<p>Specifies the smallest possible scale a font can reach when <code>adjustsFontSizeToFit</code> is enabled. (values 0.01-1.0).</p>
157<table><thead><tr><th>Type<tbody><tr><td>number</table>
158<hr>
159<h3 class="anchor anchorWithStickyNavbar_JmGV" id=nativeid><code>nativeID</code><a href=#nativeid class=hash-link aria-label="Direct link to nativeid" title="Direct link to nativeid"></a></h3>
160<p>Used to locate this view from native code.</p>
161<table><thead><tr><th>Type<tbody><tr><td>string</table>
162<hr>
163<h3 class="anchor anchorWithStickyNavbar_JmGV" id=numberoflines><code>numberOfLines</code><a href=#numberoflines class=hash-link aria-label="Direct link to numberoflines" title="Direct link to numberoflines"></a></h3>
164<p>Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to <code>0</code> will result in unsetting this value, which means that no lines restriction will be applied.</p>
165<p>This prop is commonly used with <code>ellipsizeMode</code>.</p>
166<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>0</code></table>
167<hr>
168<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onlayout><code>onLayout</code><a href=#onlayout class=hash-link aria-label="Direct link to onlayout" title="Direct link to onlayout"></a></h3>
169<p>Invoked on mount and on layout changes.</p>
170<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/layoutevent>LayoutEvent</a>}) => void</code></table>
171<hr>
172<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onlongpress><code>onLongPress</code><a href=#onlongpress class=hash-link aria-label="Direct link to onlongpress" title="Direct link to onlongpress"></a></h3>
173<p>This function is called on long press.</p>
174<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
175<hr>
176<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onmoveshouldsetresponder><code>onMoveShouldSetResponder</code><a href=#onmoveshouldsetresponder class=hash-link aria-label="Direct link to onmoveshouldsetresponder" title="Direct link to onmoveshouldsetresponder"></a></h3>
177<p>Does this view want to "claim" touch responsiveness? This is called for every touch move on the <code>View</code> when it is not the responder.</p>
178<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => boolean</code></table>
179<hr>
180<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onpress><code>onPress</code><a href=#onpress class=hash-link aria-label="Direct link to onpress" title="Direct link to onpress"></a></h3>
181<p>Function called on user press, triggered after <code>onPressOut</code>.</p>
182<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
183<hr>
184<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onpressin><code>onPressIn</code><a href=#onpressin class=hash-link aria-label="Direct link to onpressin" title="Direct link to onpressin"></a></h3>
185<p>Called immediately when a touch is engaged, before <code>onPressOut</code> and <code>onPress</code>.</p>
186<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
187<hr>
188<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onpressout><code>onPressOut</code><a href=#onpressout class=hash-link aria-label="Direct link to onpressout" title="Direct link to onpressout"></a></h3>
189<p>Called when a touch is released.</p>
190<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
191<hr>
192<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onrespondergrant><code>onResponderGrant</code><a href=#onrespondergrant class=hash-link aria-label="Direct link to onrespondergrant" title="Direct link to onrespondergrant"></a></h3>
193<p>The View is now responding to touch events. This is the time to highlight and show the user what is happening.</p>
194<p>On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.</p>
195<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void ｜ boolean</code></table>
196<hr>
197<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onrespondermove><code>onResponderMove</code><a href=#onrespondermove class=hash-link aria-label="Direct link to onrespondermove" title="Direct link to onrespondermove"></a></h3>
198<p>The user is moving their finger.</p>
199<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
200<hr>
201<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onresponderrelease><code>onResponderRelease</code><a href=#onresponderrelease class=hash-link aria-label="Direct link to onresponderrelease" title="Direct link to onresponderrelease"></a></h3>
202<p>Fired at the end of the touch.</p>
203<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
204<hr>
205<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onresponderterminate><code>onResponderTerminate</code><a href=#onresponderterminate class=hash-link aria-label="Direct link to onresponderterminate" title="Direct link to onresponderterminate"></a></h3>
206<p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to <code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)</p>
207<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table>
208<hr>
209<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onresponderterminationrequest><code>onResponderTerminationRequest</code><a href=#onresponderterminationrequest class=hash-link aria-label="Direct link to onresponderterminationrequest" title="Direct link to onresponderterminationrequest"></a></h3>
210<p>Some other <code>View</code> wants to become a responder and is asking this <code>View</code> to release its responder. Returning <code>true</code> allows its release.</p>
211<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => boolean</code></table>
212<hr>
213<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onstartshouldsetrespondercapture><code>onStartShouldSetResponderCapture</code><a href=#onstartshouldsetrespondercapture class=hash-link aria-label="Direct link to onstartshouldsetrespondercapture" title="Direct link to onstartshouldsetrespondercapture"></a></h3>
214<p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming a responder on a touch start, it should have this handler which returns <code>true</code>.</p>
215<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => boolean</code></table>
216<hr>
217<h3 class="anchor anchorWithStickyNavbar_JmGV" id=ontextlayout><code>onTextLayout</code><a href=#ontextlayout class=hash-link aria-label="Direct link to ontextlayout" title="Direct link to ontextlayout"></a></h3>
218<p>Invoked on Text layout change.</p>
219<table><thead><tr><th>Type<tbody><tr><td>(<a href=/docs/text#textlayoutevent><code>TextLayoutEvent</code></a>) => mixed</table>
220<hr>
221<h3 class="anchor anchorWithStickyNavbar_JmGV" id=pressretentionoffset><code>pressRetentionOffset</code><a href=#pressretentionoffset class=hash-link aria-label="Direct link to pressretentionoffset" title="Direct link to pressretentionoffset"></a></h3>
222<p>When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.</p>
223<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/rect>Rect</a>, number</table>
224<hr>
225<h3 class="anchor anchorWithStickyNavbar_JmGV" id=role><code>role</code><a href=#role class=hash-link aria-label="Direct link to role" title="Direct link to role"></a></h3>
226<p><code>role</code> communicates the purpose of a component to the user of an assistive technology. Has precedence over the <a href=/docs/text#accessibilityrole><code>accessibilityRole</code></a> prop.</p>
227<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/accessibility#role>Role</a></table>
228<hr>
229<h3 class="anchor anchorWithStickyNavbar_JmGV" id=selectable><code>selectable</code><a href=#selectable class=hash-link aria-label="Direct link to selectable" title="Direct link to selectable"></a></h3>
230<p>Lets the user select text, to use the native copy and paste functionality.</p>
231<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table>
232<hr>
233<h3 class="anchor anchorWithStickyNavbar_JmGV" id=selectioncolor-android><code>selectionColor</code> <div class="label android">Android</div><a href=#selectioncolor-android class=hash-link aria-label="Direct link to selectioncolor-android" title="Direct link to selectioncolor-android"></a></h3>
234<p>The highlight color of the text.</p>
235<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
236<hr>
237<h3 class="anchor anchorWithStickyNavbar_JmGV" id=style><code>style</code><a href=#style class=hash-link aria-label="Direct link to style" title="Direct link to style"></a></h3>
238<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/text-style-props>Text Style</a>, <a href=/docs/view-style-props>View Style Props</a></table>
239<hr>
240<h3 class="anchor anchorWithStickyNavbar_JmGV" id=suppresshighlighting-ios><code>suppressHighlighting</code> <div class="label ios">iOS</div><a href=#suppresshighlighting-ios class=hash-link aria-label="Direct link to suppresshighlighting-ios" title="Direct link to suppresshighlighting-ios"></a></h3>
241<p>When <code>true</code>, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.</p>
242<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table>
243<hr>
244<h3 class="anchor anchorWithStickyNavbar_JmGV" id=testid><code>testID</code><a href=#testid class=hash-link aria-label="Direct link to testid" title="Direct link to testid"></a></h3>
245<p>Used to locate this view in end-to-end tests.</p>
246<table><thead><tr><th>Type<tbody><tr><td>string</table>
247<hr>
248<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textbreakstrategy-android><code>textBreakStrategy</code> <div class="label android">Android</div><a href=#textbreakstrategy-android class=hash-link aria-label="Direct link to textbreakstrategy-android" title="Direct link to textbreakstrategy-android"></a></h3>
249<p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>.</p>
250<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'simple'</code>, <code>'highQuality'</code>, <code>'balanced'</code>)<td><code>highQuality</code></table>
251<hr>
252<h3 class="anchor anchorWithStickyNavbar_JmGV" id=linebreakstrategyios-ios><code>lineBreakStrategyIOS</code> <div class="label ios">iOS</div><a href=#linebreakstrategyios-ios class=hash-link aria-label="Direct link to linebreakstrategyios-ios" title="Direct link to linebreakstrategyios-ios"></a></h3>
253<p>Set line break strategy on iOS 14+. Possible values are <code>none</code>, <code>standard</code>, <code>hangul-word</code> and <code>push-out</code>.</p>
254<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'none'</code>, <code>'standard'</code>, <code>'hangul-word'</code>, <code>'push-out'</code>)<td><code>'none'</code></table>
255<h2 class="anchor anchorWithStickyNavbar_JmGV" id=type-definitions>Type Definitions<a href=#type-definitions class=hash-link aria-label="Direct link to Type Definitions" title="Direct link to Type Definitions"></a></h2>
256<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textlayout>TextLayout<a href=#textlayout class=hash-link aria-label="Direct link to TextLayout" title="Direct link to TextLayout"></a></h3>
257<p><code>TextLayout</code> object is a part of <a href=/docs/text#textlayoutevent><code>TextLayoutEvent</code></a> callback and contains the measurement data for <code>Text</code> line.</p>
258<h4 class="anchor anchorWithStickyNavbar_JmGV" id=example>Example<a href=#example class=hash-link aria-label="Direct link to Example" title="Direct link to Example"></a></h4>
259<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>capHeight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>10.496</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>ascender</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>14.624</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>descender</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>4</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>width</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>28.224</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>height</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>18.624</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>xHeight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>6.048</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>x</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>y</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div>
260<h4 class="anchor anchorWithStickyNavbar_JmGV" id=properties>Properties<a href=#properties class=hash-link aria-label="Direct link to Properties" title="Direct link to Properties"></a></h4>
261<table><thead><tr><th>Name<th>Type<th>Optional<th>Description<tbody><tr><td>ascender<td>number<td>No<td>The line ascender height after the text layout changes.<tr><td>capHeight<td>number<td>No<td>Height of capital letter above the baseline.<tr><td>descender<td>number<td>No<td>The line descender height after the text layout changes.<tr><td>height<td>number<td>No<td>Height of the line after the text layout changes.<tr><td>width<td>number<td>No<td>Width of the line after the text layout changes.<tr><td>x<td>number<td>No<td>Line X coordinate inside the Text component.<tr><td>xHeight<td>number<td>No<td>Distance between the baseline and median of the line (corpus size).<tr><td>y<td>number<td>No<td>Line Y coordinate inside the Text component.</table>
262<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textlayoutevent>TextLayoutEvent<a href=#textlayoutevent class=hash-link aria-label="Direct link to TextLayoutEvent" title="Direct link to TextLayoutEvent"></a></h3>
263<p><code>TextLayoutEvent</code> object is returned in the callback as a result of a component layout change. It contains a key called <code>lines</code> with a value which is an array containing <a href=/docs/text#textlayout><code>TextLayout</code></a> object corresponded to every rendered text line.</p>
264<h4 class="anchor anchorWithStickyNavbar_JmGV" id=example-1>Example<a href=#example-1 class=hash-link aria-label="Direct link to Example" title="Direct link to Example"></a></h4>
265<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>lines</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">TextLayout</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">TextLayout</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// ...</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>target</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1127</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div>
266<h4 class="anchor anchorWithStickyNavbar_JmGV" id=properties-1>Properties<a href=#properties-1 class=hash-link aria-label="Direct link to Properties" title="Direct link to Properties"></a></h4>
267<table><thead><tr><th>Name<th>Type<th>Optional<th>Description<tbody><tr><td>lines<td>array of <a href=/docs/text#textlayout>TextLayout</a>s<td>No<td>Provides the TextLayout data for every rendered line.<tr><td>target<td>number<td>No<td>The node id of the element.</table></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/text.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/text.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/switch><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Switch</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/textinput><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>TextInput</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#nested-text class="table-of-contents__link toc-highlight">Nested text</a><li><a href=#containers class="table-of-contents__link toc-highlight">Containers</a><li><a href=#limited-style-inheritance class="table-of-contents__link toc-highlight">Limited Style Inheritance</a><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#accessibilityhint class="table-of-contents__link toc-highlight"><code>accessibilityHint</code></a><li><a href=#accessibilitylanguage-ios class="table-of-contents__link toc-highlight"><code>accessibilityLanguage</code> <div class="label ios">iOS</div></a><li><a href=#accessibilitylabel class="table-of-contents__link toc-highlight"><code>accessibilityLabel</code></a><li><a href=#accessibilityrole class="table-of-contents__link toc-highlight"><code>accessibilityRole</code></a><li><a href=#accessibilitystate class="table-of-contents__link toc-highlight"><code>accessibilityState</code></a><li><a href=#accessibilityactions class="table-of-contents__link toc-highlight"><code>accessibilityActions</code></a><li><a href=#onaccessibilityaction class="table-of-contents__link toc-highlight"><code>onAccessibilityAction</code></a><li><a href=#accessible class="table-of-contents__link toc-highlight"><code>accessible</code></a><li><a href=#adjustsfontsizetofit class="table-of-contents__link toc-highlight"><code>adjustsFontSizeToFit</code></a><li><a href=#allowfontscaling class="table-of-contents__link toc-highlight"><code>allowFontScaling</code></a><li><a href=#android_hyphenationfrequency-android class="table-of-contents__link toc-highlight"><code>android_hyphenationFrequency</code> <div class="label android">Android</div></a><li><a href=#aria-busy class="table-of-contents__link toc-highlight"><code>aria-busy</code></a><li><a href=#aria-checked class="table-of-contents__link toc-highlight"><code>aria-checked</code></a><li><a href=#aria-disabled class="table-of-contents__link toc-highlight"><code>aria-disabled</code></a><li><a href=#aria-expanded class="table-of-contents__link toc-highlight"><code>aria-expanded</code></a><li><a href=#aria-label class="table-of-contents__link toc-highlight"><code>aria-label</code></a><li><a href=#aria-selected class="table-of-contents__link toc-highlight"><code>aria-selected</code></a><li><a href=#datadetectortype-android class="table-of-contents__link toc-highlight"><code>dataDetectorType</code> <div class="label android">Android</div></a><li><a href=#disabled-android class="table-of-contents__link toc-highlight"><code>disabled</code> <div class="label android">Android</div></a><li><a href=#dynamictyperamp-ios class="table-of-contents__link toc-highlight"><code>dynamicTypeRamp</code> <div class="label ios">iOS</div></a><li><a href=#ellipsizemode class="table-of-contents__link toc-highlight"><code>ellipsizeMode</code></a><li><a href=#id class="table-of-contents__link toc-highlight"><code>id</code></a><li><a href=#maxfontsizemultiplier class="table-of-contents__link toc-highlight"><code>maxFontSizeMultiplier</code></a><li><a href=#minimumfontscale-ios class="table-of-contents__link toc-highlight"><code>minimumFontScale</code> <div class="label ios">iOS</div></a><li><a href=#nativeid class="table-of-contents__link toc-highlight"><code>nativeID</code></a><li><a href=#numberoflines class="table-of-contents__link toc-highlight"><code>numberOfLines</code></a><li><a href=#onlayout class="table-of-contents__link toc-highlight"><code>onLayout</code></a><li><a href=#onlongpress class="table-of-contents__link toc-highlight"><code>onLongPress</code></a><li><a href=#onmoveshouldsetresponder class="table-of-contents__link toc-highlight"><code>onMoveShouldSetResponder</code></a><li><a href=#onpress class="table-of-contents__link toc-highlight"><code>onPress</code></a><li><a href=#onpressin class="table-of-contents__link toc-highlight"><code>onPressIn</code></a><li><a href=#onpressout class="table-of-contents__link toc-highlight"><code>onPressOut</code></a><li><a href=#onrespondergrant class="table-of-contents__link toc-highlight"><code>onResponderGrant</code></a><li><a href=#onrespondermove class="table-of-contents__link toc-highlight"><code>onResponderMove</code></a><li><a href=#onresponderrelease class="table-of-contents__link toc-highlight"><code>onResponderRelease</code></a><li><a href=#onresponderterminate class="table-of-contents__link toc-highlight"><code>onResponderTerminate</code></a><li><a href=#onresponderterminationrequest class="table-of-contents__link toc-highlight"><code>onResponderTerminationRequest</code></a><li><a href=#onstartshouldsetrespondercapture class="table-of-contents__link toc-highlight"><code>onStartShouldSetResponderCapture</code></a><li><a href=#ontextlayout class="table-of-contents__link toc-highlight"><code>onTextLayout</code></a><li><a href=#pressretentionoffset class="table-of-contents__link toc-highlight"><code>pressRetentionOffset</code></a><li><a href=#role class="table-of-contents__link toc-highlight"><code>role</code></a><li><a href=#selectable class="table-of-contents__link toc-highlight"><code>selectable</code></a><li><a href=#selectioncolor-android class="table-of-contents__link toc-highlight"><code>selectionColor</code> <div class="label android">Android</div></a><li><a href=#style class="table-of-contents__link toc-highlight"><code>style</code></a><li><a href=#suppresshighlighting-ios class="table-of-contents__link toc-highlight"><code>suppressHighlighting</code> <div class="label ios">iOS</div></a><li><a href=#testid class="table-of-contents__link toc-highlight"><code>testID</code></a><li><a href=#textbreakstrategy-android class="table-of-contents__link toc-highlight"><code>textBreakStrategy</code> <div class="label android">Android</div></a><li><a href=#linebreakstrategyios-ios class="table-of-contents__link toc-highlight"><code>lineBreakStrategyIOS</code> <div class="label ios">iOS</div></a></ul><li><a href=#type-definitions class="table-of-contents__link toc-highlight">Type Definitions</a><ul><li><a href=#textlayout class="table-of-contents__link toc-highlight">TextLayout</a><li><a href=#textlayoutevent class="table-of-contents__link toc-highlight">TextLayoutEvent</a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>