kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_text-style-props.html
at main 76 kB view raw
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-style-props" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Text Style Props · 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-style-props><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 Style Props · React Native"><meta data-rh=true name=description content=Example><meta data-rh=true property=og:description content=Example><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/text-style-props><link data-rh=true rel=alternate href=https://reactnative.dev/docs/text-style-props hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/text-style-props 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-style-props>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/text-style-props>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/text-style-props>0.79</a><li><a class=dropdown__link href=/docs/0.78/text-style-props>0.78</a><li><a class=dropdown__link href=/docs/0.77/text-style-props>0.77</a><li><a class=dropdown__link href=/docs/0.76/text-style-props>0.76</a><li><a class=dropdown__link href=/docs/0.75/text-style-props>0.75</a><li><a class=dropdown__link href=/docs/0.74/text-style-props>0.74</a><li><a class=dropdown__link href=/docs/0.73/text-style-props>0.73</a><li><a class=dropdown__link href=/docs/0.72/text-style-props>0.72</a><li><a class=dropdown__link href=/docs/0.71/text-style-props>0.71</a><li><a class=dropdown__link href=/docs/0.70/text-style-props>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 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/components-and-apis>Core Components</a></div><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/image-style-props>Props</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/image-style-props>Image Style Props</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/layout-props>Layout Props</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/shadow-props>Shadow Props</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-style-props>Text Style Props</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-style-props>View Style Props</a></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/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 Style Props</h1></header><h3 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></h3> 5<!-- --> 6<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">JavaScript</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class=snack-player data-snack-name=TextStyleProps data-snack-description="Example usage" data-snack-files="%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20FlatList%2C%5Cn%20%20Platform%2C%5Cn%20%20ScrollView%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Switch%2C%5Cn%20%20Text%2C%5Cn%20%20TouchableWithoutFeedback%2C%5Cn%20%20View%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20Slider%20from%20'%40react-native-community%2Fslider'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20fontStyles%20%3D%20%5B'normal'%2C%20'italic'%5D%3B%5Cnconst%20fontVariants%20%3D%20%5B%5Cn%20%20undefined%2C%5Cn%20%20'small-caps'%2C%5Cn%20%20'oldstyle-nums'%2C%5Cn%20%20'lining-nums'%2C%5Cn%20%20'tabular-nums'%2C%5Cn%20%20'proportional-nums'%2C%5Cn%5D%3B%5Cnconst%20fontWeights%20%3D%20%5B%5Cn%20%20'normal'%2C%5Cn%20%20'bold'%2C%5Cn%20%20'100'%2C%5Cn%20%20'200'%2C%5Cn%20%20'300'%2C%5Cn%20%20'400'%2C%5Cn%20%20'500'%2C%5Cn%20%20'600'%2C%5Cn%20%20'700'%2C%5Cn%20%20'800'%2C%5Cn%20%20'900'%2C%5Cn%5D%3B%5Cnconst%20textAlignments%20%3D%20%5B'auto'%2C%20'left'%2C%20'right'%2C%20'center'%2C%20'justify'%5D%3B%5Cnconst%20textDecorationLines%20%3D%20%5B%5Cn%20%20'none'%2C%5Cn%20%20'underline'%2C%5Cn%20%20'line-through'%2C%5Cn%20%20'underline%20line-through'%2C%5Cn%5D%3B%5Cnconst%20textDecorationStyles%20%3D%20%5B'solid'%2C%20'double'%2C%20'dotted'%2C%20'dashed'%5D%3B%5Cnconst%20textTransformations%20%3D%20%5B'none'%2C%20'uppercase'%2C%20'lowercase'%2C%20'capitalize'%5D%3B%5Cnconst%20textAlignmentsVertical%20%3D%20%5B'auto'%2C%20'top'%2C%20'bottom'%2C%20'center'%5D%3B%5Cnconst%20writingDirections%20%3D%20%5B'auto'%2C%20'ltr'%2C%20'rtl'%5D%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BfontSize%2C%20setFontSize%5D%20%3D%20useState(20)%3B%5Cn%20%20const%20%5BfontStyleIdx%2C%20setFontStyleIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BfontWeightIdx%2C%20setFontWeightIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BlineHeight%2C%20setLineHeight%5D%20%3D%20useState(24)%3B%5Cn%20%20const%20%5BtextAlignIdx%2C%20setTextAlignIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextDecorationLineIdx%2C%20setTextDecorationLineIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BincludeFontPadding%2C%20setIncludeFontPadding%5D%20%3D%20useState(false)%3B%5Cn%20%20const%20%5BtextVerticalAlignIdx%2C%20setTextVerticalAlignIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BfontVariantIdx%2C%20setFontVariantIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BletterSpacing%2C%20setLetterSpacing%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextDecorationStyleIdx%2C%20setTextDecorationStyleIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextTransformIdx%2C%20setTextTransformIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BwritingDirectionIdx%2C%20setWritingDirectionIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextShadowRadius%2C%20setTextShadowRadius%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextShadowOffset%2C%20setTextShadowOffset%5D%20%3D%20useState(%7B%5Cn%20%20%20%20height%3A%200%2C%5Cn%20%20%20%20width%3A%200%2C%5Cn%20%20%7D)%3B%5Cn%5Cn%20%20const%20%5B%2C%20...validFontVariants%5D%20%3D%20fontVariants%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%3CView%20style%3D%7Bstyles.pargraphWrapper%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.paragraph%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontSize%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontStyle%3A%20fontStyles%5BfontStyleIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontWeight%3A%20fontWeights%5BfontWeightIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lineHeight%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textAlign%3A%20textAlignments%5BtextAlignIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textDecorationLine%3A%20textDecorationLines%5BtextDecorationLineIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textTransform%3A%20textTransformations%5BtextTransformIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textAlignVertical%3A%20textAlignmentsVertical%5BtextVerticalAlignIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontVariant%3A%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontVariantIdx%20%3D%3D%3D%200%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3F%20undefined%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3A%20%5BvalidFontVariants%5BfontVariantIdx%20-%201%5D%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20letterSpacing%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20includeFontPadding%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textDecorationStyle%3A%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textDecorationStyles%5BtextDecorationStyleIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20writingDirection%3A%20writingDirections%5BwritingDirectionIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textShadowOffset%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textShadowRadius%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20Lorem%20Ipsum%20is%20simply%20dummy%20text%20of%20the%20printing%20and%20typesetting%5Cn%20%20%20%20%20%20%20%20%20%20%20%20industry.%20112%20Likes%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CScrollView%20style%3D%7B%7Bpadding%3A%2012%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%3ECommon%20platform%20properties%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Shadow%20Offset%20-%20Height%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BtextShadowOffset.height%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B-40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7Bval%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setTextShadowOffset(prev%20%3D%3E%20(%7B...prev%2C%20height%3A%20val%7D))%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Shadow%20Offset%20-%20Width%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BtextShadowOffset.width%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B-40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7Bval%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setTextShadowOffset(prev%20%3D%3E%20(%7B...prev%2C%20width%3A%20val%7D))%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Size%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BfontSize%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetFontSize%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Style%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BfontStyles%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BfontStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetFontStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Weight%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BfontWeights%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BfontWeightIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetFontWeightIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Line%20Height%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BlineHeight%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B10%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B50%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetLineHeight%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Align%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextAlignments%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Decoration%20Line%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextDecorationLines%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextDecorationLineIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextDecorationLineIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Shadow%20Radius%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BtextShadowRadius%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetTextShadowRadius%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Variant%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BfontVariants%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BfontVariantIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetFontVariantIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Letter%20Spacing%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20step%3D%7B0.1%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BletterSpacing%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetLetterSpacing%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Transform%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextTransformations%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextTransformIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextTransformIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'android'%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.platformContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.platformContainerTitle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Android%20only%20properties%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Vertical%20Align%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextAlignmentsVertical%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextVerticalAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextVerticalAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSwitch%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Include%20Font%20Padding%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetIncludeFontPadding%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BincludeFontPadding%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.platformContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.platformContainerTitle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iOS%20only%20properties%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Decoration%20Style%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextDecorationStyles%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextDecorationStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextDecorationStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Writing%20Direction%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BwritingDirections%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BwritingDirectionIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetWritingDirectionIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FScrollView%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%20CustomSwitch%20%3D%20(%7Blabel%2C%20handleValueChange%2C%20value%7D)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3C%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Blabel%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'flex-start'%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CSwitch%5Cn%20%20%20%20%20%20%20%20%20%20trackColor%3D%7B%7Bfalse%3A%20'%23767577'%2C%20true%3A%20'%23DAA520'%7D%7D%5Cn%20%20%20%20%20%20%20%20%20%20thumbColor%3D%7Bvalue%20%3F%20'%23DAA520'%20%3A%20'%23f4f3f4'%7D%5Cn%20%20%20%20%20%20%20%20%20%20onValueChange%3D%7BhandleValueChange%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2F%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20CustomSlider%20%3D%20(%7B%5Cn%20%20label%2C%5Cn%20%20handleValueChange%2C%5Cn%20%20step%20%3D%201%2C%5Cn%20%20minimumValue%20%3D%200%2C%5Cn%20%20maximumValue%20%3D%2010%2C%5Cn%20%20value%2C%5Cn%7D)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3C%3E%5Cn%20%20%20%20%20%20%7Blabel%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7B%60%24%7Blabel%7D%20(%24%7Bvalue.toFixed(2)%7D)%60%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.wrapperHorizontal%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CSlider%5Cn%20%20%20%20%20%20%20%20%20%20thumbTintColor%3D%5C%22%2306bcee%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20minimumTrackTintColor%3D%5C%22%2364d7ffbb%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7BminimumValue%7D%5Cn%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7BmaximumValue%7D%5Cn%20%20%20%20%20%20%20%20%20%20step%3D%7Bstep%7D%5Cn%20%20%20%20%20%20%20%20%20%20onValueChange%3D%7BhandleValueChange%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2F%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20CustomPicker%20%3D%20(%7Blabel%2C%20data%2C%20currentIndex%2C%20onSelected%7D)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3C%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Blabel%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.wrapperHorizontal%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20%20%20bounces%5Cn%20%20%20%20%20%20%20%20%20%20horizontal%5Cn%20%20%20%20%20%20%20%20%20%20data%3D%7Bdata%7D%5Cn%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20String(item)%7D%5Cn%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%2C%20index%7D)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20const%20selected%20%3D%20index%20%3D%3D%3D%20currentIndex%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTouchableWithoutFeedback%20onPress%3D%7B()%20%3D%3E%20onSelected(index)%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.itemStyleHorizontal%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20selected%20%26%26%20styles.itemSelectedStyleHorizontal%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20selected%20%3F%20'black'%20%3A%20'grey'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontWeight%3A%20selected%20%3F%20'bold'%20%3A%20'normal'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Bitem%20%2B%20''%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTouchableWithoutFeedback%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2F%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%20pargraphWrapper%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'black'%2C%5Cn%20%20%7D%2C%5Cn%20%20paragraph%3A%20%7B%5Cn%20%20%20%20color%3A%20'%23fff'%2C%5Cn%20%20%20%20textDecorationColor%3A%20'yellow'%2C%5Cn%20%20%20%20textShadowColor%3A%20'red'%2C%5Cn%20%20%20%20textShadowRadius%3A%201%2C%5Cn%20%20%20%20padding%3A%2024%2C%5Cn%20%20%7D%2C%5Cn%20%20wrapperHorizontal%3A%20%7B%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20color%3A%20'black'%2C%5Cn%20%20%7D%2C%5Cn%20%20itemStyleHorizontal%3A%20%7B%5Cn%20%20%20%20marginRight%3A%2010%2C%5Cn%20%20%20%20height%3A%2050%2C%5Cn%20%20%20%20padding%3A%208%2C%5Cn%20%20%20%20borderWidth%3A%201%2C%5Cn%20%20%20%20borderColor%3A%20'grey'%2C%5Cn%20%20%20%20borderRadius%3A%208%2C%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20itemSelectedStyleHorizontal%3A%20%7B%5Cn%20%20%20%20borderWidth%3A%202%2C%5Cn%20%20%20%20borderColor%3A%20'%2306bcee'%2C%5Cn%20%20%7D%2C%5Cn%20%20platformContainer%3A%20%7B%5Cn%20%20%20%20marginTop%3A%208%2C%5Cn%20%20%20%20borderTopWidth%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20platformContainerTitle%3A%20%7B%5Cn%20%20%20%20marginTop%3A%208%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context,@react-native-community/slider data-snack-platform=web data-snack-supported-platforms=ios,android data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div><div role=tabpanel class=tabItem_wHwb><div class=snack-player data-snack-name=TextStyleProps 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%7B%5Cn%20%20FlatList%2C%5Cn%20%20Platform%2C%5Cn%20%20ScrollView%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Switch%2C%5Cn%20%20Text%2C%5Cn%20%20TouchableWithoutFeedback%2C%5Cn%20%20View%2C%5Cn%20%20TextStyle%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20Slider%20from%20'%40react-native-community%2Fslider'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BfontSize%2C%20setFontSize%5D%20%3D%20useState(20)%3B%5Cn%20%20const%20%5BfontStyleIdx%2C%20setFontStyleIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BfontWeightIdx%2C%20setFontWeightIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BlineHeight%2C%20setLineHeight%5D%20%3D%20useState(24)%3B%5Cn%20%20const%20%5BtextAlignIdx%2C%20setTextAlignIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextDecorationLineIdx%2C%20setTextDecorationLineIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BincludeFontPadding%2C%20setIncludeFontPadding%5D%20%3D%20useState(false)%3B%5Cn%20%20const%20%5BtextVerticalAlignIdx%2C%20setTextVerticalAlignIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BfontVariantIdx%2C%20setFontVariantIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BletterSpacing%2C%20setLetterSpacing%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextDecorationStyleIdx%2C%20setTextDecorationStyleIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextTransformIdx%2C%20setTextTransformIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BwritingDirectionIdx%2C%20setWritingDirectionIdx%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextShadowRadius%2C%20setTextShadowRadius%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BtextShadowOffset%2C%20setTextShadowOffset%5D%20%3D%20useState(%7B%5Cn%20%20%20%20height%3A%200%2C%5Cn%20%20%20%20width%3A%200%2C%5Cn%20%20%7D)%3B%5Cn%5Cn%20%20const%20%5B%2C%20...validFontVariants%5D%20%3D%20fontVariants%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%3CView%20style%3D%7Bstyles.pargraphWrapper%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.paragraph%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontSize%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontStyle%3A%20fontStyles%5BfontStyleIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontWeight%3A%20fontWeights%5BfontWeightIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lineHeight%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textAlign%3A%20textAlignments%5BtextAlignIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textDecorationLine%3A%20textDecorationLines%5BtextDecorationLineIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textTransform%3A%20textTransformations%5BtextTransformIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textAlignVertical%3A%20textAlignmentsVertical%5BtextVerticalAlignIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontVariant%3A%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontVariantIdx%20%3D%3D%3D%200%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3F%20undefined%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3A%20%5BvalidFontVariants%5BfontVariantIdx%20-%201%5D%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20letterSpacing%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20includeFontPadding%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textDecorationStyle%3A%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textDecorationStyles%5BtextDecorationStyleIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20writingDirection%3A%20writingDirections%5BwritingDirectionIdx%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textShadowOffset%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textShadowRadius%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20as%20TextStyle%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20Lorem%20Ipsum%20is%20simply%20dummy%20text%20of%20the%20printing%20and%20typesetting%5Cn%20%20%20%20%20%20%20%20%20%20%20%20industry.%20112%20Likes%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CScrollView%20style%3D%7B%7Bpadding%3A%2012%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%3ECommon%20platform%20properties%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Shadow%20Offset%20-%20Height%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BtextShadowOffset.height%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B-40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7B(val%3A%20number)%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setTextShadowOffset(prev%20%3D%3E%20(%7B...prev%2C%20height%3A%20val%7D))%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Shadow%20Offset%20-%20Width%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BtextShadowOffset.width%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B-40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7B(val%3A%20number)%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setTextShadowOffset(prev%20%3D%3E%20(%7B...prev%2C%20width%3A%20val%7D))%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Size%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BfontSize%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetFontSize%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Style%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BfontStyles%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BfontStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetFontStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Weight%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BfontWeights%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BfontWeightIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetFontWeightIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Line%20Height%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BlineHeight%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B10%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B50%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetLineHeight%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Align%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextAlignments%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Decoration%20Line%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextDecorationLines%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextDecorationLineIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextDecorationLineIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Shadow%20Radius%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BtextShadowRadius%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetTextShadowRadius%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Font%20Variant%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BfontVariants%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BfontVariantIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetFontVariantIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSlider%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Letter%20Spacing%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20step%3D%7B0.1%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BletterSpacing%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetLetterSpacing%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Transform%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextTransformations%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextTransformIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextTransformIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'android'%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.platformContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.platformContainerTitle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Android%20only%20properties%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Vertical%20Align%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextAlignmentsVertical%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextVerticalAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextVerticalAlignIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomSwitch%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Include%20Font%20Padding%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20handleValueChange%3D%7BsetIncludeFontPadding%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3D%7BincludeFontPadding%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.platformContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.platformContainerTitle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iOS%20only%20properties%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Text%20Decoration%20Style%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BtextDecorationStyles%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BtextDecorationStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetTextDecorationStyleIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CCustomPicker%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%5C%22Writing%20Direction%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%7BwritingDirections%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentIndex%3D%7BwritingDirectionIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSelected%3D%7BsetWritingDirectionIdx%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FScrollView%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%5Cntype%20CustomSwitchProps%20%3D%20%7B%5Cn%20%20label%3A%20string%3B%5Cn%20%20value%3A%20boolean%3B%5Cn%20%20handleValueChange%3A%20(value%3A%20boolean)%20%3D%3E%20void%3B%5Cn%7D%3B%5Cn%5Cnconst%20CustomSwitch%20%3D%20(%7Blabel%2C%20handleValueChange%2C%20value%7D%3A%20CustomSwitchProps)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3C%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Blabel%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'flex-start'%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CSwitch%5Cn%20%20%20%20%20%20%20%20%20%20trackColor%3D%7B%7Bfalse%3A%20'%23767577'%2C%20true%3A%20'%23DAA520'%7D%7D%5Cn%20%20%20%20%20%20%20%20%20%20thumbColor%3D%7Bvalue%20%3F%20'%23DAA520'%20%3A%20'%23f4f3f4'%7D%5Cn%20%20%20%20%20%20%20%20%20%20onValueChange%3D%7BhandleValueChange%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2F%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cntype%20CustomSliderProps%20%3D%20%7B%5Cn%20%20label%3A%20string%3B%5Cn%20%20value%3A%20number%3B%5Cn%20%20handleValueChange%3A%20(value%3A%20number)%20%3D%3E%20void%3B%5Cn%20%20step%3F%3A%20number%3B%5Cn%20%20minimumValue%3F%3A%20number%3B%5Cn%20%20maximumValue%3F%3A%20number%3B%5Cn%7D%3B%5Cn%5Cnconst%20CustomSlider%20%3D%20(%7B%5Cn%20%20label%2C%5Cn%20%20handleValueChange%2C%5Cn%20%20step%20%3D%201%2C%5Cn%20%20minimumValue%20%3D%200%2C%5Cn%20%20maximumValue%20%3D%2010%2C%5Cn%20%20value%2C%5Cn%7D%3A%20CustomSliderProps)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3C%3E%5Cn%20%20%20%20%20%20%7Blabel%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7B%60%24%7Blabel%7D%20(%24%7Bvalue.toFixed(2)%7D)%60%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.wrapperHorizontal%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CSlider%5Cn%20%20%20%20%20%20%20%20%20%20thumbTintColor%3D%5C%22%2306bcee%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20minimumTrackTintColor%3D%5C%22%2364d7ffbb%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7BminimumValue%7D%5Cn%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7BmaximumValue%7D%5Cn%20%20%20%20%20%20%20%20%20%20step%3D%7Bstep%7D%5Cn%20%20%20%20%20%20%20%20%20%20onValueChange%3D%7BhandleValueChange%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2F%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cntype%20CustomPickerProps%20%3D%20%7B%5Cn%20%20label%3A%20string%3B%5Cn%20%20data%3F%3A%20ArrayLike%3Cany%3E%20%7C%20null%3B%5Cn%20%20currentIndex%3A%20number%3B%5Cn%20%20onSelected%3A%20(index%3A%20number)%20%3D%3E%20void%3B%5Cn%7D%3B%5Cn%5Cnconst%20CustomPicker%20%3D%20(%7B%5Cn%20%20label%2C%5Cn%20%20data%2C%5Cn%20%20currentIndex%2C%5Cn%20%20onSelected%2C%5Cn%7D%3A%20CustomPickerProps)%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3C%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Blabel%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.wrapperHorizontal%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20%20%20horizontal%5Cn%20%20%20%20%20%20%20%20%20%20data%3D%7Bdata%7D%5Cn%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20String(item)%7D%5Cn%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%2C%20index%7D%3A%20%7Bitem%3A%20string%3B%20index%3A%20number%7D)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20const%20selected%20%3D%20index%20%3D%3D%3D%20currentIndex%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTouchableWithoutFeedback%20onPress%3D%7B()%20%3D%3E%20onSelected(index)%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.itemStyleHorizontal%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20selected%20%26%26%20styles.itemSelectedStyleHorizontal%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20selected%20%3F%20'black'%20%3A%20'grey'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontWeight%3A%20selected%20%3F%20'bold'%20%3A%20'normal'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Bitem%20%2B%20''%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTouchableWithoutFeedback%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2F%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20fontStyles%20%3D%20%5B'normal'%2C%20'italic'%5D%3B%5Cnconst%20fontVariants%20%3D%20%5B%5Cn%20%20undefined%2C%5Cn%20%20'small-caps'%2C%5Cn%20%20'oldstyle-nums'%2C%5Cn%20%20'lining-nums'%2C%5Cn%20%20'tabular-nums'%2C%5Cn%20%20'proportional-nums'%2C%5Cn%5D%3B%5Cnconst%20fontWeights%20%3D%20%5B%5Cn%20%20'normal'%2C%5Cn%20%20'bold'%2C%5Cn%20%20'100'%2C%5Cn%20%20'200'%2C%5Cn%20%20'300'%2C%5Cn%20%20'400'%2C%5Cn%20%20'500'%2C%5Cn%20%20'600'%2C%5Cn%20%20'700'%2C%5Cn%20%20'800'%2C%5Cn%20%20'900'%2C%5Cn%5D%3B%5Cnconst%20textAlignments%20%3D%20%5B'auto'%2C%20'left'%2C%20'right'%2C%20'center'%2C%20'justify'%5D%3B%5Cnconst%20textDecorationLines%20%3D%20%5B%5Cn%20%20'none'%2C%5Cn%20%20'underline'%2C%5Cn%20%20'line-through'%2C%5Cn%20%20'underline%20line-through'%2C%5Cn%5D%3B%5Cnconst%20textDecorationStyles%20%3D%20%5B'solid'%2C%20'double'%2C%20'dotted'%2C%20'dashed'%5D%3B%5Cnconst%20textTransformations%20%3D%20%5B'none'%2C%20'uppercase'%2C%20'lowercase'%2C%20'capitalize'%5D%3B%5Cnconst%20textAlignmentsVertical%20%3D%20%5B'auto'%2C%20'top'%2C%20'bottom'%2C%20'center'%5D%3B%5Cnconst%20writingDirections%20%3D%20%5B'auto'%2C%20'ltr'%2C%20'rtl'%5D%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%20pargraphWrapper%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'black'%2C%5Cn%20%20%7D%2C%5Cn%20%20paragraph%3A%20%7B%5Cn%20%20%20%20color%3A%20'%23fff'%2C%5Cn%20%20%20%20textDecorationColor%3A%20'yellow'%2C%5Cn%20%20%20%20textShadowColor%3A%20'red'%2C%5Cn%20%20%20%20textShadowRadius%3A%201%2C%5Cn%20%20%20%20padding%3A%2024%2C%5Cn%20%20%7D%2C%5Cn%20%20wrapperHorizontal%3A%20%7B%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20color%3A%20'black'%2C%5Cn%20%20%7D%2C%5Cn%20%20itemStyleHorizontal%3A%20%7B%5Cn%20%20%20%20marginRight%3A%2010%2C%5Cn%20%20%20%20height%3A%2050%2C%5Cn%20%20%20%20padding%3A%208%2C%5Cn%20%20%20%20borderWidth%3A%201%2C%5Cn%20%20%20%20borderColor%3A%20'grey'%2C%5Cn%20%20%20%20borderRadius%3A%208%2C%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20itemSelectedStyleHorizontal%3A%20%7B%5Cn%20%20%20%20borderWidth%3A%202%2C%5Cn%20%20%20%20borderColor%3A%20'%2306bcee'%2C%5Cn%20%20%7D%2C%5Cn%20%20platformContainer%3A%20%7B%5Cn%20%20%20%20marginTop%3A%208%2C%5Cn%20%20%20%20borderTopWidth%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20platformContainerTitle%3A%20%7B%5Cn%20%20%20%20marginTop%3A%208%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context,@react-native-community/slider data-snack-platform=web data-snack-supported-platforms=ios,android data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div></div></div> 7<h1>Reference</h1> 8<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> 9<h3 class="anchor anchorWithStickyNavbar_JmGV" id=color><code>color</code><a href=#color class=hash-link aria-label="Direct link to color" title="Direct link to color">​</a></h3> 10<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 11<hr> 12<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fontfamily><code>fontFamily</code><a href=#fontfamily class=hash-link aria-label="Direct link to fontfamily" title="Direct link to fontfamily">​</a></h3> 13<table><thead><tr><th>Type<tbody><tr><td>string</table> 14<hr> 15<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fontsize><code>fontSize</code><a href=#fontsize class=hash-link aria-label="Direct link to fontsize" title="Direct link to fontsize">​</a></h3> 16<table><thead><tr><th>Type<tbody><tr><td>number</table> 17<hr> 18<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fontstyle><code>fontStyle</code><a href=#fontstyle class=hash-link aria-label="Direct link to fontstyle" title="Direct link to fontstyle">​</a></h3> 19<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'normal'</code>, <code>'italic'</code>)</table> 20<hr> 21<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fontweight><code>fontWeight</code><a href=#fontweight class=hash-link aria-label="Direct link to fontweight" title="Direct link to fontweight">​</a></h3> 22<p>Specifies font weight. The values <code>'normal'</code> and <code>'bold'</code> are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.</p> 23<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'normal'</code>, <code>'bold'</code>, <code>'100'</code>, <code>'200'</code>, <code>'300'</code>, <code>'400'</code>, <code>'500'</code>, <code>'600'</code>, <code>'700'</code>, <code>'800'</code>, <code>'900'</code>) or number<td><code>'normal'</code></table> 24<hr> 25<h3 class="anchor anchorWithStickyNavbar_JmGV" id=includefontpadding-android><code>includeFontPadding</code> <div class="label android">Android</div><a href=#includefontpadding-android class=hash-link aria-label="Direct link to includefontpadding-android" title="Direct link to includefontpadding-android">​</a></h3> 26<p>Set to <code>false</code> to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set <code>textAlignVertical</code> to <code>center</code>.</p> 27<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 28<hr> 29<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fontvariant><code>fontVariant</code><a href=#fontvariant class=hash-link aria-label="Direct link to fontvariant" title="Direct link to fontvariant">​</a></h3> 30<p>Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. <code>'small-caps common-ligatures'</code>.</p> 31<table><thead><tr><th>Type<th>Default<tbody><tr><td>array of enum(<code>'small-caps'</code>, <code>'oldstyle-nums'</code>, <code>'lining-nums'</code>, <code>'tabular-nums'</code>, <code>'proportional-nums'</code>) or string<td><code>[]</code></table> 32<hr> 33<h3 class="anchor anchorWithStickyNavbar_JmGV" id=letterspacing><code>letterSpacing</code><a href=#letterspacing class=hash-link aria-label="Direct link to letterspacing" title="Direct link to letterspacing">​</a></h3> 34<p>Increase or decrease the spacing between characters. By default there is no extra letter spacing.</p> 35<table><thead><tr><th>Type<tbody><tr><td>number</table> 36<hr> 37<h3 class="anchor anchorWithStickyNavbar_JmGV" id=lineheight><code>lineHeight</code><a href=#lineheight class=hash-link aria-label="Direct link to lineheight" title="Direct link to lineheight">​</a></h3> 38<p>Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.</p> 39<table><thead><tr><th>Type<tbody><tr><td>number</table> 40<hr> 41<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textalign><code>textAlign</code><a href=#textalign class=hash-link aria-label="Direct link to textalign" title="Direct link to textalign">​</a></h3> 42<p>Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to <code>left</code> on lower Android versions.</p> 43<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'left'</code>, <code>'right'</code>, <code>'center'</code>, <code>'justify'</code>)<td><code>'auto'</code></table> 44<hr> 45<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textalignvertical-android><code>textAlignVertical</code> <div class="label android">Android</div><a href=#textalignvertical-android class=hash-link aria-label="Direct link to textalignvertical-android" title="Direct link to textalignvertical-android">​</a></h3> 46<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'top'</code>, <code>'bottom'</code>, <code>'center'</code>)<td><code>'auto'</code></table> 47<hr> 48<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textdecorationcolor-ios><code>textDecorationColor</code> <div class="label ios">iOS</div><a href=#textdecorationcolor-ios class=hash-link aria-label="Direct link to textdecorationcolor-ios" title="Direct link to textdecorationcolor-ios">​</a></h3> 49<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 50<hr> 51<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textdecorationline><code>textDecorationLine</code><a href=#textdecorationline class=hash-link aria-label="Direct link to textdecorationline" title="Direct link to textdecorationline">​</a></h3> 52<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'none'</code>, <code>'underline'</code>, <code>'line-through'</code>, <code>'underline line-through'</code>)<td><code>'none'</code></table> 53<hr> 54<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textdecorationstyle-ios><code>textDecorationStyle</code> <div class="label ios">iOS</div><a href=#textdecorationstyle-ios class=hash-link aria-label="Direct link to textdecorationstyle-ios" title="Direct link to textdecorationstyle-ios">​</a></h3> 55<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'solid'</code>, <code>'double'</code>, <code>'dotted'</code>, <code>'dashed'</code>)<td><code>'solid'</code></table> 56<hr> 57<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textshadowcolor><code>textShadowColor</code><a href=#textshadowcolor class=hash-link aria-label="Direct link to textshadowcolor" title="Direct link to textshadowcolor">​</a></h3> 58<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 59<hr> 60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textshadowoffset><code>textShadowOffset</code><a href=#textshadowoffset class=hash-link aria-label="Direct link to textshadowoffset" title="Direct link to textshadowoffset">​</a></h3> 61<table><thead><tr><th>Type<tbody><tr><td>object: <code>{width?: number, height?: number}</code></table> 62<hr> 63<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textshadowradius><code>textShadowRadius</code><a href=#textshadowradius class=hash-link aria-label="Direct link to textshadowradius" title="Direct link to textshadowradius">​</a></h3> 64<table><thead><tr><th>Type<tbody><tr><td>number</table> 65<hr> 66<h3 class="anchor anchorWithStickyNavbar_JmGV" id=texttransform><code>textTransform</code><a href=#texttransform class=hash-link aria-label="Direct link to texttransform" title="Direct link to texttransform">​</a></h3> 67<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'none'</code>, <code>'uppercase'</code>, <code>'lowercase'</code>, <code>'capitalize'</code>)<td><code>'none'</code></table> 68<hr> 69<h3 class="anchor anchorWithStickyNavbar_JmGV" id=verticalalign-android><code>verticalAlign</code> <div class="label android">Android</div><a href=#verticalalign-android class=hash-link aria-label="Direct link to verticalalign-android" title="Direct link to verticalalign-android">​</a></h3> 70<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'top'</code>, <code>'bottom'</code>, <code>'middle'</code>)<td><code>'auto'</code></table> 71<hr> 72<h3 class="anchor anchorWithStickyNavbar_JmGV" id=writingdirection-ios><code>writingDirection</code> <div class="label ios">iOS</div><a href=#writingdirection-ios class=hash-link aria-label="Direct link to writingdirection-ios" title="Direct link to writingdirection-ios">​</a></h3> 73<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'ltr'</code>, <code>'rtl'</code>)<td><code>'auto'</code></table> 74<hr> 75<h3 class="anchor anchorWithStickyNavbar_JmGV" id=userselect><code>userSelect</code><a href=#userselect class=hash-link aria-label="Direct link to userselect" title="Direct link to userselect">​</a></h3> 76<p>It allows the user to select text and to use the native copy and paste functionality. Has precedence over the <code>selectable</code> prop.</p> 77<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'text'</code>, <code>'none'</code>, <code>'contain'</code>, <code>'all'</code>)<td><code>none</code></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-style-props.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-style-props.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/shadow-props><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Shadow Props</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/view-style-props><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>View Style Props</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=#example class="table-of-contents__link toc-highlight">Example</a><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#color class="table-of-contents__link toc-highlight"><code>color</code></a><li><a href=#fontfamily class="table-of-contents__link toc-highlight"><code>fontFamily</code></a><li><a href=#fontsize class="table-of-contents__link toc-highlight"><code>fontSize</code></a><li><a href=#fontstyle class="table-of-contents__link toc-highlight"><code>fontStyle</code></a><li><a href=#fontweight class="table-of-contents__link toc-highlight"><code>fontWeight</code></a><li><a href=#includefontpadding-android class="table-of-contents__link toc-highlight"><code>includeFontPadding</code> <div class="label android">Android</div></a><li><a href=#fontvariant class="table-of-contents__link toc-highlight"><code>fontVariant</code></a><li><a href=#letterspacing class="table-of-contents__link toc-highlight"><code>letterSpacing</code></a><li><a href=#lineheight class="table-of-contents__link toc-highlight"><code>lineHeight</code></a><li><a href=#textalign class="table-of-contents__link toc-highlight"><code>textAlign</code></a><li><a href=#textalignvertical-android class="table-of-contents__link toc-highlight"><code>textAlignVertical</code> <div class="label android">Android</div></a><li><a href=#textdecorationcolor-ios class="table-of-contents__link toc-highlight"><code>textDecorationColor</code> <div class="label ios">iOS</div></a><li><a href=#textdecorationline class="table-of-contents__link toc-highlight"><code>textDecorationLine</code></a><li><a href=#textdecorationstyle-ios class="table-of-contents__link toc-highlight"><code>textDecorationStyle</code> <div class="label ios">iOS</div></a><li><a href=#textshadowcolor class="table-of-contents__link toc-highlight"><code>textShadowColor</code></a><li><a href=#textshadowoffset class="table-of-contents__link toc-highlight"><code>textShadowOffset</code></a><li><a href=#textshadowradius class="table-of-contents__link toc-highlight"><code>textShadowRadius</code></a><li><a href=#texttransform class="table-of-contents__link toc-highlight"><code>textTransform</code></a><li><a href=#verticalalign-android class="table-of-contents__link toc-highlight"><code>verticalAlign</code> <div class="label android">Android</div></a><li><a href=#writingdirection-ios class="table-of-contents__link toc-highlight"><code>writingDirection</code> <div class="label ios">iOS</div></a><li><a href=#userselect class="table-of-contents__link toc-highlight"><code>userSelect</code></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>