mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
43 lines
65 KiB
HTML
43 lines
65 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.70">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom 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=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">View · React Native</title><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="View · React Native"><meta data-react-helmet="true" name="description" content="The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, `, android.view`, etc."><meta data-react-helmet="true" property="og:description" content="The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, `, android.view`, etc."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/view"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/view"><link rel="stylesheet" href="/styles.9eb50f2e.css">
|
|
<link rel="stylesheet" href="/main.3de2b5ef.css">
|
|
<link rel="preload" href="/styles.1b71bc8a.js" as="script">
|
|
<link rel="preload" href="/runtime~main.7976414b.js" as="script">
|
|
<link rel="preload" href="/main.a86670cb.js" as="script">
|
|
<link rel="preload" href="/1.4dffec5b.js" as="script">
|
|
<link rel="preload" href="/2.8fcdf5b9.js" as="script">
|
|
<link rel="preload" href="/939.c1f14adb.js" as="script">
|
|
<link rel="preload" href="/ee5b3385.4c5f7c00.js" as="script">
|
|
<link rel="preload" href="/17896441.81f68a15.js" as="script">
|
|
<link rel="preload" href="/f2dc4d96.9f47a83c.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav aria-label="Skip navigation links"><button type="button" tabindex="0" class="skipToContent_3aLp">Skip to main content</button></nav><nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg aria-label="Menu" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/view">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/view">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/view">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/view">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/view">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link navbar__link--active" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</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="react-toggle react-toggle--disabled displayOnlyInLargeViewport_Bh6k"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_1UDy">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_1UDy">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><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"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/view">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/view">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/view">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/view">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/view">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1mVJ"><div class="docSidebarContainer_uPTz" role="complementary"><div class="sidebar_M-Lc"><div class="menu menu--responsive thin-scrollbar menu_tgpy"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_1e05" width="24" height="24" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Core Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/components-and-apis">Core Components and APIs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/activityindicator">ActivityIndicator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/button">Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/flatlist">FlatList</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/imagebackground">ImageBackground</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/modal">Modal</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/pressable">Pressable</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/refreshcontrol">RefreshControl</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/scrollview">ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/sectionlist">SectionList</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/statusbar">StatusBar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/switch">Switch</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/text">Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/textinput">TextInput</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/touchablehighlight">TouchableHighlight</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/touchableopacity">TouchableOpacity</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/view">View</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/virtualizedlist">VirtualizedList</a></li><li class="menu__list-item"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">Android Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/touchablenativefeedback">TouchableNativeFeedback</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">iOS Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/inputaccessoryview">InputAccessoryView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/maskedviewios">🚧 MaskedViewIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/safeareaview">SafeAreaView</a></li></ul></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Props</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/image-style-props">Image Style Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/layout-props">Layout Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/shadow-props">Shadow Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/text-style-props">Text Style Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/view-style-props">View Style Props</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Object Types</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/pressevent">PressEvent Object Type</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/react-node">React Node Object Type</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/rect">Rect Object Type</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1zi2"><div class="container padding-vert--lg docItemWrapper_1hMI"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">View</h1></header><div class="markdown"><p>The most fundamental component for building a UI, <code>View</code> is a container that supports layout with <a href="/docs/flexbox">flexbox</a>, <a href="/docs/style">style</a>, <a href="/docs/handling-touches">some touch handling</a>, and <a href="/docs/accessibility">accessibility</a> controls. <code>View</code> maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a <code>UIView</code>, <code><div></code>, <code>android.view</code>, etc.</p><p><code>View</code> is designed to be nested inside other views and can have 0 to many children of any type.</p><p>This example creates a <code>View</code> that wraps two boxes with color and a text component in a row with padding.</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_2uuE tabs__item--active">Function Component</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_2uuE">Class Component</li></ul><div class="margin-vert--md"><div role="tabpanel"><div class="snack-player" data-snack-name="View Function Component Example" data-snack-description="Example usage" data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20View%2C%20Text%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20ViewBoxesWithColorAndText%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%0A%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20height%3A%20100%2C%0A%20%20%20%20%20%20%20%20padding%3A%2020%0A%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%20backgroundColor%3A%20%22blue%22%2C%20flex%3A%200.3%20%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%20backgroundColor%3A%20%22red%22%2C%20flex%3A%200.5%20%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EHello%20World!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20ViewBoxesWithColorAndText%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div></div><div role="tabpanel" hidden=""><div class="snack-player" data-snack-name="View Class Component Example" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20View%2C%20Text%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%20%20height%3A%20100%2C%0A%20%20%20%20%20%20%20%20%20%20padding%3A%2020%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7B%20backgroundColor%3A%20%22blue%22%2C%20flex%3A%200.3%20%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7B%20backgroundColor%3A%20%22red%22%2C%20flex%3A%200.5%20%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%20World!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20App%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div></div></div></div><blockquote><p><code>View</code>s are designed to be used with <a href="/docs/style"><code>StyleSheet</code></a> for clarity and performance, although inline styles are also supported.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="synthetic-touch-events"></a>Synthetic Touch Events<a class="hash-link" href="#synthetic-touch-events" title="Direct link to heading">#</a></h3><p>For <code>View</code> responder props (e.g., <code>onResponderMove</code>), the synthetic touch event passed to them are in form of <a href="/docs/pressevent">PressEvent</a>.</p><hr><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="reference"></a>Reference<a class="hash-link" href="#reference" title="Direct link to heading">#</a></h1><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="props"></a>Props<a class="hash-link" href="#props" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onstartshouldsetresponder"></a><code>onStartShouldSetResponder</code><a class="hash-link" href="#onstartshouldsetresponder" title="Direct link to heading">#</a></h3><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessible"></a><code>accessible</code><a class="hash-link" href="#accessible" title="Direct link to heading">#</a></h3><p>When <code>true</code>, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>bool</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilitylabel"></a><code>accessibilityLabel</code><a class="hash-link" href="#accessibilitylabel" title="Direct link to heading">#</a></h3><p>Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the <code>Text</code> nodes separated by space.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityhint"></a><code>accessibilityHint</code><a class="hash-link" href="#accessibilityhint" title="Direct link to heading">#</a></h3><p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityrole"></a><code>accessibilityRole</code><a class="hash-link" href="#accessibilityrole" title="Direct link to heading">#</a></h3><p><code>accessibilityRole</code> communicates the purpose of a component to the user of an assistive technology.</p><p><code>accessibilityRole</code> can be one of the following:</p><ul><li><code>'none'</code> - Used when the element has no role.</li><li><code>'button'</code> - Used when the element should be treated as a button.</li><li><code>'link'</code> - Used when the element should be treated as a link.</li><li><code>'search'</code> - Used when the text field element should also be treated as a search field.</li><li><code>'image'</code> - Used when the element should be treated as an image. Can be combined with button or link, for example.</li><li><code>'keyboardkey'</code> - Used when the element acts as a keyboard key.</li><li><code>'text'</code> - Used when the element should be treated as static text that cannot change.</li><li><code>'adjustable'</code> - Used when an element can be "adjusted" (e.g. a slider).</li><li><code>'imagebutton'</code> - Used when the element should be treated as a button and is also an image.</li><li><code>'header'</code> - Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li><li><code>'summary'</code> - Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li><li><code>'alert'</code> - Used when an element contains important text to be presented to the user.</li><li><code>'checkbox'</code> - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.</li><li><code>'combobox'</code> - Used when an element represents a combo box, which allows the user to select among several choices.</li><li><code>'menu'</code> - Used when the component is a menu of choices.</li><li><code>'menubar'</code> - Used when a component is a container of multiple menus.</li><li><code>'menuitem'</code> - Used to represent an item within a menu.</li><li><code>'progressbar'</code> - Used to represent a component which indicates progress of a task.</li><li><code>'radio'</code> - Used to represent a radio button.</li><li><code>'radiogroup'</code> - Used to represent a group of radio buttons.</li><li><code>'scrollbar'</code> - Used to represent a scroll bar.</li><li><code>'spinbutton'</code> - Used to represent a button which opens a list of choices.</li><li><code>'switch'</code> - Used to represent a switch which can be turned on and off.</li><li><code>'tab'</code> - Used to represent a tab.</li><li><code>'tablist'</code> - Used to represent a list of tabs.</li><li><code>'timer'</code> - Used to represent a timer.</li><li><code>'toolbar'</code> - Used to represent a tool bar (a container of action buttons or components).</li></ul><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilitystate"></a><code>accessibilityState</code><a class="hash-link" href="#accessibilitystate" title="Direct link to heading">#</a></h3><p>Describes the current state of a component to the user of an assistive technology.</p><p>See the <a href="/docs/accessibility#accessibilitystate-ios-android">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityvalue"></a><code>accessibilityValue</code><a class="hash-link" href="#accessibilityvalue" title="Direct link to heading">#</a></h3><p>Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).</p><p>See the <a href="/docs/accessibility#accessibilityvalue-ios-android">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>object: {min: number, max: number, now: number, text: string}</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityactions"></a><code>accessibilityActions</code><a class="hash-link" href="#accessibilityactions" title="Direct link to heading">#</a></h3><p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The <code>accessibilityActions</code> property should contain a list of action objects. Each action object should contain the field name and label.</p><p>See the <a href="/docs/accessibility#accessibility-actions">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>array</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onaccessibilityaction"></a><code>onAccessibilityAction</code><a class="hash-link" href="#onaccessibilityaction" title="Direct link to heading">#</a></h3><p>Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.</p><p>See the <a href="/docs/accessibility#accessibility-actions">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onaccessibilitytap"></a><code>onAccessibilityTap</code><a class="hash-link" href="#onaccessibilitytap" title="Direct link to heading">#</a></h3><p>When <code>accessible</code> is true, the system will try to invoke this function when the user performs accessibility tap gesture.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onmagictap"></a><code>onMagicTap</code><a class="hash-link" href="#onmagictap" title="Direct link to heading">#</a></h3><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the user performs the magic tap gesture.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>function</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onaccessibilityescape"></a><code>onAccessibilityEscape</code><a class="hash-link" href="#onaccessibilityescape" title="Direct link to heading">#</a></h3><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the user performs the escape gesture.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>function</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityviewismodal"></a><code>accessibilityViewIsModal</code><a class="hash-link" href="#accessibilityviewismodal" title="Direct link to heading">#</a></h3><p>A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is <code>false</code>.</p><p>See the <a href="/docs/accessibility#accessibilityviewismodal-ios">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>bool</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityelementshidden"></a><code>accessibilityElementsHidden</code><a class="hash-link" href="#accessibilityelementshidden" title="Direct link to heading">#</a></h3><p>A value indicating whether the accessibility elements contained within this accessibility element are hidden. Default is <code>false</code>.</p><p>See the <a href="/docs/accessibility#accessibilityelementshidden-ios">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>bool</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityignoresinvertcolors"></a><code>accessibilityIgnoresInvertColors</code><a class="hash-link" href="#accessibilityignoresinvertcolors" title="Direct link to heading">#</a></h3><p>A value indicating this view should or should not be inverted when color inversion is turned on. A value of <code>true</code> will tell the view to not be inverted even if color inversion is turned on.</p><p>See the <a href="/docs/accessibility#accessibilityignoresinvertcolors">Accessibility guide</a> for more information.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>bool</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="accessibilityliveregion"></a><code>accessibilityLiveRegion</code><a class="hash-link" href="#accessibilityliveregion" title="Direct link to heading">#</a></h3><p>Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:</p><ul><li><code>'none'</code> - Accessibility services should not announce changes to this view.</li><li><code>'polite'</code>- Accessibility services should announce changes to this view.</li><li><code>'assertive'</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank" rel="noopener noreferrer">Android <code>View</code> docs</a> for reference.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>enum('none', 'polite', 'assertive')</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="importantforaccessibility"></a><code>importantForAccessibility</code><a class="hash-link" href="#importantforaccessibility" title="Direct link to heading">#</a></h3><p>Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility - default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility, nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank" rel="noopener noreferrer">Android <code>importantForAccessibility</code> docs</a> for reference.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>enum('auto', 'yes', 'no', 'no-hide-descendants')</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="hitslop"></a><code>hitSlop</code><a class="hash-link" href="#hitslop" title="Direct link to heading">#</a></h3><p>This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to 40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.</p></blockquote><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>object: {top: number, left: number, bottom: number, right: number}</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="nativeid"></a><code>nativeID</code><a class="hash-link" href="#nativeid" title="Direct link to heading">#</a></h3><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onlayout"></a><code>onLayout</code><a class="hash-link" href="#onlayout" title="Direct link to heading">#</a></h3><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onmoveshouldsetresponder"></a><code>onMoveShouldSetResponder</code><a class="hash-link" href="#onmoveshouldsetresponder" title="Direct link to heading">#</a></h3><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onmoveshouldsetrespondercapture"></a><code>onMoveShouldSetResponderCapture</code><a class="hash-link" href="#onmoveshouldsetrespondercapture" title="Direct link to heading">#</a></h3><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move, it should have this handler which returns <code>true</code>.</p><p><code>View.props.onMoveShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onrespondergrant"></a><code>onResponderGrant</code><a class="hash-link" href="#onrespondergrant" title="Direct link to heading">#</a></h3><p>The View is now responding for touch events. This is the time to highlight and show the user what is happening.</p><p><code>View.props.onResponderGrant: (event) => {}</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onrespondermove"></a><code>onResponderMove</code><a class="hash-link" href="#onrespondermove" title="Direct link to heading">#</a></h3><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) => {}</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onresponderreject"></a><code>onResponderReject</code><a class="hash-link" href="#onresponderreject" title="Direct link to heading">#</a></h3><p>Another responder is already active and will not release it to that <code>View</code> asking to be the responder.</p><p><code>View.props.onResponderReject: (event) => {}</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onresponderrelease"></a><code>onResponderRelease</code><a class="hash-link" href="#onresponderrelease" title="Direct link to heading">#</a></h3><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) => {}</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onresponderterminate"></a><code>onResponderTerminate</code><a class="hash-link" href="#onresponderterminate" title="Direct link to heading">#</a></h3><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to <code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) => {}</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onresponderterminationrequest"></a><code>onResponderTerminationRequest</code><a class="hash-link" href="#onresponderterminationrequest" title="Direct link to heading">#</a></h3><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its responder. Returning <code>true</code> allows its release.</p><p><code>View.props.onResponderTerminationRequest: (event) => {}</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="onstartshouldsetrespondercapture"></a><code>onStartShouldSetResponderCapture</code><a class="hash-link" href="#onstartshouldsetrespondercapture" title="Direct link to heading">#</a></h3><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start, it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a <a href="/docs/pressevent">PressEvent</a>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>function</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="pointerevents"></a><code>pointerEvents</code><a class="hash-link" href="#pointerevents" title="Direct link to heading">#</a></h3><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS:</li></ul><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">box</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">none </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> pointer</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">events</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> none</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">box</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">none </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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> pointer</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">events</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> auto</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><ul><li><code>'box-only'</code>: The view can be the target of touch events but its subviews cannot be. It behaves like if the view had the following classes in CSS:</li></ul><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">box</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">only </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> pointer</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">events</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> auto</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">box</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">only </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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> pointer</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">events</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> none</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><blockquote><p>Since <code>pointerEvents</code> does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to implement it as a <code>className</code> anyways. Using <code>style</code> or not is an implementation detail of the platform.</p></blockquote><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('box-none', 'none', 'box-only', 'auto')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="removeclippedsubviews"></a><code>removeClippedSubviews</code><a class="hash-link" href="#removeclippedsubviews" title="Direct link to heading">#</a></h3><p>This is a reserved performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>bool</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="style"></a><code>style</code><a class="hash-link" href="#style" title="Direct link to heading">#</a></h3><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><a href="/docs/view-style-props">view styles</a></td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="testid"></a><code>testID</code><a class="hash-link" href="#testid" title="Direct link to heading">#</a></h3><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="collapsable"></a><code>collapsable</code><a class="hash-link" href="#collapsable" title="Direct link to heading">#</a></h3><p>Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to <code>false</code> to disable this optimization and ensure that this <code>View</code> exists in the native view hierarchy.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>bool</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="needsoffscreenalphacompositing"></a><code>needsOffscreenAlphaCompositing</code><a class="hash-link" href="#needsoffscreenalphacompositing" title="Direct link to heading">#</a></h3><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (<code>false</code>) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value. This default may be noticeable and undesired in the case where the <code>View</code> you are setting an opacity on has multiple overlapping elements (e.g. multiple overlapping <code>View</code>s, or text and a background).</p><p>Rendering offscreen to preserve correct alpha behavior is extremely expensive and hard to debug for non-native developers, which is why it is not turned on by default. If you do need to enable this property for an animation, consider combining it with renderToHardwareTextureAndroid if the view <strong>contents</strong> are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>bool</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="rendertohardwaretextureandroid"></a><code>renderToHardwareTextureAndroid</code><a class="hash-link" href="#rendertohardwaretextureandroid" title="Direct link to heading">#</a></h3><p>Whether this <code>View</code> should render itself (and all of its children) into a single hardware texture on the GPU.</p><p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>bool</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="shouldrasterizeios"></a><code>shouldRasterizeIOS</code><a class="hash-link" href="#shouldrasterizeios" title="Direct link to heading">#</a></h3><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite it during each frame.</p><p>Rasterization incurs an off-screen drawing pass and the bitmap consumes memory. Test and measure when using this property.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>bool</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="nextfocusdown"></a><code>nextFocusDown</code><a class="hash-link" href="#nextfocusdown" title="Direct link to heading">#</a></h3><p>Designates the next view to receive focus when the user navigates down. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown" target="_blank" rel="noopener noreferrer">Android documentation</a>.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>number</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="nextfocusforward"></a><code>nextFocusForward</code><a class="hash-link" href="#nextfocusforward" title="Direct link to heading">#</a></h3><p>Designates the next view to receive focus when the user navigates forward. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward" target="_blank" rel="noopener noreferrer">Android documentation</a>.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>number</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="nextfocusleft"></a><code>nextFocusLeft</code><a class="hash-link" href="#nextfocusleft" title="Direct link to heading">#</a></h3><p>Designates the next view to receive focus when the user navigates left. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft" target="_blank" rel="noopener noreferrer">Android documentation</a>.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>number</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="nextfocusright"></a><code>nextFocusRight</code><a class="hash-link" href="#nextfocusright" title="Direct link to heading">#</a></h3><p>Designates the next view to receive focus when the user navigates right. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight" target="_blank" rel="noopener noreferrer">Android documentation</a>.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>number</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="nextfocusup"></a><code>nextFocusUp</code><a class="hash-link" href="#nextfocusup" title="Direct link to heading">#</a></h3><p>Designates the next view to receive focus when the user navigates up. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp" target="_blank" rel="noopener noreferrer">Android documentation</a>.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>number</td><td>No</td><td>Android</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="focusable"></a><code>focusable</code><a class="hash-link" href="#focusable" title="Direct link to heading">#</a></h3><p>Whether this <code>View</code> should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>boolean</td><td>No</td><td>Android</td></tr></tbody></table></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.63/view.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 40 40" class="iconEdit_2Hwv"><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"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/touchablewithoutfeedback"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« TouchableWithoutFeedback</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/virtualizedlist"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">VirtualizedList »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_1zTD thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#synthetic-touch-events" class="table-of-contents__link">Synthetic Touch Events</a></li><li><a href="#props" class="table-of-contents__link">Props</a><ul><li><a href="#onstartshouldsetresponder" class="table-of-contents__link"><code>onStartShouldSetResponder</code></a></li><li><a href="#accessible" class="table-of-contents__link"><code>accessible</code></a></li><li><a href="#accessibilitylabel" class="table-of-contents__link"><code>accessibilityLabel</code></a></li><li><a href="#accessibilityhint" class="table-of-contents__link"><code>accessibilityHint</code></a></li><li><a href="#accessibilityrole" class="table-of-contents__link"><code>accessibilityRole</code></a></li><li><a href="#accessibilitystate" class="table-of-contents__link"><code>accessibilityState</code></a></li><li><a href="#accessibilityvalue" class="table-of-contents__link"><code>accessibilityValue</code></a></li><li><a href="#accessibilityactions" class="table-of-contents__link"><code>accessibilityActions</code></a></li><li><a href="#onaccessibilityaction" class="table-of-contents__link"><code>onAccessibilityAction</code></a></li><li><a href="#onaccessibilitytap" class="table-of-contents__link"><code>onAccessibilityTap</code></a></li><li><a href="#onmagictap" class="table-of-contents__link"><code>onMagicTap</code></a></li><li><a href="#onaccessibilityescape" class="table-of-contents__link"><code>onAccessibilityEscape</code></a></li><li><a href="#accessibilityviewismodal" class="table-of-contents__link"><code>accessibilityViewIsModal</code></a></li><li><a href="#accessibilityelementshidden" class="table-of-contents__link"><code>accessibilityElementsHidden</code></a></li><li><a href="#accessibilityignoresinvertcolors" class="table-of-contents__link"><code>accessibilityIgnoresInvertColors</code></a></li><li><a href="#accessibilityliveregion" class="table-of-contents__link"><code>accessibilityLiveRegion</code></a></li><li><a href="#importantforaccessibility" class="table-of-contents__link"><code>importantForAccessibility</code></a></li><li><a href="#hitslop" class="table-of-contents__link"><code>hitSlop</code></a></li><li><a href="#nativeid" class="table-of-contents__link"><code>nativeID</code></a></li><li><a href="#onlayout" class="table-of-contents__link"><code>onLayout</code></a></li><li><a href="#onmoveshouldsetresponder" class="table-of-contents__link"><code>onMoveShouldSetResponder</code></a></li><li><a href="#onmoveshouldsetrespondercapture" class="table-of-contents__link"><code>onMoveShouldSetResponderCapture</code></a></li><li><a href="#onrespondergrant" class="table-of-contents__link"><code>onResponderGrant</code></a></li><li><a href="#onrespondermove" class="table-of-contents__link"><code>onResponderMove</code></a></li><li><a href="#onresponderreject" class="table-of-contents__link"><code>onResponderReject</code></a></li><li><a href="#onresponderrelease" class="table-of-contents__link"><code>onResponderRelease</code></a></li><li><a href="#onresponderterminate" class="table-of-contents__link"><code>onResponderTerminate</code></a></li><li><a href="#onresponderterminationrequest" class="table-of-contents__link"><code>onResponderTerminationRequest</code></a></li><li><a href="#onstartshouldsetrespondercapture" class="table-of-contents__link"><code>onStartShouldSetResponderCapture</code></a></li><li><a href="#pointerevents" class="table-of-contents__link"><code>pointerEvents</code></a></li><li><a href="#removeclippedsubviews" class="table-of-contents__link"><code>removeClippedSubviews</code></a></li><li><a href="#style" class="table-of-contents__link"><code>style</code></a></li><li><a href="#testid" class="table-of-contents__link"><code>testID</code></a></li><li><a href="#collapsable" class="table-of-contents__link"><code>collapsable</code></a></li><li><a href="#needsoffscreenalphacompositing" class="table-of-contents__link"><code>needsOffscreenAlphaCompositing</code></a></li><li><a href="#rendertohardwaretextureandroid" class="table-of-contents__link"><code>renderToHardwareTextureAndroid</code></a></li><li><a href="#shouldrasterizeios" class="table-of-contents__link"><code>shouldRasterizeIOS</code></a></li><li><a href="#nextfocusdown" class="table-of-contents__link"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward" class="table-of-contents__link"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft" class="table-of-contents__link"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright" class="table-of-contents__link"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup" class="table-of-contents__link"><code>nextFocusUp</code></a></li><li><a href="#focusable" class="table-of-contents__link"><code>focusable</code></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_3cAK"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div class="footer__copyright">Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.1b71bc8a.js"></script>
|
|
<script src="/runtime~main.7976414b.js"></script>
|
|
<script src="/main.a86670cb.js"></script>
|
|
<script src="/1.4dffec5b.js"></script>
|
|
<script src="/2.8fcdf5b9.js"></script>
|
|
<script src="/939.c1f14adb.js"></script>
|
|
<script src="/ee5b3385.4c5f7c00.js"></script>
|
|
<script src="/17896441.81f68a15.js"></script>
|
|
<script src="/f2dc4d96.9f47a83c.js"></script>
|
|
</body>
|
|
</html> |