this repo has no description
kitten.sh
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-image" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Image · 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><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 · React Native"><meta data-rh=true name=description content="A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll."><meta data-rh=true property=og:description content="A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/image><link data-rh=true rel=alternate href=https://reactnative.dev/docs/image hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/image 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>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/image>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/image>0.79</a><li><a class=dropdown__link href=/docs/0.78/image>0.78</a><li><a class=dropdown__link href=/docs/0.77/image>0.77</a><li><a class=dropdown__link href=/docs/0.76/image>0.76</a><li><a class=dropdown__link href=/docs/0.75/image>0.75</a><li><a class=dropdown__link href=/docs/0.74/image>0.74</a><li><a class=dropdown__link href=/docs/0.73/image>0.73</a><li><a class=dropdown__link href=/docs/0.72/image>0.72</a><li><a class=dropdown__link href=/docs/0.71/image>0.71</a><li><a class=dropdown__link href=/docs/0.70/image>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/components-and-apis>Core Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/components-and-apis>Core Components and APIs</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/activityindicator>ActivityIndicator</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/button>Button</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/flatlist>FlatList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/image>Image</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/imagebackground>ImageBackground</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/keyboardavoidingview>KeyboardAvoidingView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/modal>Modal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/pressable>Pressable</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/refreshcontrol>RefreshControl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/scrollview>ScrollView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sectionlist>SectionList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/statusbar>StatusBar</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/switch>Switch</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/text>Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/textinput>TextInput</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablehighlight>TouchableHighlight</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchableopacity>TouchableOpacity</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablewithoutfeedback>TouchableWithoutFeedback</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view>View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/virtualizedlist>VirtualizedList</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/drawerlayoutandroid>Android Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawerlayoutandroid>DrawerLayoutAndroid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablenativefeedback>TouchableNativeFeedback</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/inputaccessoryview>iOS Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/inputaccessoryview>InputAccessoryView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/safeareaview>SafeAreaView</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/image-style-props>Props</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Image</h1></header><p>A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.</p>
5<p>This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the <code>'data:'</code> uri scheme.</p>
6<blockquote>
7<p>Note that for network and data images, you will need to manually specify the dimensions of your image!</p>
8</blockquote>
9<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>
10<div class=snack-player data-snack-name="Image 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%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%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%20tinyLogo%3A%20%7B%5Cn%20%20%20%20width%3A%2050%2C%5Cn%20%20%20%20height%3A%2050%2C%5Cn%20%20%7D%2C%5Cn%20%20logo%3A%20%7B%5Cn%20%20%20%20width%3A%2066%2C%5Cn%20%20%20%20height%3A%2058%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnconst%20DisplayAnImage%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%7Bstyles.tinyLogo%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%3CImage%5Cn%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%5Cn%20%20%20%20%20%20%20%20source%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fimg%2Ftiny_logo.png'%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3CImage%5Cn%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%5Cn%20%20%20%20%20%20%20%20source%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20uri%3A%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%3B%5Cn%5Cnexport%20default%20DisplayAnImage%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div>
11<p>You can also add <code>style</code> to an image:</p>
12<div class=snack-player data-snack-name="Styled Image 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%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%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%20stretch%3A%20%7B%5Cn%20%20%20%20width%3A%2050%2C%5Cn%20%20%20%20height%3A%20200%2C%5Cn%20%20%20%20resizeMode%3A%20'stretch'%2C%5Cn%20%20%7D%2C%5Cn%7D)%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%7Bstyles.stretch%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%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%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<h2 class="anchor anchorWithStickyNavbar_JmGV" id=gif-and-webp-support-on-android>GIF and WebP support on Android<a href=#gif-and-webp-support-on-android class=hash-link aria-label="Direct link to GIF and WebP support on Android" title="Direct link to GIF and WebP support on Android"></a></h2>
14<p>When building your own native code, GIF and WebP are not supported by default on Android.</p>
15<p>You will need to add some optional modules in <code>android/app/build.gradle</code>, depending on the needs of your app.</p>
16<div class="language-groovy codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>groovy</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-groovy codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">dependencies </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// If your app supports Android versions before Ice Cream Sandwich (API level 14)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> implementation </span><span class="token string" style=color:#8dc891>'com.facebook.fresco:animated-base-support:1.3.0'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// For animated GIF support</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> implementation </span><span class="token string" style=color:#8dc891>'com.facebook.fresco:animated-gif:3.2.0'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// For WebP support, including animated WebP</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> implementation </span><span class="token string" style=color:#8dc891>'com.facebook.fresco:animated-webp:3.2.0'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> implementation </span><span class="token string" style=color:#8dc891>'com.facebook.fresco:webpsupport:3.2.0'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// For WebP support, without animations</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> implementation </span><span class="token string" style=color:#8dc891>'com.facebook.fresco:webpsupport:3.2.0'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div>
17<blockquote>
18<p>Note: the version listed above may not be updated in time. Please check <a href=https://github.com/facebook/react-native/blob/main/packages/react-native/gradle/libs.versions.toml target=_blank rel="noopener noreferrer"><code>packages/react-native/gradle/libs.versions.toml</code></a> in the main repo to see which fresco version is being used in a specific tagged version.</p>
19</blockquote>
20<hr>
21<h1>Reference</h1>
22<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>
23<h3 class="anchor anchorWithStickyNavbar_JmGV" id=view-props><a href=/docs/view#props>View Props</a><a href=#view-props class=hash-link aria-label="Direct link to view-props" title="Direct link to view-props"></a></h3>
24<p>Inherits <a href=/docs/view#props>View Props</a>.</p>
25<hr>
26<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessible><code>accessible</code><a href=#accessible class=hash-link aria-label="Direct link to accessible" title="Direct link to accessible"></a></h3>
27<p>When true, indicates the image is an accessibility element.</p>
28<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table>
29<hr>
30<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylabel><code>accessibilityLabel</code><a href=#accessibilitylabel class=hash-link aria-label="Direct link to accessibilitylabel" title="Direct link to accessibilitylabel"></a></h3>
31<p>The text that's read by the screen reader when the user interacts with the image.</p>
32<table><thead><tr><th>Type<tbody><tr><td>string</table>
33<hr>
34<h3 class="anchor anchorWithStickyNavbar_JmGV" id=alt><code>alt</code><a href=#alt class=hash-link aria-label="Direct link to alt" title="Direct link to alt"></a></h3>
35<p>A string that defines an alternative text description of the image, which will be read by the screen reader when the user interacts with it. Using this will automatically mark this element as accessible.</p>
36<table><thead><tr><th>Type<tbody><tr><td>string</table>
37<hr>
38<h3 class="anchor anchorWithStickyNavbar_JmGV" id=blurradius><code>blurRadius</code><a href=#blurradius class=hash-link aria-label="Direct link to blurradius" title="Direct link to blurradius"></a></h3>
39<p>blurRadius: the blur radius of the blur filter added to the image.</p>
40<table><thead><tr><th>Type<tbody><tr><td>number</table>
41<blockquote>
42<p>Tip: On IOS, you will need to increase <code>blurRadius</code> by more than <code>5</code>.</p>
43</blockquote>
44<hr>
45<h3 class="anchor anchorWithStickyNavbar_JmGV" id=capinsets-ios><code>capInsets</code> <div class="label ios">iOS</div><a href=#capinsets-ios class=hash-link aria-label="Direct link to capinsets-ios" title="Direct link to capinsets-ios"></a></h3>
46<p>When the image is resized, the corners of the size specified by <code>capInsets</code> will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the <a href=https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets target=_blank rel="noopener noreferrer">official Apple documentation</a>.</p>
47<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/rect>Rect</a></table>
48<hr>
49<h3 class="anchor anchorWithStickyNavbar_JmGV" id=crossorigin><code>crossOrigin</code><a href=#crossorigin class=hash-link aria-label="Direct link to crossorigin" title="Direct link to crossorigin"></a></h3>
50<p>A string of a keyword specifying the CORS mode to use when fetching the image resource. It works similar to crossorigin attribute in HTML.</p>
51<ul>
52<li><code>anonymous</code>: No exchange of user credentials in the image request.</li>
53<li><code>use-credentials</code>: Sets <code>Access-Control-Allow-Credentials</code> header value to <code>true</code> in the image request.</li>
54</ul>
55<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'anonymous'</code>, <code>'use-credentials'</code>)<td><code>'anonymous'</code></table>
56<hr>
57<h3 class="anchor anchorWithStickyNavbar_JmGV" id=defaultsource><code>defaultSource</code><a href=#defaultsource class=hash-link aria-label="Direct link to defaultsource" title="Direct link to defaultsource"></a></h3>
58<p>A static image to display while loading the image source.</p>
59<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/image#imagesource>ImageSource</a></table>
60<blockquote>
61<p><strong>Note:</strong> On Android, the default source prop is ignored on debug builds.</p>
62</blockquote>
63<hr>
64<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fadeduration-android><code>fadeDuration</code> <div class="label android">Android</div><a href=#fadeduration-android class=hash-link aria-label="Direct link to fadeduration-android" title="Direct link to fadeduration-android"></a></h3>
65<p>Fade animation duration in milliseconds.</p>
66<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>300</code></table>
67<hr>
68<h3 class="anchor anchorWithStickyNavbar_JmGV" id=height><code>height</code><a href=#height class=hash-link aria-label="Direct link to height" title="Direct link to height"></a></h3>
69<p>Height of the image component.</p>
70<table><thead><tr><th>Type<tbody><tr><td>number</table>
71<hr>
72<h3 class="anchor anchorWithStickyNavbar_JmGV" id=loadingindicatorsource><code>loadingIndicatorSource</code><a href=#loadingindicatorsource class=hash-link aria-label="Direct link to loadingindicatorsource" title="Direct link to loadingindicatorsource"></a></h3>
73<p>Similarly to <code>source</code>, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded.</p>
74<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/image#imagesource>ImageSource</a> (<code>uri</code> only), number</table>
75<hr>
76<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onerror><code>onError</code><a href=#onerror class=hash-link aria-label="Direct link to onerror" title="Direct link to onerror"></a></h3>
77<p>Invoked on load error.</p>
78<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {error} }</code>) => void</table>
79<hr>
80<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onlayout><code>onLayout</code><a href=#onlayout class=hash-link aria-label="Direct link to onlayout" title="Direct link to onlayout"></a></h3>
81<p>Invoked on mount and on layout changes.</p>
82<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/layoutevent>LayoutEvent</a>} => void</code></table>
83<hr>
84<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onload><code>onLoad</code><a href=#onload class=hash-link aria-label="Direct link to onload" title="Direct link to onload"></a></h3>
85<p>Invoked when load completes successfully.</p>
86<p><strong>Example:</strong> <code>onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}</code></p>
87<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/image#imageloadevent>ImageLoadEvent</a>} => void</code></table>
88<hr>
89<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onloadend><code>onLoadEnd</code><a href=#onloadend class=hash-link aria-label="Direct link to onloadend" title="Direct link to onloadend"></a></h3>
90<p>Invoked when load either succeeds or fails.</p>
91<table><thead><tr><th>Type<tbody><tr><td>() => void</table>
92<hr>
93<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onloadstart><code>onLoadStart</code><a href=#onloadstart class=hash-link aria-label="Direct link to onloadstart" title="Direct link to onloadstart"></a></h3>
94<p>Invoked on load start.</p>
95<p><strong>Example:</strong> <code>onLoadStart={() => this.setState({loading: true})}</code></p>
96<table><thead><tr><th>Type<tbody><tr><td>() => void</table>
97<hr>
98<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onpartialload-ios><code>onPartialLoad</code> <div class="label ios">iOS</div><a href=#onpartialload-ios class=hash-link aria-label="Direct link to onpartialload-ios" title="Direct link to onpartialload-ios"></a></h3>
99<p>Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.</p>
100<table><thead><tr><th>Type<tbody><tr><td>() => void</table>
101<hr>
102<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onprogress><code>onProgress</code><a href=#onprogress class=hash-link aria-label="Direct link to onprogress" title="Direct link to onprogress"></a></h3>
103<p>Invoked on download progress.</p>
104<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {loaded, total} }</code>) => void</table>
105<hr>
106<h3 class="anchor anchorWithStickyNavbar_JmGV" id=progressiverenderingenabled-android><code>progressiveRenderingEnabled</code> <div class="label android">Android</div><a href=#progressiverenderingenabled-android class=hash-link aria-label="Direct link to progressiverenderingenabled-android" title="Direct link to progressiverenderingenabled-android"></a></h3>
107<p>When <code>true</code>, enables progressive jpeg streaming - <a href=https://frescolib.org/docs/progressive-jpegs target=_blank rel="noopener noreferrer">https://frescolib.org/docs/progressive-jpegs</a>.</p>
108<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table>
109<hr>
110<h3 class="anchor anchorWithStickyNavbar_JmGV" id=referrerpolicy><code>referrerPolicy</code><a href=#referrerpolicy class=hash-link aria-label="Direct link to referrerpolicy" title="Direct link to referrerpolicy"></a></h3>
111<p>A string indicating which referrer to use when fetching the resource. Sets the value for <code>Referrer-Policy</code> header in the image request. Works similar to <code>referrerpolicy</code> attribute in HTML.</p>
112<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'no-referrer'</code>, <code>'no-referrer-when-downgrade'</code>, <code>'origin'</code>, <code>'origin-when-cross-origin'</code>, <code>'same-origin'</code>, <code>'strict-origin'</code>, <code>'strict-origin-when-cross-origin'</code>, <code>'unsafe-url'</code>)<td><code>'strict-origin-when-cross-origin'</code></table>
113<hr>
114<h3 class="anchor anchorWithStickyNavbar_JmGV" id=resizemethod-android><code>resizeMethod</code> <div class="label android">Android</div><a href=#resizemethod-android class=hash-link aria-label="Direct link to resizemethod-android" title="Direct link to resizemethod-android"></a></h3>
115<p>The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to <code>auto</code>.</p>
116<ul>
117<li>
118<p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p>
119</li>
120<li>
121<p><code>resize</code>: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of <code>scale</code> when the image is much larger than the view.</p>
122</li>
123<li>
124<p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.</p>
125</li>
126<li>
127<p><code>none</code>: No sampling is performed and the image is displayed in its full resolution. This should only be used in rare circumstances because it is considered unsafe as Android will throw a runtime exception when trying to render images that consume too much memory.</p>
128</li>
129</ul>
130<p>More details about <code>resize</code> and <code>scale</code> can be found at <a href=https://frescolib.org/docs/resizing target=_blank rel="noopener noreferrer">https://frescolib.org/docs/resizing</a>.</p>
131<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'resize'</code>, <code>'scale'</code>, <code>'none'</code>)<td><code>'auto'</code></table>
132<hr>
133<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>
134<p>Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to <code>cover</code>.</p>
135<ul>
136<li>
137<p><code>cover</code>: Scale the image uniformly (maintain the image's aspect ratio) so that</p>
138<ul>
139<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>
140<li>at least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)</li>
141</ul>
142</li>
143<li>
144<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>
145</li>
146<li>
147<p><code>stretch</code>: Scale width and height independently, This may change the aspect ratio of the src.</p>
148</li>
149<li>
150<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>
151</li>
152<li>
153<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>
154</li>
155</ul>
156<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>
157<hr>
158<h3 class="anchor anchorWithStickyNavbar_JmGV" id=resizemultiplier-android><code>resizeMultiplier</code> <div class="label android">Android</div><a href=#resizemultiplier-android class=hash-link aria-label="Direct link to resizemultiplier-android" title="Direct link to resizemultiplier-android"></a></h3>
159<p>When the <code>resizeMethod</code> is set to <code>resize</code>, the destination dimensions are multiplied by this value. The <code>scale</code> method is used to perform the remainder of the resize. A default of <code>1.0</code> means the bitmap size is designed to fit the destination dimensions. A multiplier greater than <code>1.0</code> will set the resize options larger than that of the destination dimensions, and the resulting bitmap will be scaled down from the hardware size. Defaults to <code>1.0</code>.</p>
160<p>This prop is most useful in cases where the destination dimensions are quite small and the source image is significantly larger. The <code>resize</code> resize method performs downsampling and significant image quality is lost between the source and destination image sizes, often resulting in a blurry image. By using a multiplier, the decoded image is slightly larger than the target size but smaller than the source image (if the source image is large enough). This allows aliasing artifacts to produce faux quality through scaling operations on the multiplied image.</p>
161<p>If you have a source image with dimensions 200x200 and destination dimensions of 24x24, a resizeMultiplier of <code>2.0</code> will tell Fresco to downsample the image to 48x48. Fresco picks the closest power of 2 (so, 50x50) and decodes the image into a bitmap of that size. Without the multiplier, the closest power of 2 would be 25x25. The resultant image is scaled down by the system.</p>
162<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>1.0</code></table>
163<hr>
164<h3 class="anchor anchorWithStickyNavbar_JmGV" id=source><code>source</code><a href=#source class=hash-link aria-label="Direct link to source" title="Direct link to source"></a></h3>
165<p>The image source (either a remote URL or a local file resource).</p>
166<p>This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best <code>uri</code> to display based on the measured size of the image container. A <code>cache</code> property can be added to control how networked request interacts with the local cache. (For more information see <a href=/docs/images#cache-control>Cache Control for Images</a>).</p>
167<p>The currently supported formats are <code>png</code>, <code>jpg</code>, <code>jpeg</code>, <code>bmp</code>, <code>gif</code>, <code>webp</code>, <code>psd</code> (iOS only). In addition, iOS supports several RAW image formats. Refer to Apple's documentation for the current list of supported camera models (for iOS 12, see <a href=https://support.apple.com/en-ca/HT208967 target=_blank rel="noopener noreferrer">https://support.apple.com/en-ca/HT208967</a>).</p>
168<p>Please note that the <code>webp</code> format is supported on iOS <strong>only</strong> when bundled with the JavaScript code.</p>
169<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/image#imagesource>ImageSource</a></table>
170<hr>
171<h3 class="anchor anchorWithStickyNavbar_JmGV" id=src><code>src</code><a href=#src class=hash-link aria-label="Direct link to src" title="Direct link to src"></a></h3>
172<p>A string representing the remote URL of the image. This prop has precedence over <code>source</code> prop.</p>
173<p><strong>Example:</strong> <code>src={'https://reactnative.dev/img/tiny_logo.png'}</code></p>
174<table><thead><tr><th>Type<tbody><tr><td>string</table>
175<hr>
176<h3 class="anchor anchorWithStickyNavbar_JmGV" id=srcset><code>srcSet</code><a href=#srcset class=hash-link aria-label="Direct link to srcset" title="Direct link to srcset"></a></h3>
177<p>A string representing comma separated list of possible candidate image source. Each image source contains a URL of an image and a pixel density descriptor. If no descriptor is specified, it defaults to descriptor of <code>1x</code>.</p>
178<p>If <code>srcSet</code> does not contain a <code>1x</code> descriptor, the value in <code>src</code> is used as image source with <code>1x</code> descriptor (if provided).</p>
179<p>This prop has precedence over both the <code>src</code> and <code>source</code> props.</p>
180<p><strong>Example:</strong> <code>srcSet={'https://reactnative.dev/img/tiny_logo.png 1x, https://reactnative.dev/img/header_logo.svg 2x'}</code></p>
181<table><thead><tr><th>Type<tbody><tr><td>string</table>
182<hr>
183<h3 class="anchor anchorWithStickyNavbar_JmGV" id=style><code>style</code><a href=#style class=hash-link aria-label="Direct link to style" title="Direct link to style"></a></h3>
184<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/image-style-props#props>Image Style Props</a>, <a href=/docs/layout-props#props>Layout Props</a>, <a href=/docs/shadow-props#props>Shadow Props</a>, <a href=/docs/transforms#props>Transforms</a></table>
185<hr>
186<h3 class="anchor anchorWithStickyNavbar_JmGV" id=testid><code>testID</code><a href=#testid class=hash-link aria-label="Direct link to testid" title="Direct link to testid"></a></h3>
187<p>A unique identifier for this element to be used in UI Automation testing scripts.</p>
188<table><thead><tr><th>Type<tbody><tr><td>string</table>
189<hr>
190<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>
191<p>Changes the color of all non-transparent pixels to the <code>tintColor</code>.</p>
192<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
193<hr>
194<h3 class="anchor anchorWithStickyNavbar_JmGV" id=width><code>width</code><a href=#width class=hash-link aria-label="Direct link to width" title="Direct link to width"></a></h3>
195<p>Width of the image component.</p>
196<table><thead><tr><th>Type<tbody><tr><td>number</table>
197<h2 class="anchor anchorWithStickyNavbar_JmGV" id=methods>Methods<a href=#methods class=hash-link aria-label="Direct link to Methods" title="Direct link to Methods"></a></h2>
198<h3 class="anchor anchorWithStickyNavbar_JmGV" id=abortprefetch-android><code>abortPrefetch()</code> <div class="label android">Android</div><a href=#abortprefetch-android class=hash-link aria-label="Direct link to abortprefetch-android" title="Direct link to abortprefetch-android"></a></h3>
199<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>abortPrefetch</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">requestId</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
200<p>Abort prefetch request.</p>
201<p><strong>Parameters:</strong></p>
202<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>requestId <div class="label basic required">Required</div><td>number<td>Request id as returned by <code>prefetch()</code>.</table>
203<hr>
204<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getsize><code>getSize()</code><a href=#getsize class=hash-link aria-label="Direct link to getsize" title="Direct link to getsize"></a></h3>
205<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getSize</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">uri</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token known-class-name class-name" style=color:#fac863>Promise</span><span class="token operator" style=color:#fc929e><</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">width</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> height</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>}</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
206<p>Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download.</p>
207<p>In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API.</p>
208<p><strong>Parameters:</strong></p>
209<table><thead><tr><th><div class=wideColumn>Name</div><th>Type<th>Description<tbody><tr><td>uri <div class="label basic required">Required</div><td>string<td>The location of the image.</table>
210<hr>
211<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getsizewithheaders><code>getSizeWithHeaders()</code><a href=#getsizewithheaders class=hash-link aria-label="Direct link to getsizewithheaders" title="Direct link to getsizewithheaders"></a></h3>
212<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getSizeWithHeaders</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> uri</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> headers</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">index</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>]</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token known-class-name class-name" style=color:#fac863>Promise</span><span class="token operator" style=color:#fc929e><</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">width</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> height</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>}</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
213<p>Retrieve the width and height (in pixels) of an image prior to displaying it with the ability to provide the headers for the request. This method can fail if the image cannot be found, or fails to download. It also does not work for static image resources.</p>
214<p>In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API.</p>
215<p><strong>Parameters:</strong></p>
216<table><thead><tr><th><div class=wideColumn>Name</div><th>Type<th>Description<tbody><tr><td>uri <div class="label basic required">Required</div><td>string<td>The location of the image.<tr><td>headers <div class="label basic required">Required</div><td>object<td>The headers for the request.</table>
217<hr>
218<h3 class="anchor anchorWithStickyNavbar_JmGV" id=prefetch><code>prefetch()</code><a href=#prefetch class=hash-link aria-label="Direct link to prefetch" title="Direct link to prefetch"></a></h3>
219<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>await</span><span class="token plain"> </span><span class="token maybe-class-name">Image</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>prefetch</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">url</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
220<p>Prefetches a remote image for later use by downloading it to the disk cache. Returns a promise which resolves to a boolean.</p>
221<p><strong>Parameters:</strong></p>
222<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>url <div class="label basic required">Required</div><td>string<td>The remote location of the image.<tr><td>callback<td>function <div class="label android">Android</div><td>The function that will be called with the <code>requestId</code>.</table>
223<hr>
224<h3 class="anchor anchorWithStickyNavbar_JmGV" id=querycache><code>queryCache()</code><a href=#querycache class=hash-link aria-label="Direct link to querycache" title="Direct link to querycache"></a></h3>
225<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>queryCache</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> urls</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>[</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token known-class-name class-name" style=color:#fac863>Promise</span><span class="token operator" style=color:#fc929e><</span><span class="token maybe-class-name">Record</span><span class="token operator" style=color:#fc929e><</span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'memory'</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'disk'</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'disk/memory'</span><span class="token operator" style=color:#fc929e>>></span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
226<p>Perform cache interrogation. Returns a promise which resolves to a mapping from URL to cache status, such as "disk", "memory" or "disk/memory". If a requested URL is not in the mapping, it means it's not in the cache.</p>
227<p><strong>Parameters:</strong></p>
228<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>urls <div class="label basic required">Required</div><td>array<td>List of image URLs to check the cache for.</table>
229<hr>
230<h3 class="anchor anchorWithStickyNavbar_JmGV" id=resolveassetsource><code>resolveAssetSource()</code><a href=#resolveassetsource class=hash-link aria-label="Direct link to resolveassetsource" title="Direct link to resolveassetsource"></a></h3>
231<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>resolveAssetSource</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">source</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ImageSourcePropType</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> height</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> width</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> scale</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> uri</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
232<p>Resolves an asset reference into an object which has the properties <code>uri</code>, <code>scale</code>, <code>width</code>, and <code>height</code>.</p>
233<p><strong>Parameters:</strong></p>
234<table><thead><tr><th><div class=wideColumn>Name</div><th>Type<th>Description<tbody><tr><td>source <div class="label basic required">Required</div><td><a href=/docs/image#imagesource>ImageSource</a>, number<td>A number (opaque type returned by <code>require('./foo.png')</code>) or an ImageSource.</table>
235<h2 class="anchor anchorWithStickyNavbar_JmGV" id=type-definitions>Type Definitions<a href=#type-definitions class=hash-link aria-label="Direct link to Type Definitions" title="Direct link to Type Definitions"></a></h2>
236<h3 class="anchor anchorWithStickyNavbar_JmGV" id=imagecacheenum-ios>ImageCacheEnum <div class="label ios">iOS</div><a href=#imagecacheenum-ios class=hash-link aria-label="Direct link to imagecacheenum-ios" title="Direct link to imagecacheenum-ios"></a></h3>
237<p>Enum which can be used to set the cache handling or strategy for the potentially cached responses.</p>
238<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'default'</code>, <code>'reload'</code>, <code>'force-cache'</code>, <code>'only-if-cached'</code>)<td><code>'default'</code></table>
239<ul>
240<li><code>default</code>: Use the native platforms default strategy.</li>
241<li><code>reload</code>: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.</li>
242<li><code>force-cache</code>: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.</li>
243<li><code>only-if-cached</code>: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.</li>
244</ul>
245<h3 class="anchor anchorWithStickyNavbar_JmGV" id=imageloadevent>ImageLoadEvent<a href=#imageloadevent class=hash-link aria-label="Direct link to ImageLoadEvent" title="Direct link to ImageLoadEvent"></a></h3>
246<p>Object returned in the <code>onLoad</code> callback.</p>
247<table><thead><tr><th>Type<tbody><tr><td>object</table>
248<p><strong>Properties:</strong></p>
249<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>source<td>object<td>The <a href=#source-object>source object</a></table>
250<h4 class="anchor anchorWithStickyNavbar_JmGV" id=source-object>Source Object<a href=#source-object class=hash-link aria-label="Direct link to Source Object" title="Direct link to Source Object"></a></h4>
251<p><strong>Properties:</strong></p>
252<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>width<td>number<td>The width of loaded image.<tr><td>height<td>number<td>The height of loaded image.<tr><td>uri<td>string<td>A string representing the resource identifier for the image.</table>
253<h3 class="anchor anchorWithStickyNavbar_JmGV" id=imagesource>ImageSource<a href=#imagesource class=hash-link aria-label="Direct link to ImageSource" title="Direct link to ImageSource"></a></h3>
254<table><thead><tr><th>Type<tbody><tr><td>object, array of objects, number</table>
255<p><strong>Properties (if passing as object or array of objects):</strong></p>
256<table><thead><tr><th><div class=wideColumn>Name</div><th>Type<th>Description<tbody><tr><td>uri<td>string<td>A string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource.<tr><td>width<td>number<td>Can be specified if known at build time, in which case the value will be used to set the default <code><Image/></code> component dimension.<tr><td>height<td>number<td>Can be specified if known at build time, in which case the value will be used to set the default <code><Image/></code> component dimension.<tr><td>scale<td>number<td>Used to indicate the scale factor of the image. Defaults to <code>1.0</code> if unspecified, meaning that one image pixel equates to one display point / DIP.<tr><td>bundle<div class="label ios">iOS</div><td>string<td>The iOS asset bundle which the image is included in. This will default to <code>[NSBundle mainBundle]</code> if not set.<tr><td>method<td>string<td>The HTTP Method to use. Defaults to <code>'GET'</code> if not specified.<tr><td>headers<td>object<td>An object representing the HTTP headers to send along with the request for a remote image.<tr><td>body<td>string<td>The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied.<tr><td>cache<div class="label ios">iOS</div><td><a href=/docs/image#imagecacheenum-ios>ImageCacheEnum</a><td>Determines how the requests handles potentially cached responses.</table>
257<p><strong>If passing a number:</strong></p>
258<ul>
259<li><code>number</code> - opaque type returned by something like <code>require('./image.jpg')</code>.</li>
260</ul></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.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.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/flatlist><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>FlatList</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/imagebackground><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>ImageBackground</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><li><a href=#gif-and-webp-support-on-android class="table-of-contents__link toc-highlight">GIF and WebP support on Android</a><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#view-props class="table-of-contents__link toc-highlight">View Props</a><li><a href=#accessible class="table-of-contents__link toc-highlight"><code>accessible</code></a><li><a href=#accessibilitylabel class="table-of-contents__link toc-highlight"><code>accessibilityLabel</code></a><li><a href=#alt class="table-of-contents__link toc-highlight"><code>alt</code></a><li><a href=#blurradius class="table-of-contents__link toc-highlight"><code>blurRadius</code></a><li><a href=#capinsets-ios class="table-of-contents__link toc-highlight"><code>capInsets</code> <div class="label ios">iOS</div></a><li><a href=#crossorigin class="table-of-contents__link toc-highlight"><code>crossOrigin</code></a><li><a href=#defaultsource class="table-of-contents__link toc-highlight"><code>defaultSource</code></a><li><a href=#fadeduration-android class="table-of-contents__link toc-highlight"><code>fadeDuration</code> <div class="label android">Android</div></a><li><a href=#height class="table-of-contents__link toc-highlight"><code>height</code></a><li><a href=#loadingindicatorsource class="table-of-contents__link toc-highlight"><code>loadingIndicatorSource</code></a><li><a href=#onerror class="table-of-contents__link toc-highlight"><code>onError</code></a><li><a href=#onlayout class="table-of-contents__link toc-highlight"><code>onLayout</code></a><li><a href=#onload class="table-of-contents__link toc-highlight"><code>onLoad</code></a><li><a href=#onloadend class="table-of-contents__link toc-highlight"><code>onLoadEnd</code></a><li><a href=#onloadstart class="table-of-contents__link toc-highlight"><code>onLoadStart</code></a><li><a href=#onpartialload-ios class="table-of-contents__link toc-highlight"><code>onPartialLoad</code> <div class="label ios">iOS</div></a><li><a href=#onprogress class="table-of-contents__link toc-highlight"><code>onProgress</code></a><li><a href=#progressiverenderingenabled-android class="table-of-contents__link toc-highlight"><code>progressiveRenderingEnabled</code> <div class="label android">Android</div></a><li><a href=#referrerpolicy class="table-of-contents__link toc-highlight"><code>referrerPolicy</code></a><li><a href=#resizemethod-android class="table-of-contents__link toc-highlight"><code>resizeMethod</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=#resizemultiplier-android class="table-of-contents__link toc-highlight"><code>resizeMultiplier</code> <div class="label android">Android</div></a><li><a href=#source class="table-of-contents__link toc-highlight"><code>source</code></a><li><a href=#src class="table-of-contents__link toc-highlight"><code>src</code></a><li><a href=#srcset class="table-of-contents__link toc-highlight"><code>srcSet</code></a><li><a href=#style class="table-of-contents__link toc-highlight"><code>style</code></a><li><a href=#testid class="table-of-contents__link toc-highlight"><code>testID</code></a><li><a href=#tintcolor class="table-of-contents__link toc-highlight"><code>tintColor</code></a><li><a href=#width class="table-of-contents__link toc-highlight"><code>width</code></a></ul><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href=#abortprefetch-android class="table-of-contents__link toc-highlight"><code>abortPrefetch()</code> <div class="label android">Android</div></a><li><a href=#getsize class="table-of-contents__link toc-highlight"><code>getSize()</code></a><li><a href=#getsizewithheaders class="table-of-contents__link toc-highlight"><code>getSizeWithHeaders()</code></a><li><a href=#prefetch class="table-of-contents__link toc-highlight"><code>prefetch()</code></a><li><a href=#querycache class="table-of-contents__link toc-highlight"><code>queryCache()</code></a><li><a href=#resolveassetsource class="table-of-contents__link toc-highlight"><code>resolveAssetSource()</code></a></ul><li><a href=#type-definitions class="table-of-contents__link toc-highlight">Type Definitions</a><ul><li><a href=#imagecacheenum-ios class="table-of-contents__link toc-highlight">ImageCacheEnum <div class="label ios">iOS</div></a><li><a href=#imageloadevent class="table-of-contents__link toc-highlight">ImageLoadEvent</a><li><a href=#imagesource class="table-of-contents__link toc-highlight">ImageSource</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>