kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_image-style-props.html
at main 43 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-image-style-props" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Image 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/image-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="Image Style Props · React Native"><meta data-rh=true name=description content=Examples><meta data-rh=true property=og:description content=Examples><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/image-style-props><link data-rh=true rel=alternate href=https://reactnative.dev/docs/image-style-props hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/image-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/image-style-props>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/image-style-props>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/image-style-props>0.79</a><li><a class=dropdown__link href=/docs/0.78/image-style-props>0.78</a><li><a class=dropdown__link href=/docs/0.77/image-style-props>0.77</a><li><a class=dropdown__link href=/docs/0.76/image-style-props>0.76</a><li><a class=dropdown__link href=/docs/0.75/image-style-props>0.75</a><li><a class=dropdown__link href=/docs/0.74/image-style-props>0.74</a><li><a class=dropdown__link href=/docs/0.73/image-style-props>0.73</a><li><a class=dropdown__link href=/docs/0.72/image-style-props>0.72</a><li><a class=dropdown__link href=/docs/0.71/image-style-props>0.71</a><li><a class=dropdown__link href=/docs/0.70/image-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 menu__link--active" aria-current=page 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 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>Image Style Props</h1></header><h2 class="anchor anchorWithStickyNavbar_JmGV" id=examples>Examples<a href=#examples class=hash-link aria-label="Direct link to Examples" title="Direct link to Examples">​</a></h2> 5<h3 class="anchor anchorWithStickyNavbar_JmGV" id=image-resize-mode>Image Resize Mode<a href=#image-resize-mode class=hash-link aria-label="Direct link to Image Resize Mode" title="Direct link to Image Resize Mode">​</a></h3> 6<div class=snack-player data-snack-name="Image Resize Modes 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%7BView%2C%20Image%2C%20Text%2C%20StyleSheet%2C%20ScrollView%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20asset%20%3D%20require('%40expo%2Fsnack-static%2Freact-native-logo.png')%3B%5Cn%5Cnconst%20DisplayAnImageWithStyle%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%20edges%3D%7B%5B'top'%5D%7D%3E%5Cn%20%20%20%20%20%20%3CScrollView%20style%3D%7Bstyles.scrollView%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%20style%3D%7B%5Bstyles.image%2C%20%7BresizeMode%3A%20'cover'%7D%5D%7D%20source%3D%7Basset%7D%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EresizeMode%20%3A%20cover%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BresizeMode%3A%20'contain'%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EresizeMode%20%3A%20contain%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BresizeMode%3A%20'stretch'%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EresizeMode%20%3A%20stretch%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BresizeMode%3A%20'repeat'%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EresizeMode%20%3A%20repeat%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BresizeMode%3A%20'center'%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EresizeMode%20%3A%20center%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FScrollView%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%20scrollView%3A%20%7B%5Cn%20%20%20%20padding%3A%2012%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20gap%3A%2016%2C%5Cn%20%20%7D%2C%5Cn%20%20image%3A%20%7B%5Cn%20%20%20%20borderWidth%3A%201%2C%5Cn%20%20%20%20borderColor%3A%20'red'%2C%5Cn%20%20%20%20height%3A%20100%2C%5Cn%20%20%20%20width%3A%20200%2C%5Cn%20%20%7D%2C%5Cn%20%20text%3A%20%7B%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20marginBottom%3A%2012%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20DisplayAnImageWithStyle%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> 7<h3 class="anchor anchorWithStickyNavbar_JmGV" id=image-border>Image Border<a href=#image-border class=hash-link aria-label="Direct link to Image Border" title="Direct link to Image Border">​</a></h3> 8<div class=snack-player data-snack-name="Style BorderWidth and BorderColor 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%7BImage%2C%20StyleSheet%2C%20Text%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20DisplayAnImageWithStyle%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%3CImage%5Cn%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'red'%2C%5Cn%20%20%20%20%20%20%20%20%20%20borderWidth%3A%205%2C%5Cn%20%20%20%20%20%20%20%20%20%20height%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20%20%20width%3A%20200%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3CText%3EborderColor%20%26%20borderWidth%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%20%20flexDirection%3A%20'column'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20DisplayAnImageWithStyle%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> 9<h3 class="anchor anchorWithStickyNavbar_JmGV" id=image-border-radius>Image Border Radius<a href=#image-border-radius class=hash-link aria-label="Direct link to Image Border Radius" title="Direct link to Image Border Radius">​</a></h3> 10<div class=snack-player data-snack-name="Style Border Radius 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%7BView%2C%20Image%2C%20StyleSheet%2C%20Text%2C%20ScrollView%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20asset%20%3D%20require('%40expo%2Fsnack-static%2Freact-native-logo.png')%3B%5Cn%5Cnconst%20DisplayAnImageWithStyle%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%3CScrollView%20style%3D%7Bstyles.scrollView%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BborderTopRightRadius%3A%2020%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EborderTopRightRadius%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BborderBottomRightRadius%3A%2020%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EborderBottomRightRadius%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BborderBottomLeftRadius%3A%2020%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EborderBottomLeftRadius%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.image%2C%20%7BborderTopLeftRadius%3A%2020%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20source%3D%7Basset%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EborderTopLeftRadius%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FScrollView%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%20scrollView%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20image%3A%20%7B%5Cn%20%20%20%20borderWidth%3A%201%2C%5Cn%20%20%20%20borderColor%3A%20'red'%2C%5Cn%20%20%20%20height%3A%20100%2C%5Cn%20%20%20%20width%3A%20200%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20DisplayAnImageWithStyle%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<h3 class="anchor anchorWithStickyNavbar_JmGV" id=image-tint>Image Tint<a href=#image-tint class=hash-link aria-label="Direct link to Image Tint" title="Direct link to Image Tint">​</a></h3> 12<div class=snack-player data-snack-name="Style tintColor Function Component" 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%7BImage%2C%20StyleSheet%2C%20Text%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20DisplayAnImageWithStyle%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%3CImage%5Cn%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20tintColor%3A%20'%23000000'%2C%5Cn%20%20%20%20%20%20%20%20%20%20resizeMode%3A%20'contain'%2C%5Cn%20%20%20%20%20%20%20%20%20%20height%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20%20%20width%3A%20200%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3CText%3EtintColor%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%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20DisplayAnImageWithStyle%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> 13<h1>Reference</h1> 14<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> 15<h3 class="anchor anchorWithStickyNavbar_JmGV" id=backfacevisibility><code>backfaceVisibility</code><a href=#backfacevisibility class=hash-link aria-label="Direct link to backfacevisibility" title="Direct link to backfacevisibility">​</a></h3> 16<p>The property defines whether or not the back face of a rotated image should be visible.</p> 17<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'visible'</code>, <code>'hidden'</code>)<td><code>'visible'</code></table> 18<hr> 19<h3 class="anchor anchorWithStickyNavbar_JmGV" id=backgroundcolor><code>backgroundColor</code><a href=#backgroundcolor class=hash-link aria-label="Direct link to backgroundcolor" title="Direct link to backgroundcolor">​</a></h3> 20<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 21<hr> 22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomleftradius><code>borderBottomLeftRadius</code><a href=#borderbottomleftradius class=hash-link aria-label="Direct link to borderbottomleftradius" title="Direct link to borderbottomleftradius">​</a></h3> 23<table><thead><tr><th>Type<tbody><tr><td>number</table> 24<hr> 25<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomrightradius><code>borderBottomRightRadius</code><a href=#borderbottomrightradius class=hash-link aria-label="Direct link to borderbottomrightradius" title="Direct link to borderbottomrightradius">​</a></h3> 26<table><thead><tr><th>Type<tbody><tr><td>number</table> 27<hr> 28<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordercolor><code>borderColor</code><a href=#bordercolor class=hash-link aria-label="Direct link to bordercolor" title="Direct link to bordercolor">​</a></h3> 29<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 30<hr> 31<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderradius><code>borderRadius</code><a href=#borderradius class=hash-link aria-label="Direct link to borderradius" title="Direct link to borderradius">​</a></h3> 32<table><thead><tr><th>Type<tbody><tr><td>number</table> 33<hr> 34<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertopleftradius><code>borderTopLeftRadius</code><a href=#bordertopleftradius class=hash-link aria-label="Direct link to bordertopleftradius" title="Direct link to bordertopleftradius">​</a></h3> 35<table><thead><tr><th>Type<tbody><tr><td>number</table> 36<hr> 37<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertoprightradius><code>borderTopRightRadius</code><a href=#bordertoprightradius class=hash-link aria-label="Direct link to bordertoprightradius" title="Direct link to bordertoprightradius">​</a></h3> 38<table><thead><tr><th>Type<tbody><tr><td>number</table> 39<hr> 40<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderwidth><code>borderWidth</code><a href=#borderwidth class=hash-link aria-label="Direct link to borderwidth" title="Direct link to borderwidth">​</a></h3> 41<table><thead><tr><th>Type<tbody><tr><td>number</table> 42<hr> 43<h3 class="anchor anchorWithStickyNavbar_JmGV" id=opacity><code>opacity</code><a href=#opacity class=hash-link aria-label="Direct link to opacity" title="Direct link to opacity">​</a></h3> 44<p>Set an opacity value for the image. The number should be in the range from <code>0.0</code> to <code>1.0</code>.</p> 45<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>1.0</code></table> 46<hr> 47<h3 class="anchor anchorWithStickyNavbar_JmGV" id=overflow><code>overflow</code><a href=#overflow class=hash-link aria-label="Direct link to overflow" title="Direct link to overflow">​</a></h3> 48<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'visible'</code>, <code>'hidden'</code>)<td><code>'visible'</code></table> 49<hr> 50<h3 class="anchor anchorWithStickyNavbar_JmGV" id=overlaycolor-android><code>overlayColor</code> <div class="label android">Android</div><a href=#overlaycolor-android class=hash-link aria-label="Direct link to overlaycolor-android" title="Direct link to overlaycolor-android">​</a></h3> 51<p>When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners:</p> 52<ul> 53<li>Certain resize modes, such as <code>'contain'</code></li> 54<li>Animated GIFs</li> 55</ul> 56<p>A typical way to use this prop is with images displayed on a solid background and setting the <code>overlayColor</code> to the same color as the background.</p> 57<p>For details of how this works under the hood, see <a href=https://frescolib.org/docs/rounded-corners-and-circles.html target=_blank rel="noopener noreferrer">Fresco documentation</a>.</p> 58<table><thead><tr><th>Type<tbody><tr><td>string</table> 59<hr> 60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=resizemode><code>resizeMode</code><a href=#resizemode class=hash-link aria-label="Direct link to resizemode" title="Direct link to resizemode">​</a></h3> 61<p>Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to <code>cover</code>.</p> 62<ul> 63<li> 64<p><code>cover</code>: Scale the image uniformly (maintain the image's aspect ratio) so that:</p> 65<ul> 66<li>Both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)</li> 67<li>At least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)</li> 68</ul> 69</li> 70<li> 71<p><code>contain</code>: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).</p> 72</li> 73<li> 74<p><code>stretch</code>: Scale width and height independently, This may change the aspect ratio of the src.</p> 75</li> 76<li> 77<p><code>repeat</code>: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.</p> 78</li> 79<li> 80<p><code>center</code>: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.</p> 81</li> 82</ul> 83<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'cover'</code>, <code>'contain'</code>, <code>'stretch'</code>, <code>'repeat'</code>, <code>'center'</code>)<td><code>'cover'</code></table> 84<hr> 85<h3 class="anchor anchorWithStickyNavbar_JmGV" id=objectfit><code>objectFit</code><a href=#objectfit class=hash-link aria-label="Direct link to objectfit" title="Direct link to objectfit">​</a></h3> 86<p>Determines how to resize the image when the frame doesn't match the raw image dimensions.</p> 87<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'cover'</code>, <code>'contain'</code>, <code>'fill'</code>, <code>'scale-down'</code>)<td><code>'cover'</code></table> 88<hr> 89<h3 class="anchor anchorWithStickyNavbar_JmGV" id=tintcolor><code>tintColor</code><a href=#tintcolor class=hash-link aria-label="Direct link to tintcolor" title="Direct link to tintcolor">​</a></h3> 90<p>Changes the color of all the non-transparent pixels to the tintColor.</p> 91<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></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/image-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/image-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/safeareaview><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>SafeAreaView</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/layout-props><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Layout 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=#examples class="table-of-contents__link toc-highlight">Examples</a><ul><li><a href=#image-resize-mode class="table-of-contents__link toc-highlight">Image Resize Mode</a><li><a href=#image-border class="table-of-contents__link toc-highlight">Image Border</a><li><a href=#image-border-radius class="table-of-contents__link toc-highlight">Image Border Radius</a><li><a href=#image-tint class="table-of-contents__link toc-highlight">Image Tint</a></ul><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#backfacevisibility class="table-of-contents__link toc-highlight"><code>backfaceVisibility</code></a><li><a href=#backgroundcolor class="table-of-contents__link toc-highlight"><code>backgroundColor</code></a><li><a href=#borderbottomleftradius class="table-of-contents__link toc-highlight"><code>borderBottomLeftRadius</code></a><li><a href=#borderbottomrightradius class="table-of-contents__link toc-highlight"><code>borderBottomRightRadius</code></a><li><a href=#bordercolor class="table-of-contents__link toc-highlight"><code>borderColor</code></a><li><a href=#borderradius class="table-of-contents__link toc-highlight"><code>borderRadius</code></a><li><a href=#bordertopleftradius class="table-of-contents__link toc-highlight"><code>borderTopLeftRadius</code></a><li><a href=#bordertoprightradius class="table-of-contents__link toc-highlight"><code>borderTopRightRadius</code></a><li><a href=#borderwidth class="table-of-contents__link toc-highlight"><code>borderWidth</code></a><li><a href=#opacity class="table-of-contents__link toc-highlight"><code>opacity</code></a><li><a href=#overflow class="table-of-contents__link toc-highlight"><code>overflow</code></a><li><a href=#overlaycolor-android class="table-of-contents__link toc-highlight"><code>overlayColor</code> <div class="label android">Android</div></a><li><a href=#resizemode class="table-of-contents__link toc-highlight"><code>resizeMode</code></a><li><a href=#objectfit class="table-of-contents__link toc-highlight"><code>objectFit</code></a><li><a href=#tintcolor class="table-of-contents__link toc-highlight"><code>tintColor</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>