callstack__react-native-testing-library/static/js/async/8750.3a76bcc032.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8750"],{9645(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"custom-render-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,r.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,r.jsxs)(e.h3,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsxs)(e.p,{children:["RNTL exposes the ",(0,r.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,r.jsxs)(e.h3,{id:"example",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  theme"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}</"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Example ",(0,r.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"more-info",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,r.jsxs)(e.h4,{id:"additional-params",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,r.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  renderScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"multiple-functions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,r.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"async-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-function",children:"#"}),"Async function"]}),"\n",(0,r.jsx)(e.p,{children:"Make it async if you want to put some async setup in your custom render function."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-function",text:"Async function",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]);