callstack__react-native-testing-library/static/js/async/5507.7697238262.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["5507"],{3870(e,s,n){n.r(s),n.d(s,{default:()=>c});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"user-event-interactions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#user-event-interactions",children:"#"}),"User Event interactions"]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"RNTL minimal version",children:(0,r.jsx)(s.p,{children:"User Event interactions require RNTL v12.2.0 or later."})}),"\n",(0,r.jsxs)(s.h2,{id:"comparison-with-fire-event-api",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#comparison-with-fire-event-api",children:"#"}),"Comparison with Fire Event API"]}),"\n",(0,r.jsxs)(s.p,{children:["Fire Event is our original event simulation API. It can invoke ",(0,r.jsx)(s.strong,{children:"any event handler"})," declared on ",(0,r.jsx)(s.strong,{children:"either host or composite elements"}),". Suppose the element does not have ",(0,r.jsx)(s.code,{children:"onEventName"})," event handler for the passed ",(0,r.jsx)(s.code,{children:"eventName"})," event, or the element is disabled. In that case, Fire Event will traverse up the component tree, looking for an event handler on both host and composite elements along the way. By default, it will ",(0,r.jsx)(s.strong,{children:"not pass any event data"}),", but the user might provide it in the last argument."]}),"\n",(0,r.jsxs)(s.p,{children:["In contrast, User Event provides realistic event simulation for user interactions like ",(0,r.jsx)(s.code,{children:"press"})," or ",(0,r.jsx)(s.code,{children:"type"}),". Each interaction will trigger a ",(0,r.jsx)(s.strong,{children:"sequence of events"})," corresponding to React Native runtime behavior. These events will be invoked ",(0,r.jsx)(s.strong,{children:"only on host elements"}),", and ",(0,r.jsx)(s.strong,{children:"will automatically receive event data"})," corresponding to each event."]}),"\n",(0,r.jsx)(s.p,{children:"If User Event supports a given interaction, you should always prefer it over the Fire Event counterpart, as it will make your tests much more realistic and, hence, reliable. In other cases, e.g., when User Event does not support the given event or when invoking event handlers on composite elements, you have to use Fire Event as the only available option."}),"\n",(0,r.jsxs)(s.h2,{id:"setup",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#setup",children:"#"}),(0,r.jsx)(s.code,{children:"setup()"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  delay"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  advanceTimers: (delay"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<void>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})})})}),"\n",(0,r.jsx)(s.p,{children:"Creates a User Event object instance, which can be used to trigger events."}),"\n",(0,r.jsxs)(s.h3,{id:"setup-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#setup-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"delay"})," controls the default delay between subsequent events, e.g., keystrokes."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"advanceTimers"})," is a time advancement utility function that should be used for fake timers. The default setup handles both real timers and Jest fake timers."]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"press",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(s.code,{children:"press()"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  element: ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<void>"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This helper simulates a press on any pressable element, e.g. ",(0,r.jsx)(s.code,{children:"Pressable"}),", ",(0,r.jsx)(s.code,{children:"TouchableOpacity"}),", ",(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"}),", etc. Unlike ",(0,r.jsx)(s.code,{children:"fireEvent.press()"}),", a more straightforward API that will only call the ",(0,r.jsx)(s.code,{children:"onPress"})," prop, this function simulates the entire press interaction in a more realistic way by reproducing the event sequence emitted by React Native runtime. This helper will trigger additional events like ",(0,r.jsx)(s.code,{children:"pressIn"})," and ",(0,r.jsx)(s.code,{children:"pressOut"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This event will take a minimum of 130 ms to run due to the internal React Native logic. Consider using fake timers to speed up test execution for tests involving ",(0,r.jsx)(s.code,{children:"press"})," and ",(0,r.jsx)(s.code,{children:"longPress"})," interactions."]}),"\n",(0,r.jsxs)(s.h2,{id:"longpress",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#longpress",children:"#"}),(0,r.jsx)(s.code,{children:"longPress()"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"longPress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  element: ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  options: { duration"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { duration"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 500"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<void>"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".longPress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Simulates a long press user interaction. In React Native, the ",(0,r.jsx)(s.code,{children:"longPress"})," event is emitted when the press duration exceeds the long press threshold (by default, 500 ms). In other aspects, this action behaves similarly to regular ",(0,r.jsx)(s.code,{children:"press"})," action, e.g., by emitting ",(0,r.jsx)(s.code,{children:"pressIn"})," and ",(0,r.jsx)(s.code,{children:"pressOut"})," events. The press duration is customizable through the options. This should be useful if you use the ",(0,r.jsx)(s.code,{children:"delayLongPress"})," prop."]}),"\n",(0,r.jsxs)(s.p,{children:["This event will, by default, take 500 ms to run. Due to internal React Native logic, it will take at least 130 ms regardless of the duration option passed. Consider using fake timers to speed up test execution for tests involving ",(0,r.jsx)(s.code,{children:"press"})," and ",(0,r.jsx)(s.code,{children:"longPress"})," interactions."]}),"\n",(0,r.jsxs)(s.h3,{id:"longpress-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#longpress-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"duration"})," - duration of the press in milliseconds. The default value is 500 ms."]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#type",children:"#"}),(0,r.jsx)(s.code,{children:"type()"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  element: ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  text: string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    skipPress?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    skipBlur"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    submitEditing"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(textInput"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello world!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This helper simulates the user focusing on a ",(0,r.jsx)(s.code,{children:"TextInput"})," element, typing ",(0,r.jsx)(s.code,{children:"text"})," one character at a time, and leaving the element."]}),"\n",(0,r.jsxs)(s.p,{children:["This function supports only host ",(0,r.jsx)(s.code,{children:"TextInput"})," elements. Passing other element types will result in throwing an error."]}),"\n",(0,r.jsx)(l.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nThis function will add text to the text already present in the text input (as specified by ",(0,r.jsx)(s.code,{children:"value"})," or ",(0,r.jsx)(s.code,{children:"defaultValue"})," props). To replace existing text, use ",(0,r.jsx)(s.a,{href:"#clear",children:(0,r.jsx)(s.code,{children:"clear()"})})," helper first."]})}),"\n",(0,r.jsxs)(s.h3,{id:"type-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#type-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"skipPress"})," - if true, ",(0,r.jsx)(s.code,{children:"pressIn"})," and ",(0,r.jsx)(s.code,{children:"pressOut"})," events will not be triggered."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"skipBlur"})," - if true, ",(0,r.jsx)(s.code,{children:"endEditing"})," and ",(0,r.jsx)(s.code,{children:"blur"})," events will not be triggered when typing is complete."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"submitEditing"})," - if true, ",(0,r.jsx)(s.code,{children:"submitEditing"})," event will be triggered after typing the text."]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"type-sequence",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#type-sequence",children:"#"}),"Sequence of events"]}),"\n",(0,r.jsxs)(s.p,{children:["The sequence of events depends on the ",(0,r.jsx)(s.code,{children:"multiline"})," prop and the passed options."]}),"\n",(0,r.jsxs)(s.p,{children:["Events will not be emitted if the ",(0,r.jsx)(s.code,{children:"editable"})," prop is set to ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Entering the element"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"pressIn"})," (optional)"]}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"focus"})}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"pressOut"})," (optional)"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"pressIn"})," and ",(0,r.jsx)(s.code,{children:"pressOut"})," events are sent by default but can be skipped by passing the ",(0,r.jsx)(s.code,{children:"skipPress: true"})," option."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Typing (for each character)"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"keyPress"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"change"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"changeText"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"selectionChange"})}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"contentSizeChange"})," (only multiline)"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Leaving the element"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"submitEditing"})," (optional)"]}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"endEditing"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"blur"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"submitEditing"})," event is skipped by default. It can sent by setting the ",(0,r.jsx)(s.code,{children:"submitEditing: true"})," option.\nThe ",(0,r.jsx)(s.code,{children:"endEditing"})," and ",(0,r.jsx)(s.code,{children:"blur"})," events can be skipped by passing the ",(0,r.jsx)(s.code,{children:"skipBlur: true"})," option."]}),"\n",(0,r.jsxs)(s.h2,{id:"clear",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#clear",children:"#"}),(0,r.jsx)(s.code,{children:"clear()"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"clear"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  element: ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".clear"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(textInput);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This helper simulates the user clearing the content of a ",(0,r.jsx)(s.code,{children:"TextInput"})," element."]}),"\n",(0,r.jsxs)(s.p,{children:["This function supports only host ",(0,r.jsx)(s.code,{children:"TextInput"})," elements. Passing other element types will result in throwing an error."]}),"\n",(0,r.jsxs)(s.h3,{id:"clear-sequence",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#clear-sequence",children:"#"}),"Sequence of events"]}),"\n",(0,r.jsxs)(s.p,{children:["Events will not be emitted if the ",(0,r.jsx)(s.code,{children:"editable"})," prop is set to ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Entering the element"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"focus"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Selecting all content"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"selectionChange"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Pressing backspace"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"keyPress"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"change"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"changeText"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"selectionChange"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Leaving the element"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"endEditing"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"blur"})}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"paste",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#paste",children:"#"}),(0,r.jsx)(s.code,{children:"paste()"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"paste"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  element: ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  text: string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".paste"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(textInput"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Text to paste'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This helper simulates the user pasting given text to a ",(0,r.jsx)(s.code,{children:"TextInput"})," element."]}),"\n",(0,r.jsxs)(s.p,{children:["This function supports only host ",(0,r.jsx)(s.code,{children:"TextInput"})," elements. Passing other element types will result in throwing an error."]}),"\n",(0,r.jsxs)(s.h3,{id:"paste-sequence",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#paste-sequence",children:"#"}),"Sequence of events"]}),"\n",(0,r.jsxs)(s.p,{children:["Events will not be emitted if the ",(0,r.jsx)(s.code,{children:"editable"})," prop is set to ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Entering the element"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"focus"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Selecting all content"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"selectionChange"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Pasting the text"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"change"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"changeText"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"selectionChange"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Leaving the element"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"endEditing"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"blur"})}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"scroll-to",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll-to",children:"#"}),(0,r.jsx)(s.code,{children:"scrollTo()"})]}),"\n",(0,r.jsx)(l.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"scrollTo"})," interaction has been introduced in RNTL v12.4.0."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"scrollTo"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  element: ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  options: {"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    y"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    momentumY?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    contentSize?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { width"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" height"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    layoutMeasurement?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { width"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" height"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    x"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    momentumX?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    contentSize?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { width"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" height"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    layoutMeasurement?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { width"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" height"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"Example"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".scrollTo"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(scrollView"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { y"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" momentumY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This helper simulates the user scrolling a host ",(0,r.jsx)(s.code,{children:"ScrollView"})," element."]}),"\n",(0,r.jsxs)(s.p,{children:["This function supports only host ",(0,r.jsx)(s.code,{children:"ScrollView"})," elements, passing other element types will result in an error. Note that ",(0,r.jsx)(s.code,{children:"FlatList"})," is accepted as it renders to a host ",(0,r.jsx)(s.code,{children:"ScrollView"})," element."]}),"\n",(0,r.jsxs)(s.p,{children:["Scroll interaction should match the ",(0,r.jsx)(s.code,{children:"ScrollView"})," element direction:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["for a vertical scroll view (default or ",(0,r.jsx)(s.code,{children:"horizontal={false}"}),"), you should pass only the ",(0,r.jsx)(s.code,{children:"y"})," option (and optionally also ",(0,r.jsx)(s.code,{children:"momentumY"}),")."]}),"\n",(0,r.jsxs)(s.li,{children:["for a horizontal scroll view (",(0,r.jsx)(s.code,{children:"horizontal={true}"}),"), you should pass only the ",(0,r.jsx)(s.code,{children:"x"})," option (and optionally ",(0,r.jsx)(s.code,{children:"momentumX"}),")."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Each scroll interaction consists of a mandatory drag scroll part, which simulates the user dragging the scroll view with his finger (the ",(0,r.jsx)(s.code,{children:"y"})," or ",(0,r.jsx)(s.code,{children:"x"})," option). This may optionally be followed by a momentum scroll movement, which simulates the inertial movement of scroll view content after the user lifts his finger (",(0,r.jsx)(s.code,{children:"momentumY"})," or ",(0,r.jsx)(s.code,{children:"momentumX"})," options)."]}),"\n",(0,r.jsxs)(s.h3,{id:"scroll-to-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll-to-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"y"})," - target vertical drag scroll offset"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"x"})," - target horizontal drag scroll offset"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"momentumY"})," - target vertical momentum scroll offset"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"momentumX"})," - target horizontal momentum scroll offset"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"contentSize"})," - passed to ",(0,r.jsx)(s.code,{children:"ScrollView"})," events and enabling ",(0,r.jsx)(s.code,{children:"FlatList"})," updates"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"layoutMeasurement"})," - passed to ",(0,r.jsx)(s.code,{children:"ScrollView"})," events and enabling ",(0,r.jsx)(s.code,{children:"FlatList"})," updates"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"User Event will generate several intermediate scroll steps to simulate user scroll interaction. You should not rely on exact number or values of these scrolls steps as they might be change in the future version."}),"\n",(0,r.jsxs)(s.p,{children:["This function will remember where the last scroll ended, so subsequent scroll interaction will starts from that position. The initial scroll position will be assumed to be ",(0,r.jsx)(s.code,{children:"{ y: 0, x: 0 }"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["To simulate a ",(0,r.jsx)(s.code,{children:"FlatList"})," (and other controls based on ",(0,r.jsx)(s.code,{children:"VirtualizedList"}),") scrolling, you should pass the ",(0,r.jsx)(s.code,{children:"contentSize"})," and ",(0,r.jsx)(s.code,{children:"layoutMeasurement"})," options, which enable the underlying logic to update the currently visible window."]}),"\n",(0,r.jsxs)(s.h3,{id:"scroll-sequence",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll-sequence",children:"#"}),"Sequence of events"]}),"\n",(0,r.jsx)(s.p,{children:"The sequence of events depends on whether the scroll includes an optional momentum scroll component."}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Drag scroll"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"contentSizeChange"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"scrollBeginDrag"})}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"scroll"})," (multiple events)"]}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"scrollEndDrag"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Momentum scroll (optional)"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"momentumScrollBegin"})}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"scroll"})," (multiple events)"]}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:"momentumScrollEnd"})}),"\n"]})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fevents%2Fuser-event.mdx"]={toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2},{id:"setup",text:"`setup()`",depth:2},{id:"setup-options",text:"Options",depth:3},{id:"press",text:"`press()`",depth:2},{id:"longpress",text:"`longPress()`",depth:2},{id:"longpress-options",text:"Options",depth:3},{id:"type",text:"`type()`",depth:2},{id:"type-options",text:"Options",depth:3},{id:"type-sequence",text:"Sequence of events",depth:3},{id:"clear",text:"`clear()`",depth:2},{id:"clear-sequence",text:"Sequence of events",depth:3},{id:"paste",text:"`paste()`",depth:2},{id:"paste-sequence",text:"Sequence of events",depth:3},{id:"scroll-to",text:"`scrollTo()`",depth:2},{id:"scroll-to-options",text:"Options",depth:3},{id:"scroll-sequence",text:"Sequence of events",depth:3}],title:"User Event interactions",headingTitle:"User Event interactions",frontmatter:{}}}}]);