zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-12 22:14:20 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a4833ba17237753473bb8528350379efb79d203d
react-native-web/docs-preview/docs/interactions/index.html
T
Nicolas Gallagher 0f7628717f Deploy documentation
2021-02-02 16:32:58 -08:00

3 lines
48 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Interactions</title><meta name="description" content=""><link rel="icon" href="/static/logo.svg"><style>:root{--docs-spacing-1:0.25rem;--docs-spacing-2:0.5rem;--docs-spacing-3:0.75rem;--docs-spacing-4:1rem;--docs-spacing-5:1.25rem;--docs-spacing-6:1.5rem;--docs-spacing-8:2rem;--docs-spacing-10:2.5rem;--docs-spacing-12:3rem;--docs-spacing-16:4rem;--docs-spacing-20:5rem;--docs-spacing-40:10rem;--docs-spacing-60:15rem;--docs-spacing-64:16rem;--docs-spacing-72:18rem;--docs-spacing-80:20rem;--docs-font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--docs-font-size:14px;--docs-heading-size:2em;--docs-line-height:1.5;--docs-ring-inset:var(--tw-empty,/*!*/ /*!*/);--docs-ring-offset-width:0px}@media (min-width:1088px){:root{--docs-font-size:16px;--docs-heading-size:2.25em}}@media all{:root{--docs-bg-color:#fff;--docs-border-color:#e5e5e5;--docs-border-color-faint:#e5e5e5;--docs-text-color:#333;--docs-text-color-faint:#6b7280;--docs-heading-color:#111;--docs-link-color:#1977f2;--docs-code-color:#111;--docs-callout-bg-color:#fff3cd;--docs-callout-border-color:#ffd402;--docs-theme-color:#1977f2;--docs-theme-color-faint:#1977f250;--docs-theme-color-faded:#1977f20f;--docs-ring-color:rgba(59, 130, 246, 0.5);--docs-ring-offset-color:#fff;--docs-ring-offset-shadow:0 0 #0000;--docs-ring-shadow:0 0 #0000;--docs-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}}@media (prefers-color-scheme:dark){:root{--docs-bg-color:#15202b;--docs-border-color:#26395a;--docs-border-color-faint:#26395a;--docs-text-color:#eee;--docs-text-color-faint:#aaa;--docs-heading-color:#fff;--docs-link-color:#6b94f3;--docs-code-color:#fff;--docs-callout-bg-color:#231f00;--docs-ring-color:rgba(59, 130, 246, 0.5);--docs-ring-offset-color:#fff;--docs-ring-offset-shadow:0 0 #0000;--docs-ring-shadow:0 0 #0000;--docs-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}}html{font:var(--docs-font-size)/var(--docs-line-height) var(--docs-font-family)}body{background-color:var(--docs-bg-color, transparent);color:var(--docs-text-color, #333);margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}hr{box-sizing:content-box;height:0}img{border-style:none}iframe,img,svg,video{display:block}img,video{max-width:100%;height:auto}svg:not(:root){overflow:hidden}table{border-collapse:collapse}:not(:focus-visible){outline-width:0}.markdown a,a{color:var(--docs-link-color);text-decoration:underline}h1,h2,h3,h4,h5,h6{color:var(--docs-heading-color)}.text,.view{background-color:transparent;border:0 solid #000;box-sizing:border-box;margin:0;padding:0;text-decoration:none}.text{color:var(--docs-text-color);display:inline;font-family:var(--docs-font-family);white-space:pre-wrap;word-wrap:break-word}.view{align-items:stretch;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:relative;z-index:0}.emoji{height:1.2em;margin:0 .075em!important;display:inline-block}.container{max-width:760px}.navigation{left:auto;right:100%}.before-middot::before{display:inline-block;content:"";width:3px;height:3px;background-color:currentColor;border-radius:9999px;margin:0 7px 0 -10px;vertical-align:middle}.prop{margin-top:var(--docs-spacing-5);margin-bottom:var(--docs-spacing-5)}.prop p{margin:0!important}.callout{background-color:var(--docs-callout-bg-color);border-bottom-right-radius:.5rem;border-top-right-radius:.5rem;border-left:3px solid var(--docs-callout-border-color);margin:var(--docs-spacing-12) 0 var(--docs-spacing-4);padding:var(--docs-spacing-2) var(--docs-spacing-8)}.markdown{line-height:1.75;font-size:1.125rem;word-wrap:break-word}.markdown h1{font-weight:800;font-size:var(--docs-heading-size);margin:0 0 var(--docs-spacing-8);line-height:1.1}.markdown h2{font-weight:700;font-size:1.5em;margin:var(--docs-spacing-12) 0 var(--docs-spacing-6);line-height:1.3}.markdown h2+*,.markdown hr+*{margin-top:0}.markdown h3{font-weight:600;margin:var(--docs-spacing-8) 0 var(--docs-spacing-3)}.markdown h2,.markdown h3,.markdown h4{scroll-margin-top:1em}.markdown h1:hover .header-anchor,.markdown h2:hover .header-anchor,.markdown h3:hover .header-anchor{opacity:1}.markdown .header-anchor{opacity:0;text-decoration:none}.markdown .lead,.markdown h3{font-size:1.25em;line-height:1.5}.markdown hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid var(--docs-border-color-faint);margin:var(--docs-spacing-12) 0}.markdown table{border-collapse:collapse;text-indent:0;border-color:inherit;width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7}.markdown thead{font-weight:600;border-bottom:1px solid var(--docs-border-color)}.markdown thead th{vertical-align:bottom;padding:0 .5em .5em}.markdown tbody td:first-child,.markdown thead th:first-child{padding-left:0}.markdown tbody tr{border-bottom:1px solid var(--docs-border-color-faint)}.markdown tbody td{vertical-align:top;padding:.5em}.markdown code{color:var(--docs-code-color);font-weight:600;font-size:.875em}.markdown p,.markdown ul{margin:1.25em 0}.markdown ol{padding:0;margin:1.25em 0 1.25em 1em}.markdown ul{padding:0;list-style:none}.markdown li{margin:.5em 0}.markdown ul>li{position:relative;padding-left:1.75em}.markdown ul>li::before{content:"";position:absolute;background-color:currentColor;border-radius:50%;width:.375em;height:.375em;top:calc(.875em - .1875em);left:.25em}.markdown pre{max-width:100%;color:#000;tab-size:2;overflow-x:auto;font-size:1em;line-height:1.7;margin:1.5em 0;border-radius:.375rem;padding:.85em 1.15em}.markdown blockquote{font-weight:500;font-style:italic;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.border{border-width:1px;border-style:solid}.border-none{border:0}.border-top{border-top-width:1px;border-top-style:solid}.border-right{border-right-width:1px;border-right-style:solid}.border-left{border-left-width:1px;border-left-style:solid}.border-bottom{border-bottom-width:1px;border-bottom-style:solid}.border-left-3{border-width:3px}.block{display:block}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.rounded{border-radius:var(--docs-spacing-1, 0.25rem)}.rounded-full{border-radius:9999px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.font-bold{font-weight:700}.font-normal{font-weight:400}.font-mono{font-family:monospace,monospace;font-size:1em}.font-semibold{font-weight:600}.h-12{height:var(--docs-spacing-12)}.h-full{height:100%}.h-screen{height:100vh}.list-none{list-style:none}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:var(--docs-spacing-2);margin-bottom:var(--docs-spacing-2)}.my-8{margin-top:var(--docs-spacing-8);margin-bottom:var(--docs-spacing-8)}.ml-2{margin-left:var(--docs-spacing-2)}.mt-2{margin-top:var(--docs-spacing-2)}.mt-4{margin-top:var(--docs-spacing-4)}.mt-6{margin-top:var(--docs-spacing-6)}.mt-12{margin-top:var(--docs-spacing-12)}.mr-2{margin-right:var(--docs-spacing-2)}.mr-4{margin-right:var(--docs-spacing-4)}.mb-2{margin-bottom:var(--docs-spacing-2)}.mb-4{margin-bottom:var(--docs-spacing-4)}.mb-8{margin-bottom:var(--docs-spacing-8)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.p-6{padding:var(--docs-spacing-6)}.px-1{padding-left:var(--docs-spacing-1);padding-right:var(--docs-spacing-1)}.px-3{padding-left:var(--docs-spacing-3);padding-right:var(--docs-spacing-3)}.px-4{padding-left:var(--docs-spacing-4);padding-right:var(--docs-spacing-4)}.px-6{padding-left:var(--docs-spacing-6);padding-right:var(--docs-spacing-6)}.py-1{padding-top:var(--docs-spacing-1);padding-bottom:var(--docs-spacing-1)}.py-2{padding-top:var(--docs-spacing-2);padding-bottom:var(--docs-spacing-2)}.py-3{padding-top:var(--docs-spacing-3);padding-bottom:var(--docs-spacing-3)}.py-4{padding-top:var(--docs-spacing-4);padding-bottom:var(--docs-spacing-4)}.pl-5{padding-left:var(--docs-spacing-5)}.pt-1{padding-top:var(--docs-spacing-1)}.pt-8{padding-top:var(--docs-spacing-8)}.pt-12{padding-top:var(--docs-spacing-12)}.pb-1{padding-bottom:var(--docs-spacing-1)}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.fixed{position:fixed}.overflow-ellipsis{overflow:hidden;text-overflow:ellipsis}.text-uppercase{text-transform:uppercase}.text-sm,.text-xl{font-size:.875rem;line-height:1.25}.text-xl{font-size:1.25rem}.text-2xl,.text-3xl{font-size:2rem;line-height:1.25}.text-3xl{font-size:3rem}.w-auto{width:auto}.w-40{width:var(--docs-spacing-40)}.w-72{width:var(--docs-spacing-72)}.w-full{width:100%}.whitespace-nowrap{white-space:nowrap}.z-10{z-index:10}.z-20{z-index:20}.fill-current{fill:currentColor}.inset-y-0{top:0;bottom:0}.no-underline{text-decoration:none}.ring-opacity-50{--docs-ring-opacity:0.5}.bg-theme{background-color:var(--docs-bg-color)}.border-color-faint{border-color:var(--docs-border-color-faint)}.border-theme-faint{border-color:var(--docs-theme-color-faint)}.text-color{color:var(--docs-text-color)}.text-color-faint{color:var(--docs-text-color-faint)}.text-white{--docs-text-opacity:1;color:rgba(255,255,255,var(--docs-text-opacity))}.hover\:opacity-100:hover{opacity:1}.hover\:text-color-inherit:hover{color:inherit}@media (min-width:1088px){.container{max-width:1400px}.navigation{right:auto}.wide\:block{display:block}.wide\:flex{display:flex}.wide\:hidden{display:none}.wide\:flex-row{flex-direction:row}.wide\:sticky{position:sticky}.wide\:opacity-0{opacity:0}.wide\:opacity-1{opacity:1}.wide\:left-0{left:0}.wide\:right-0{right:0}.wide\:top-16{top:var(--docs-spacing-16)}.wide\:px-20{padding-left:var(--docs-spacing-20);padding-right:var(--docs-spacing-20)}.wide\:px-40{padding-left:var(--docs-spacing-40);padding-right:var(--docs-spacing-40)}}</style><link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://unpkg.com/prismjs@1.20.0/themes/prism.css"><link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css"><script defer="defer">function setupNavigationDrawer(){const t=document.getElementById("navigation"),n=document.getElementById("close-nav"),e=document.getElementById("show-nav");let o=!1;function i(){t.classList.add("opacity-0"),n.classList.add("hidden"),t.style.right=null,e.classList.remove("hidden"),o=!1}null!=n&&null!=e&&null!=t&&(e.addEventListener("click",function(){t.classList.remove("opacity-0"),t.style.right="auto",e.classList.add("hidden"),n.classList.remove("hidden"),o=!0}),document.addEventListener("click",n=>{!o||t.contains(n.target)||e.contains(n.target)||i()}),document.addEventListener("keydown",t=>{o&&"Escape"===t.key&&i()}))}function setupNavigationScroll(){const t=document.getElementById("navigation-scroller");if(null==t)return;window.addEventListener("unload",function(){const n=t.scrollTop;localStorage.setItem("navScrollPosition",n)});const n=localStorage.getItem("navScrollPosition");null!=n&&(t.scrollTop=n)}document.addEventListener("DOMContentLoaded",function(){setupNavigationDrawer(),setupNavigationScroll()});</script></head><body><div id="app" class="container mx-auto"><div class="view"><div class="view fixed wide:hidden z-20" style="right:30px; bottom:30px;"><button id="show-nav" aria-label="Show navigation" class="view appearance-none rounded-full items-center justify-center text-white cursor-pointer" style="background-color:var(--docs-theme-color); width:4rem; height:4rem; padding:5px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" fill="currentColor" class="w-full fill-current"><path d="M367.6 192.9c-3.8-1.3-7.7-2.5-11.7-3.7.7-2.7 1.3-5.4 1.8-8 8.9-43.2 3.1-78-16.8-89.4-19-11-50.2.5-81.6 27.8-3 2.6-6.1 5.4-9.1 8.3-2-1.9-4-3.8-6-5.6-33-29.3-66-41.6-85.8-30.1-19 11-24.7 43.7-16.7 84.6.8 4 1.7 8 2.7 12.1-4.7 1.3-9.2 2.7-13.5 4.2-38.6 13.5-63.3 34.6-63.3 56.5 0 22.6 26.5 45.3 66.7 59.1 3.2 1.1 6.5 2.1 9.9 3.1-1.1 4.4-2.1 8.8-2.9 13-7.6 40.2-1.7 72.1 17.3 83.1 19.6 11.3 52.5-.3 84.5-28.3 2.5-2.2 5.1-4.6 7.6-7 3.3 3.2 6.6 6.2 9.9 9 31 26.7 61.7 37.5 80.6 26.5 19.6-11.3 25.9-45.6 17.7-87.4-.6-3.2-1.4-6.4-2.2-9.8 2.3-.7 4.6-1.4 6.8-2.1 41.8-13.9 69.1-36.3 69.1-59.2-.1-21.9-25.6-43.1-65-56.7zm-9.1 101.2c-2 .7-4 1.3-6.1 1.9-4.6-14.6-10.9-30.2-18.5-46.2 7.3-15.7 13.3-31 17.8-45.6 3.7 1.1 7.4 2.2 10.9 3.4 33.8 11.6 54.4 28.8 54.4 42.1-.1 14.1-22.3 32.4-58.5 44.4zm-15 29.7c3.7 18.5 4.2 35.1 1.8 48.2-2.2 11.7-6.5 19.5-12 22.7-11.5 6.7-36.1-2-62.6-24.8-3-2.6-6.1-5.4-9.2-8.4 10.3-11.2 20.6-24.3 30.6-38.8 17.6-1.6 34.3-4.1 49.4-7.6.8 2.9 1.5 5.8 2 8.7zm-151.6 69.7c-11.2 4-20.2 4.1-25.6 1-11.5-6.6-16.3-32.3-9.8-66.7.7-3.9 1.6-8 2.7-12.1 15 3.3 31.5 5.7 49.2 7.1 10.1 14.2 20.7 27.3 31.3 38.7-2.3 2.2-4.6 4.4-7 6.4-14.1 12.4-28.3 21.2-40.8 25.6zM139.3 294c-17.8-6.1-32.5-14-42.6-22.6-9.1-7.8-13.6-15.4-13.6-21.7 0-13.3 19.8-30.2 52.9-41.8 4-1.4 8.2-2.7 12.6-4 4.6 14.9 10.6 30.4 17.8 46.1-7.3 15.9-13.4 31.7-18 46.8-3.2-.9-6.2-1.8-9.1-2.8zm17.6-120.1c-6.9-35.1-2.3-61.5 9.2-68.1 12.2-7.1 39.2 3 67.7 28.3 1.8 1.6 3.6 3.3 5.5 5.1-10.6 11.4-21.1 24.4-31.1 38.5-17.2 1.6-33.6 4.1-48.7 7.6-1-4-1.8-7.8-2.6-11.4zm157.5 38.8c-3.6-6.2-7.3-12.3-11.1-18.3 11.6 1.5 22.8 3.4 33.3 5.8-3.1 10.1-7.1 20.6-11.7 31.4-3.3-6.1-6.8-12.5-10.5-18.9zm-64.2-62.5c7.2 7.8 14.4 16.5 21.5 25.9-7.1-.3-14.4-.5-21.7-.5-7.2 0-14.4.2-21.5.5 7.1-9.3 14.4-18 21.7-25.9zm-64.6 62.7c-3.6 6.3-7 12.6-10.3 18.9-4.5-10.8-8.4-21.4-11.6-31.6 10.4-2.3 21.5-4.2 33.1-5.7-3.9 5.9-7.6 12.1-11.2 18.4zm11.5 93.1c-12-1.3-23.2-3.1-33.6-5.4 3.2-10.4 7.2-21.2 11.8-32.2 3.3 6.3 6.7 12.6 10.3 18.9 3.7 6.4 7.5 12.6 11.5 18.7zm53.5 44.3c-7.4-8-14.8-16.8-22-26.3 7 .3 14.1.4 21.4.4 7.4 0 14.8-.2 22-.5-7.1 9.7-14.3 18.5-21.4 26.4zm74.4-82.5c4.9 11.1 9 21.9 12.3 32.1-10.6 2.4-22 4.4-34 5.8 3.8-6 7.5-12.2 11.2-18.6 3.7-6.4 7.2-12.8 10.5-19.3zm-24.1 11.6c-5.7 9.9-11.6 19.3-17.5 28.3-10.8.8-22 1.2-33.4 1.2-11.4 0-22.4-.4-33-1-6.2-9-12.2-18.5-17.8-28.3-5.7-9.8-10.9-19.6-15.6-29.4 4.7-9.8 9.9-19.7 15.5-29.4 5.6-9.8 11.6-19.2 17.7-28.2 10.9-.8 22-1.2 33.2-1.2 11.3 0 22.4.4 33.3 1.3 6 8.9 11.9 18.3 17.6 28.1 5.7 9.9 11 19.7 15.7 29.3-4.7 9.5-10 19.4-15.7 29.3zm32.2-174.1c12.2 7 17 35.5 9.3 72.8-.5 2.4-1 4.8-1.6 7.3-15.1-3.5-31.6-6.1-48.8-7.7-10-14.3-20.4-27.3-30.9-38.5 2.8-2.7 5.6-5.3 8.4-7.7 26.9-23.6 52.1-32.8 63.6-26.2zM250 217.1c18 0 32.6 14.6 32.6 32.6S268 282.3 250 282.3s-32.6-14.6-32.6-32.6 14.6-32.6 32.6-32.6z"/></svg></button> <button id="close-nav" aria-label="Close navigation" class="view appearance-none hidden rounded-full items-center justify-center text-white cursor-pointer" style="background-color:var(--docs-theme-color); width:4rem; height:4rem; padding:10px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="currentColor" class="w-full"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"/></svg></button></div><div class="view flex-row flex-nowrap relative"><div id="navigation" class="navigation view fixed wide:sticky wide:left-0 z-10 opacity-0 wide:opacity-1 h-screen inset-y-0 w-72 border-right border-color-faint bg-theme"><nav id="navigation-scroller" class="view overflow-x-hidden overflow-y-auto h-full p-6 pt-12"><h1 class="m-0 mb-4" style="font-size:1rem;"><a class="view no-underline group font-semibold" href="/" style="color:var(--docs-theme-color)"><span class="view flex-row items-center overflow-x-hidden mb-1 text-xl">React Native for Web </span><span>react-native-web@0.14.11</span></a></h1><ul class="view list-none mt-6"><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Getting started</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/" style="padding:2px 10px; margin:-2px -10px;">Introduction</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/installation/" style="padding:2px 10px; margin:-2px -10px;">Installation</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/multi-platform/" style="padding:2px 10px; margin:-2px -10px;">Multi-platform</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/browser-compatibility/" style="padding:2px 10px; margin:-2px -10px;">Browser compatibility</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/react-native-compatibility/" style="padding:2px 10px; margin:-2px -10px;">React Native compatibility</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/help/" style="padding:2px 10px; margin:-2px -10px;">Help</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Main concepts</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/accessibility/" style="padding:2px 10px; margin:-2px -10px;">Accessibility <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block font-semibold text-color-inherit" href="/docs/interactions/" style="padding:2px 10px; margin:-2px -10px;
background-color:var(--docs-theme-color-faded); border-left:3px solid var(--docs-theme-color); margin-left:-13px; border-radius:0 0.25rem 0.25rem 0;">Interactions</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/localization/" style="padding:2px 10px; margin:-2px -10px;">Localization</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/rendering/" style="padding:2px 10px; margin:-2px -10px;">Rendering</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/styling/" style="padding:2px 10px; margin:-2px -10px;">Styling</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Components</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/activity-indicator/" style="padding:2px 10px; margin:-2px -10px;">ActivityIndicator</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/button/" style="padding:2px 10px; margin:-2px -10px;">Button</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/checkbox/" style="padding:2px 10px; margin:-2px -10px;">CheckBox</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/image/" style="padding:2px 10px; margin:-2px -10px;">Image</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/image-background/" style="padding:2px 10px; margin:-2px -10px;">ImageBackground</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/lists/" style="padding:2px 10px; margin:-2px -10px;">Lists</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/modal/" style="padding:2px 10px; margin:-2px -10px;">Modal <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#86b300; color:#86b300; font-weight:normal">New</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/picker/" style="padding:2px 10px; margin:-2px -10px;">Picker</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/pressable/" style="padding:2px 10px; margin:-2px -10px;">Pressable <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#86b300; color:#86b300; font-weight:normal">New</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/progress-bar/" style="padding:2px 10px; margin:-2px -10px;">ProgressBar</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/scroll-view/" style="padding:2px 10px; margin:-2px -10px;">ScrollView</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/switch/" style="padding:2px 10px; margin:-2px -10px;">Switch</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/text/" style="padding:2px 10px; margin:-2px -10px;">Text <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/text-input/" style="padding:2px 10px; margin:-2px -10px;">TextInput</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/touchables/" style="padding:2px 10px; margin:-2px -10px;">Touchables</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/view/" style="padding:2px 10px; margin:-2px -10px;">View <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">APIs</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/animated/" style="padding:2px 10px; margin:-2px -10px;">Animated</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/app-registry/" style="padding:2px 10px; margin:-2px -10px;">AppRegistry</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/app-state/" style="padding:2px 10px; margin:-2px -10px;">AppState</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/appearance/" style="padding:2px 10px; margin:-2px -10px;">Appearance</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/clipboard/" style="padding:2px 10px; margin:-2px -10px;">Clipboard</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/dimensions/" style="padding:2px 10px; margin:-2px -10px;">Dimensions</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/i18n-manager/" style="padding:2px 10px; margin:-2px -10px;">I18nManager <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/linking/" style="padding:2px 10px; margin:-2px -10px;">Linking <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/pan-responder/" style="padding:2px 10px; margin:-2px -10px;">PanResponder</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/pixel-ratio/" style="padding:2px 10px; margin:-2px -10px;">PixelRatio</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/platform/" style="padding:2px 10px; margin:-2px -10px;">Platform</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/style-sheet/" style="padding:2px 10px; margin:-2px -10px;">StyleSheet</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/vibration/" style="padding:2px 10px; margin:-2px -10px;">Vibration</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Hooks</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/use-color-scheme/" style="padding:2px 10px; margin:-2px -10px;">useColorScheme</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/use-window-dimensions/" style="padding:2px 10px; margin:-2px -10px;">useWindowDimensions</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Appendix</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/unstable-apis/" style="padding:2px 10px; margin:-2px -10px;">Unstable APIs</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/docs/about-project/" style="padding:2px 10px; margin:-2px -10px;">About the project</a></li></ul></li></ul></nav></div><main id="main" class="view flex-1"><div class="view w-full mt-12 px-4 wide:px-20"><article class="markdown"><h1>Interactions</h1><div class="lead"><p>Interactions and gestures for the web.</p></div><p>React Native for Web extends the interaction modes available in React Native to account for mouse, touch, and keyboard use. The Responder System is available for more advanced gesture recognition.</p><hr><h2 id="click-props-api">Click Props API <a class="header-anchor" href="#click-props-api">#</a></h2><p>Click interactions are available on supporting elements. These events are React DOM synthetic mouse events. The <code>click</code> events may be dispatched by the browser following user interactions with a pointer (mouse or touch) as well as a keyboard.</p><p>In cases where a native <code>click</code> is not dispatched following a valid keyboard interaction (due to the native semantics of the host element), it will be emulated by React Native for Web. This helps to improve the accessibility of elements for all forms of interaction hardware.</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onClick</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: MouseEvent) =&gt; void</span><p>Called when the element is clicked.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onClickCapture</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: MouseEvent) =&gt; void</span><p>Called when the element is clicked. (Capture phase.)</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onContextMenu</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: MouseEvent) =&gt; void</span><p>Called when a native context menu is displayed. This may be in response to mouse, touch, or mouse+keyboard interaction.</p></div><hr><h2 id="focus-props-api">Focus Props API <a class="header-anchor" href="#focus-props-api">#</a></h2><p>Focus interactions are available on supporting elements. The focus events are React DOM synthetic focus events. These events are also fired in response to focus being programmatically moved.</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onBlur</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: FocusEvent) =&gt; void</span><p>Called when the element loses focus.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onFocus</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: FocusEvent) =&gt; void</span><p>Called when the element receives focus.</p></div><hr><h2 id="keyboard-props-api">Keyboard Props API <a class="header-anchor" href="#keyboard-props-api">#</a></h2><p>Keyboard interactions are available on supporting elements. The keyboard events are React DOM synthetic keyboard events.</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onKeyDown</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: KeyboardEvent) =&gt; void</span><p>Called when a key is pressed down.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onKeyDownCapture</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: KeyboardEvent) =&gt; void</span><p>Called when a key is pressed down. (Capture phase.)</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onKeyUp</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: KeyboardEvent) =&gt; void</span><p>Called when a key is released.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onKeyUpCapture</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: KeyboardEvent) =&gt; void</span><p>Called when a key is released. (Capture phase.)</p></div><hr><h2 id="responder-props-api">Responder Props API <a class="header-anchor" href="#responder-props-api">#</a></h2><p>“Responder” interactions are available on supporting elements. The Responder System allows views and gesture recognizers to opt-in to negotiating over a single, global “interaction lock”. For a view to become the “responder” means that pointer interactions are exclusive to that view and none other. A view can negotiate to become the “responder” without requiring knowledge of other views. A more specialized API for working with multi-pointer gestures is available by using the <a href="/docs/pan-responder">PanResponder</a> module.</p><p>A view can become the “responder” after the following native events: <code>scroll</code>, <code>touchstart</code>, <code>touchmove</code>, <code>mousedown</code>, <code>mousemove</code>. If nothing is already the “responder”, the event propagates to (capture) and from (bubble) the event target until a view returns <code>true</code> for <code>on*SetResponder(Capture)</code>. If a view is <em>currently</em> the responder, the negotiation event propagates to (capture) and from (bubble) the lowest common ancestor of the event target and the current responder. Then negotiation happens between the current responder and the view that wants to become the responder.</p><p>NOTE: For historical reasons (originating from React Native), mouse interactions are represented as a single <code>touch</code>.</p><h3 id="negotiation-props">Negotiation props <a class="header-anchor" href="#negotiation-props">#</a></h3><p>A view can become the responder by using the negotiation callbacks. During the capture phase the deepest node is called last. During the bubble phase the deepest node is called first. The capture phase should be used when a view wants to prevent a descendant from becoming the responder. The first view to return <code>true</code> from any of the <code>on*ShouldSetResponderCapture</code> / <code>on*ShouldSetResponder</code> callbacks will either become the responder or enter into negotiation with the existing responder.</p><p>N.B. If <code>stopPropagation</code> is called on the event for any of the negotiation callbakcs, it only stops further negotiation within the Responder System. It will not stop the propagation of the native event (which has already bubbled to the <code>document</code> by this time.)</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onStartShouldSetResponder</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>On <code>pointerdown</code>, should this view attempt to become the responder? If the view is not the responder, this callback may be called for every pointer start on the view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onStartShouldSetResponderCapture</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>On <code>pointerdown</code>, should this view attempt to become the responder during the capture phase? If the view is not the responder, this callback may be called for every pointer start on the view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onMoveShouldSetResponder</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>On <code>pointermove</code> for an active pointer, should this view attempt to become the responder? If the view is not the responder, this callback may be called for every pointer move on the view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onMoveShouldSetResponderCapture</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>On <code>pointermove</code> for an active pointer, should this view attempt to become the responder during the capture phase? If the view is not the responder, this callback may be called for every pointer move on the view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onScrollShouldSetResponder</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>On <code>scroll</code>, should this view attempt to become the responder? If the view is not the responder, this callback may be called for every scroll of the view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onScrollShouldSetResponderCapture</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>On <code>scroll</code>, should this view attempt to become the responder during the capture phase? If the view is not the responder, this callback may be called for every scroll of the view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderTerminationRequest</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; boolean</span><p>The view is the responder, but another view now wants to become the responder. Should this view release the responder? Returning <code>true</code> allows the responder to be released.</p></div><h3 id="transfer-props">Transfer props <a class="header-anchor" href="#transfer-props">#</a></h3><p>If a view returns <code>true</code> for a negotiation callback then it will either become the responder (if none exists) or be involved in the responder transfer. The following callbacks are called only for the views involved in the responder transfer (i.e., no bubbling.)</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderGrant</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>The view is granted the responder and is now responding to pointer events. The lifecycle callbacks will be called for this view. This is the point at which you should provide visual feedback for users that the interaction has begun.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderReject</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>The view was not granted the responder. It was rejected because another view is already the responder and will not release it.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderTerminate</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>The responder has been taken from this view. It may have been taken by another view after a call to <code>onResponderTerminationRequest</code>, or it might have been taken by the browser without asking (e.g., window blur, document scroll, context menu open). This is the point at which you should provide visual feedback for users that the interaction has been cancelled.</p></div><h3 id="lifecycle-props">Lifecycle props <a class="header-anchor" href="#lifecycle-props">#</a></h3><p>If a view is the responder, the following callbacks will be called only for this view (i.e., no bubbling.) These callbacks are <em>always</em> bookended by <code>onResponderGrant</code> (before) and either <code>onResponderRelease</code> or <code>onResponderTerminate</code> (after).</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderStart</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>A pointer down event occured on the screen. The responder is notified of all start events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderMove</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>A pointer move event occured on the screen. The responder is notified of all move events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderEnd</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>A pointer up event occured on the screen. The responder is notified of all end events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">onResponderRelease</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(event: ResponderEvent) =&gt; void</span><p>As soon as there are no more pointers that <em>started</em> inside descendants of the responder, this callback is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over.</p></div><h3 id="responderevent">ResponderEvent <a class="header-anchor" href="#responderevent">#</a></h3><p>Every callback is called with a <code>ResponderEvent</code> event. Data dervied from the native events, e.g., the native <code>target</code> and pointer coordinates, can be used to determine the return value of the negotiation callbacks, etc.</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">currentTarget</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">EventTarget</span><p>The DOM element acting as the responder view.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">defaultPrevented</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">boolean</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">eventPhase</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">isDefaultPrevented</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">() =&gt; boolean</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">isPropagationStopped</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">() =&gt; boolean</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">isTrusted</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">boolean</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">nativeEvent</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">TouchEvent</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">target</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">EventTarget</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">timeStamp</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">touchHistory</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">TouchHistory</span><p>An object containing information about the history of touches.</p></div><h4>TouchHistory</h4><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">indexOfSingleActiveTouch</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">mostRecentTimeStamp</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">numberActiveTouches</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">touchBank</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">TouchBank</span></div><h4>TouchBank</h4><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">currentPageX</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">currentPageY</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">currentTimeStamp</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">previousPageX</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">previousPageY</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">previousTimeStamp</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">startPageX</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">startPageY</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">startTimeStamp</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">touchActive</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">number</span></div></article><div class="flex mt-4"><div class="inline-block w-auto text-sm pt-1 pb-1 mr-2 rounded text-color-faint">Updated <time datetime="2021-02-02T01:26:20.563Z">February 1, 2021</time></div><a class="no-underline inline-block w-auto text-sm hover:bg-gray-200 py-1 px-3 rounded text-color-faint" href="https://github.com/necolas/react-native-web/edit/main/packages/www/./src/pages/docs/concepts/interactions.md" target="_blank">Edit</a></div><div class="view flex-row items-center mt-12 py-4 border-top border-color-faint"><a aria-label="Link to React Native for Web GitHub repository" class="inline-block mr-2 opacity-50 hover:opacity-100 text-color" style="width:20px;height:20px;vertical-align:middle;" rel="noopener noreferrer" href="https://github.com/necolas/react-native-web" target="_blank"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-full"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><div class="text text-sm text-color-faint"><a class="no-underline" href="/">React Native for Web</a> – <span>Copyright © Facebook Inc.</span></div></div></div></main></div></div></div></body></html>
Reference in New Issue View Git Blame Copy Permalink