[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-use-dom":3,"mdc-ikxggi-key":36,"related-repo-openai-use-dom":6664,"related-org-openai-use-dom":6786},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"use-dom","run web code in Expo native apps","Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"React Native","react-native","tag",{"name":17,"slug":18,"type":15},"Expo","expo",{"name":20,"slug":21,"type":15},"Mobile","mobile",{"name":23,"slug":24,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-17T05:07:12.491029","MIT",465,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fexpo\u002Fskills\u002Fuse-dom","---\nname: use-dom\ndescription: Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.\nversion: 1.0.0\nlicense: MIT\n---\n\n## What are DOM Components?\n\nDOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like `recharts`, `react-syntax-highlighter`, or any React web library in your Expo app without modification.\n\n## When to Use DOM Components\n\nUse DOM components when you need:\n\n- **Web-only libraries** — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs\n- **Migrating web code** — Bring existing React web components to native without rewriting\n- **Complex HTML\u002FCSS layouts** — When CSS features aren't available in React Native\n- **iframes or embeds** — Embedding external content that requires a browser context\n- **Canvas or WebGL** — Web graphics APIs not available natively\n\n## When NOT to Use DOM Components\n\nAvoid DOM components when:\n\n- **Native performance is critical** — Webviews add overhead\n- **Simple UI** — React Native components are more efficient for basic layouts\n- **Deep native integration** — Use local modules instead for native APIs\n- **Layout routes** — `_layout` files cannot be DOM components\n\n## Basic DOM Component\n\nCreate a new file with the `'use dom';` directive at the top:\n\n```tsx\n\u002F\u002F components\u002FWebChart.tsx\n\"use dom\";\n\nexport default function WebChart({\n data,\n}: {\n data: number[];\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return (\n \u003Cdiv style={{ padding: 20 }}>\n \u003Ch2>Chart Data\u003C\u002Fh2>\n \u003Cul>\n {data.map((value, i) => (\n \u003Cli key={i}>{value}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Rules for DOM Components\n\n1. **Must have `'use dom';` directive** at the top of the file\n2. **Single default export** — One React component per file\n3. **Own file** — Cannot be defined inline or combined with native components\n4. **Serializable props only** — Strings, numbers, booleans, arrays, plain objects\n5. **Include CSS in the component file** — DOM components run in isolated context\n\n## The `dom` Prop\n\nEvery DOM component receives a special `dom` prop for webview configuration. Always type it in your props:\n\n```tsx\n\"use dom\";\n\ninterface Props {\n content: string;\n dom: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function MyComponent({ content }: Props) {\n return \u003Cdiv>{content}\u003C\u002Fdiv>;\n}\n```\n\n### Common `dom` Prop Options\n\n```tsx\n\u002F\u002F Disable body scrolling\n\u003CDOMComponent dom={{ scrollEnabled: false }} \u002F>\n\n\u002F\u002F Flow under the notch (disable safe area insets)\n\u003CDOMComponent dom={{ contentInsetAdjustmentBehavior: \"never\" }} \u002F>\n\n\u002F\u002F Control size manually\n\u003CDOMComponent dom={{ style: { width: 300, height: 400 } }} \u002F>\n\n\u002F\u002F Combine options\n\u003CDOMComponent\n dom={{\n scrollEnabled: false,\n contentInsetAdjustmentBehavior: \"never\",\n style: { width: '100%', height: 500 }\n }}\n\u002F>\n```\n\n## Exposing Native Actions to the Webview\n\nPass async functions as props to expose native functionality to the DOM component:\n\n```tsx\n\u002F\u002F app\u002Findex.tsx (native)\nimport { Alert } from \"react-native\";\nimport DOMComponent from \"@\u002Fcomponents\u002Fdom-component\";\n\nexport default function Screen() {\n return (\n \u003CDOMComponent\n showAlert={async (message: string) => {\n Alert.alert(\"From Web\", message);\n }}\n saveData={async (data: { name: string; value: number }) => {\n \u002F\u002F Save to native storage, database, etc.\n console.log(\"Saving:\", data);\n return { success: true };\n }}\n \u002F>\n );\n}\n```\n\n```tsx\n\u002F\u002F components\u002Fdom-component.tsx\n\"use dom\";\n\ninterface Props {\n showAlert: (message: string) => Promise\u003Cvoid>;\n saveData: (data: {\n name: string;\n value: number;\n }) => Promise\u003C{ success: boolean }>;\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function DOMComponent({ showAlert, saveData }: Props) {\n const handleClick = async () => {\n await showAlert(\"Hello from the webview!\");\n const result = await saveData({ name: \"test\", value: 42 });\n console.log(\"Save result:\", result);\n };\n\n return \u003Cbutton onClick={handleClick}>Trigger Native Action\u003C\u002Fbutton>;\n}\n```\n\n## Using Web Libraries\n\nDOM components can use any web library:\n\n```tsx\n\u002F\u002F components\u002Fsyntax-highlight.tsx\n\"use dom\";\n\nimport SyntaxHighlighter from \"react-syntax-highlighter\";\nimport { docco } from \"react-syntax-highlighter\u002Fdist\u002Fesm\u002Fstyles\u002Fhljs\";\n\ninterface Props {\n code: string;\n language: string;\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function SyntaxHighlight({ code, language }: Props) {\n return (\n \u003CSyntaxHighlighter language={language} style={docco}>\n {code}\n \u003C\u002FSyntaxHighlighter>\n );\n}\n```\n\n```tsx\n\u002F\u002F components\u002Fchart.tsx\n\"use dom\";\n\nimport {\n LineChart,\n Line,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n} from \"recharts\";\n\ninterface Props {\n data: Array\u003C{ name: string; value: number }>;\n dom: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function Chart({ data }: Props) {\n return (\n \u003CLineChart width={400} height={300} data={data}>\n \u003CCartesianGrid strokeDasharray=\"3 3\" \u002F>\n \u003CXAxis dataKey=\"name\" \u002F>\n \u003CYAxis \u002F>\n \u003CTooltip \u002F>\n \u003CLine type=\"monotone\" dataKey=\"value\" stroke=\"#8884d8\" \u002F>\n \u003C\u002FLineChart>\n );\n}\n```\n\n## CSS in DOM Components\n\nCSS imports must be in the DOM component file since they run in isolated context:\n\n```tsx\n\u002F\u002F components\u002Fstyled-component.tsx\n\"use dom\";\n\nimport \"@\u002Fstyles.css\"; \u002F\u002F CSS file in same directory\n\nexport default function StyledComponent({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return (\n \u003Cdiv className=\"container\">\n \u003Ch1 className=\"title\">Styled Content\u003C\u002Fh1>\n \u003C\u002Fdiv>\n );\n}\n```\n\nOr use inline styles \u002F CSS-in-JS:\n\n```tsx\n\"use dom\";\n\nconst styles = {\n container: {\n padding: 20,\n backgroundColor: \"#f0f0f0\",\n },\n title: {\n fontSize: 24,\n color: \"#333\",\n },\n};\n\nexport default function StyledComponent({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return (\n \u003Cdiv style={styles.container}>\n \u003Ch1 style={styles.title}>Styled Content\u003C\u002Fh1>\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Expo Router in DOM Components\n\nThe expo-router `\u003CLink \u002F>` component and router API work inside DOM components:\n\n```tsx\n\"use dom\";\n\nimport { Link, useRouter } from \"expo-router\";\n\nexport default function Navigation({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n const router = useRouter();\n\n return (\n \u003Cnav>\n \u003CLink href=\"\u002Fabout\">About\u003C\u002FLink>\n \u003Cbutton onClick={() => router.push(\"\u002Fsettings\")}>Settings\u003C\u002Fbutton>\n \u003C\u002Fnav>\n );\n}\n```\n\n### Router APIs That Require Props\n\nThese hooks don't work directly in DOM components because they need synchronous access to native routing state:\n\n- `useLocalSearchParams()`\n- `useGlobalSearchParams()`\n- `usePathname()`\n- `useSegments()`\n- `useRootNavigation()`\n- `useRootNavigationState()`\n\n**Solution:** Read these values in the native parent and pass as props:\n\n```tsx\n\u002F\u002F app\u002F[id].tsx (native)\nimport { useLocalSearchParams, usePathname } from \"expo-router\";\nimport DOMComponent from \"@\u002Fcomponents\u002Fdom-component\";\n\nexport default function Screen() {\n const { id } = useLocalSearchParams();\n const pathname = usePathname();\n\n return \u003CDOMComponent id={id as string} pathname={pathname} \u002F>;\n}\n```\n\n```tsx\n\u002F\u002F components\u002Fdom-component.tsx\n\"use dom\";\n\ninterface Props {\n id: string;\n pathname: string;\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function DOMComponent({ id, pathname }: Props) {\n return (\n \u003Cdiv>\n \u003Cp>Current ID: {id}\u003C\u002Fp>\n \u003Cp>Current Path: {pathname}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Detecting DOM Environment\n\nCheck if code is running in a DOM component:\n\n```tsx\n\"use dom\";\n\nimport { IS_DOM } from \"expo\u002Fdom\";\n\nexport default function Component({\n dom,\n}: {\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return \u003Cdiv>{IS_DOM ? \"Running in DOM component\" : \"Running natively\"}\u003C\u002Fdiv>;\n}\n```\n\n## Assets\n\nPrefer requiring assets instead of using the public directory:\n\n```tsx\n\"use dom\";\n\n\u002F\u002F Good - bundled with the component\nconst logo = require(\"..\u002Fassets\u002Flogo.png\");\n\nexport default function Component({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return \u003Cimg src={logo} alt=\"Logo\" \u002F>;\n}\n```\n\n## Usage from Native Components\n\nImport and use DOM components like regular components:\n\n```tsx\n\u002F\u002F app\u002Findex.tsx\nimport { View, Text } from \"react-native\";\nimport WebChart from \"@\u002Fcomponents\u002Fweb-chart\";\nimport CodeBlock from \"@\u002Fcomponents\u002Fcode-block\";\n\nexport default function HomeScreen() {\n return (\n \u003CView style={{ flex: 1 }}>\n \u003CText>Native content above\u003C\u002FText>\n\n \u003CWebChart data={[10, 20, 30, 40, 50]} dom={{ style: { height: 300 } }} \u002F>\n\n \u003CCodeBlock\n code=\"const x = 1;\"\n language=\"javascript\"\n dom={{ scrollEnabled: true }}\n \u002F>\n\n \u003CText>Native content below\u003C\u002FText>\n \u003C\u002FView>\n );\n}\n```\n\n## Platform Behavior\n\n| Platform | Behavior |\n| -------- | ----------------------------------- |\n| iOS | Rendered in WKWebView |\n| Android | Rendered in WebView |\n| Web | Rendered as-is (no webview wrapper) |\n\nOn web, the `dom` prop is ignored since no webview is needed.\n\n## Tips\n\n- DOM components hot reload during development\n- Keep DOM components focused — don't put entire screens in webviews\n- Use native components for navigation chrome, DOM components for specialized content\n- Test on all platforms — web rendering may differ slightly from native webviews\n- Large DOM components may impact performance — profile if needed\n- The webview has its own JavaScript context — cannot directly share state with native\n",{"data":37,"body":39},{"name":4,"description":6,"version":38,"license":28},"1.0.0",{"type":40,"children":41},"root",[42,51,74,80,85,141,147,152,203,209,222,725,731,792,806,818,1039,1053,1423,1429,1434,1888,2499,2505,2510,2906,3537,3543,3548,3860,3865,4310,4316,4329,4748,4754,4759,4816,4826,5092,5435,5441,5446,5705,5711,5716,5977,5983,5988,6535,6541,6608,6620,6626,6659],{"type":43,"tag":44,"props":45,"children":47},"element","h2",{"id":46},"what-are-dom-components",[48],{"type":49,"value":50},"text","What are DOM Components?",{"type":43,"tag":52,"props":53,"children":54},"p",{},[55,57,64,66,72],{"type":49,"value":56},"DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like ",{"type":43,"tag":58,"props":59,"children":61},"code",{"className":60},[],[62],{"type":49,"value":63},"recharts",{"type":49,"value":65},", ",{"type":43,"tag":58,"props":67,"children":69},{"className":68},[],[70],{"type":49,"value":71},"react-syntax-highlighter",{"type":49,"value":73},", or any React web library in your Expo app without modification.",{"type":43,"tag":44,"props":75,"children":77},{"id":76},"when-to-use-dom-components",[78],{"type":49,"value":79},"When to Use DOM Components",{"type":43,"tag":52,"props":81,"children":82},{},[83],{"type":49,"value":84},"Use DOM components when you need:",{"type":43,"tag":86,"props":87,"children":88},"ul",{},[89,101,111,121,131],{"type":43,"tag":90,"props":91,"children":92},"li",{},[93,99],{"type":43,"tag":94,"props":95,"children":96},"strong",{},[97],{"type":49,"value":98},"Web-only libraries",{"type":49,"value":100}," — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs",{"type":43,"tag":90,"props":102,"children":103},{},[104,109],{"type":43,"tag":94,"props":105,"children":106},{},[107],{"type":49,"value":108},"Migrating web code",{"type":49,"value":110}," — Bring existing React web components to native without rewriting",{"type":43,"tag":90,"props":112,"children":113},{},[114,119],{"type":43,"tag":94,"props":115,"children":116},{},[117],{"type":49,"value":118},"Complex HTML\u002FCSS layouts",{"type":49,"value":120}," — When CSS features aren't available in React Native",{"type":43,"tag":90,"props":122,"children":123},{},[124,129],{"type":43,"tag":94,"props":125,"children":126},{},[127],{"type":49,"value":128},"iframes or embeds",{"type":49,"value":130}," — Embedding external content that requires a browser context",{"type":43,"tag":90,"props":132,"children":133},{},[134,139],{"type":43,"tag":94,"props":135,"children":136},{},[137],{"type":49,"value":138},"Canvas or WebGL",{"type":49,"value":140}," — Web graphics APIs not available natively",{"type":43,"tag":44,"props":142,"children":144},{"id":143},"when-not-to-use-dom-components",[145],{"type":49,"value":146},"When NOT to Use DOM Components",{"type":43,"tag":52,"props":148,"children":149},{},[150],{"type":49,"value":151},"Avoid DOM components when:",{"type":43,"tag":86,"props":153,"children":154},{},[155,165,175,185],{"type":43,"tag":90,"props":156,"children":157},{},[158,163],{"type":43,"tag":94,"props":159,"children":160},{},[161],{"type":49,"value":162},"Native performance is critical",{"type":49,"value":164}," — Webviews add overhead",{"type":43,"tag":90,"props":166,"children":167},{},[168,173],{"type":43,"tag":94,"props":169,"children":170},{},[171],{"type":49,"value":172},"Simple UI",{"type":49,"value":174}," — React Native components are more efficient for basic layouts",{"type":43,"tag":90,"props":176,"children":177},{},[178,183],{"type":43,"tag":94,"props":179,"children":180},{},[181],{"type":49,"value":182},"Deep native integration",{"type":49,"value":184}," — Use local modules instead for native APIs",{"type":43,"tag":90,"props":186,"children":187},{},[188,193,195,201],{"type":43,"tag":94,"props":189,"children":190},{},[191],{"type":49,"value":192},"Layout routes",{"type":49,"value":194}," — ",{"type":43,"tag":58,"props":196,"children":198},{"className":197},[],[199],{"type":49,"value":200},"_layout",{"type":49,"value":202}," files cannot be DOM components",{"type":43,"tag":44,"props":204,"children":206},{"id":205},"basic-dom-component",[207],{"type":49,"value":208},"Basic DOM Component",{"type":43,"tag":52,"props":210,"children":211},{},[212,214,220],{"type":49,"value":213},"Create a new file with the ",{"type":43,"tag":58,"props":215,"children":217},{"className":216},[],[218],{"type":49,"value":219},"'use dom';",{"type":49,"value":221}," directive at the top:",{"type":43,"tag":223,"props":224,"children":229},"pre",{"className":225,"code":226,"language":227,"meta":228,"style":228},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F components\u002FWebChart.tsx\n\"use dom\";\n\nexport default function WebChart({\n data,\n}: {\n data: number[];\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return (\n \u003Cdiv style={{ padding: 20 }}>\n \u003Ch2>Chart Data\u003C\u002Fh2>\n \u003Cul>\n {data.map((value, i) => (\n \u003Cli key={i}>{value}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n","tsx","",[230],{"type":43,"tag":58,"props":231,"children":232},{"__ignoreMap":228},[233,245,270,280,312,327,341,371,421,434,448,492,529,545,606,656,670,687,704,717],{"type":43,"tag":234,"props":235,"children":238},"span",{"class":236,"line":237},"line",1,[239],{"type":43,"tag":234,"props":240,"children":242},{"style":241},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[243],{"type":49,"value":244},"\u002F\u002F components\u002FWebChart.tsx\n",{"type":43,"tag":234,"props":246,"children":248},{"class":236,"line":247},2,[249,255,261,265],{"type":43,"tag":234,"props":250,"children":252},{"style":251},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[253],{"type":49,"value":254},"\"",{"type":43,"tag":234,"props":256,"children":258},{"style":257},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[259],{"type":49,"value":260},"use dom",{"type":43,"tag":234,"props":262,"children":263},{"style":251},[264],{"type":49,"value":254},{"type":43,"tag":234,"props":266,"children":267},{"style":251},[268],{"type":49,"value":269},";\n",{"type":43,"tag":234,"props":271,"children":273},{"class":236,"line":272},3,[274],{"type":43,"tag":234,"props":275,"children":277},{"emptyLinePlaceholder":276},true,[278],{"type":49,"value":279},"\n",{"type":43,"tag":234,"props":281,"children":283},{"class":236,"line":282},4,[284,290,295,301,307],{"type":43,"tag":234,"props":285,"children":287},{"style":286},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[288],{"type":49,"value":289},"export",{"type":43,"tag":234,"props":291,"children":292},{"style":286},[293],{"type":49,"value":294}," default",{"type":43,"tag":234,"props":296,"children":298},{"style":297},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[299],{"type":49,"value":300}," function",{"type":43,"tag":234,"props":302,"children":304},{"style":303},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[305],{"type":49,"value":306}," WebChart",{"type":43,"tag":234,"props":308,"children":309},{"style":251},[310],{"type":49,"value":311},"({\n",{"type":43,"tag":234,"props":313,"children":315},{"class":236,"line":314},5,[316,322],{"type":43,"tag":234,"props":317,"children":319},{"style":318},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[320],{"type":49,"value":321}," data",{"type":43,"tag":234,"props":323,"children":324},{"style":251},[325],{"type":49,"value":326},",\n",{"type":43,"tag":234,"props":328,"children":330},{"class":236,"line":329},6,[331,336],{"type":43,"tag":234,"props":332,"children":333},{"style":251},[334],{"type":49,"value":335},"}:",{"type":43,"tag":234,"props":337,"children":338},{"style":251},[339],{"type":49,"value":340}," {\n",{"type":43,"tag":234,"props":342,"children":344},{"class":236,"line":343},7,[345,350,355,361,367],{"type":43,"tag":234,"props":346,"children":348},{"style":347},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[349],{"type":49,"value":321},{"type":43,"tag":234,"props":351,"children":352},{"style":251},[353],{"type":49,"value":354},":",{"type":43,"tag":234,"props":356,"children":358},{"style":357},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[359],{"type":49,"value":360}," number",{"type":43,"tag":234,"props":362,"children":364},{"style":363},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[365],{"type":49,"value":366},"[]",{"type":43,"tag":234,"props":368,"children":369},{"style":251},[370],{"type":49,"value":269},{"type":43,"tag":234,"props":372,"children":374},{"class":236,"line":373},8,[375,380,384,389,394,398,403,407,412,417],{"type":43,"tag":234,"props":376,"children":377},{"style":347},[378],{"type":49,"value":379}," dom",{"type":43,"tag":234,"props":381,"children":382},{"style":251},[383],{"type":49,"value":354},{"type":43,"tag":234,"props":385,"children":386},{"style":251},[387],{"type":49,"value":388}," import",{"type":43,"tag":234,"props":390,"children":391},{"style":363},[392],{"type":49,"value":393},"(",{"type":43,"tag":234,"props":395,"children":396},{"style":251},[397],{"type":49,"value":254},{"type":43,"tag":234,"props":399,"children":400},{"style":257},[401],{"type":49,"value":402},"expo\u002Fdom",{"type":43,"tag":234,"props":404,"children":405},{"style":251},[406],{"type":49,"value":254},{"type":43,"tag":234,"props":408,"children":409},{"style":363},[410],{"type":49,"value":411},").",{"type":43,"tag":234,"props":413,"children":414},{"style":357},[415],{"type":49,"value":416},"DOMProps",{"type":43,"tag":234,"props":418,"children":419},{"style":251},[420],{"type":49,"value":269},{"type":43,"tag":234,"props":422,"children":424},{"class":236,"line":423},9,[425,430],{"type":43,"tag":234,"props":426,"children":427},{"style":251},[428],{"type":49,"value":429},"})",{"type":43,"tag":234,"props":431,"children":432},{"style":251},[433],{"type":49,"value":340},{"type":43,"tag":234,"props":435,"children":437},{"class":236,"line":436},10,[438,443],{"type":43,"tag":234,"props":439,"children":440},{"style":286},[441],{"type":49,"value":442}," return",{"type":43,"tag":234,"props":444,"children":445},{"style":347},[446],{"type":49,"value":447}," (\n",{"type":43,"tag":234,"props":449,"children":451},{"class":236,"line":450},11,[452,457,462,467,472,477,481,487],{"type":43,"tag":234,"props":453,"children":454},{"style":251},[455],{"type":49,"value":456}," \u003C",{"type":43,"tag":234,"props":458,"children":459},{"style":347},[460],{"type":49,"value":461},"div",{"type":43,"tag":234,"props":463,"children":464},{"style":297},[465],{"type":49,"value":466}," style",{"type":43,"tag":234,"props":468,"children":469},{"style":251},[470],{"type":49,"value":471},"={{",{"type":43,"tag":234,"props":473,"children":474},{"style":347},[475],{"type":49,"value":476}," padding",{"type":43,"tag":234,"props":478,"children":479},{"style":251},[480],{"type":49,"value":354},{"type":43,"tag":234,"props":482,"children":484},{"style":483},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[485],{"type":49,"value":486}," 20",{"type":43,"tag":234,"props":488,"children":489},{"style":251},[490],{"type":49,"value":491}," }}>\n",{"type":43,"tag":234,"props":493,"children":495},{"class":236,"line":494},12,[496,501,505,510,515,520,524],{"type":43,"tag":234,"props":497,"children":498},{"style":251},[499],{"type":49,"value":500}," \u003C",{"type":43,"tag":234,"props":502,"children":503},{"style":347},[504],{"type":49,"value":44},{"type":43,"tag":234,"props":506,"children":507},{"style":251},[508],{"type":49,"value":509},">",{"type":43,"tag":234,"props":511,"children":512},{"style":363},[513],{"type":49,"value":514},"Chart Data",{"type":43,"tag":234,"props":516,"children":517},{"style":251},[518],{"type":49,"value":519},"\u003C\u002F",{"type":43,"tag":234,"props":521,"children":522},{"style":347},[523],{"type":49,"value":44},{"type":43,"tag":234,"props":525,"children":526},{"style":251},[527],{"type":49,"value":528},">\n",{"type":43,"tag":234,"props":530,"children":532},{"class":236,"line":531},13,[533,537,541],{"type":43,"tag":234,"props":534,"children":535},{"style":251},[536],{"type":49,"value":500},{"type":43,"tag":234,"props":538,"children":539},{"style":347},[540],{"type":49,"value":86},{"type":43,"tag":234,"props":542,"children":543},{"style":251},[544],{"type":49,"value":528},{"type":43,"tag":234,"props":546,"children":548},{"class":236,"line":547},14,[549,554,559,564,569,573,577,582,587,592,597,602],{"type":43,"tag":234,"props":550,"children":551},{"style":251},[552],{"type":49,"value":553}," {",{"type":43,"tag":234,"props":555,"children":556},{"style":363},[557],{"type":49,"value":558},"data",{"type":43,"tag":234,"props":560,"children":561},{"style":251},[562],{"type":49,"value":563},".",{"type":43,"tag":234,"props":565,"children":566},{"style":303},[567],{"type":49,"value":568},"map",{"type":43,"tag":234,"props":570,"children":571},{"style":363},[572],{"type":49,"value":393},{"type":43,"tag":234,"props":574,"children":575},{"style":251},[576],{"type":49,"value":393},{"type":43,"tag":234,"props":578,"children":579},{"style":318},[580],{"type":49,"value":581},"value",{"type":43,"tag":234,"props":583,"children":584},{"style":251},[585],{"type":49,"value":586},",",{"type":43,"tag":234,"props":588,"children":589},{"style":318},[590],{"type":49,"value":591}," i",{"type":43,"tag":234,"props":593,"children":594},{"style":251},[595],{"type":49,"value":596},")",{"type":43,"tag":234,"props":598,"children":599},{"style":297},[600],{"type":49,"value":601}," =>",{"type":43,"tag":234,"props":603,"children":604},{"style":363},[605],{"type":49,"value":447},{"type":43,"tag":234,"props":607,"children":609},{"class":236,"line":608},15,[610,615,619,624,629,634,639,643,648,652],{"type":43,"tag":234,"props":611,"children":612},{"style":251},[613],{"type":49,"value":614}," \u003C",{"type":43,"tag":234,"props":616,"children":617},{"style":347},[618],{"type":49,"value":90},{"type":43,"tag":234,"props":620,"children":621},{"style":297},[622],{"type":49,"value":623}," key",{"type":43,"tag":234,"props":625,"children":626},{"style":251},[627],{"type":49,"value":628},"={",{"type":43,"tag":234,"props":630,"children":631},{"style":363},[632],{"type":49,"value":633},"i",{"type":43,"tag":234,"props":635,"children":636},{"style":251},[637],{"type":49,"value":638},"}>{",{"type":43,"tag":234,"props":640,"children":641},{"style":363},[642],{"type":49,"value":581},{"type":43,"tag":234,"props":644,"children":645},{"style":251},[646],{"type":49,"value":647},"}\u003C\u002F",{"type":43,"tag":234,"props":649,"children":650},{"style":347},[651],{"type":49,"value":90},{"type":43,"tag":234,"props":653,"children":654},{"style":251},[655],{"type":49,"value":528},{"type":43,"tag":234,"props":657,"children":659},{"class":236,"line":658},16,[660,665],{"type":43,"tag":234,"props":661,"children":662},{"style":363},[663],{"type":49,"value":664}," ))",{"type":43,"tag":234,"props":666,"children":667},{"style":251},[668],{"type":49,"value":669},"}\n",{"type":43,"tag":234,"props":671,"children":673},{"class":236,"line":672},17,[674,679,683],{"type":43,"tag":234,"props":675,"children":676},{"style":251},[677],{"type":49,"value":678}," \u003C\u002F",{"type":43,"tag":234,"props":680,"children":681},{"style":347},[682],{"type":49,"value":86},{"type":43,"tag":234,"props":684,"children":685},{"style":251},[686],{"type":49,"value":528},{"type":43,"tag":234,"props":688,"children":690},{"class":236,"line":689},18,[691,696,700],{"type":43,"tag":234,"props":692,"children":693},{"style":251},[694],{"type":49,"value":695}," \u003C\u002F",{"type":43,"tag":234,"props":697,"children":698},{"style":347},[699],{"type":49,"value":461},{"type":43,"tag":234,"props":701,"children":702},{"style":251},[703],{"type":49,"value":528},{"type":43,"tag":234,"props":705,"children":707},{"class":236,"line":706},19,[708,713],{"type":43,"tag":234,"props":709,"children":710},{"style":347},[711],{"type":49,"value":712}," )",{"type":43,"tag":234,"props":714,"children":715},{"style":251},[716],{"type":49,"value":269},{"type":43,"tag":234,"props":718,"children":720},{"class":236,"line":719},20,[721],{"type":43,"tag":234,"props":722,"children":723},{"style":251},[724],{"type":49,"value":669},{"type":43,"tag":44,"props":726,"children":728},{"id":727},"rules-for-dom-components",[729],{"type":49,"value":730},"Rules for DOM Components",{"type":43,"tag":732,"props":733,"children":734},"ol",{},[735,752,762,772,782],{"type":43,"tag":90,"props":736,"children":737},{},[738,750],{"type":43,"tag":94,"props":739,"children":740},{},[741,743,748],{"type":49,"value":742},"Must have ",{"type":43,"tag":58,"props":744,"children":746},{"className":745},[],[747],{"type":49,"value":219},{"type":49,"value":749}," directive",{"type":49,"value":751}," at the top of the file",{"type":43,"tag":90,"props":753,"children":754},{},[755,760],{"type":43,"tag":94,"props":756,"children":757},{},[758],{"type":49,"value":759},"Single default export",{"type":49,"value":761}," — One React component per file",{"type":43,"tag":90,"props":763,"children":764},{},[765,770],{"type":43,"tag":94,"props":766,"children":767},{},[768],{"type":49,"value":769},"Own file",{"type":49,"value":771}," — Cannot be defined inline or combined with native components",{"type":43,"tag":90,"props":773,"children":774},{},[775,780],{"type":43,"tag":94,"props":776,"children":777},{},[778],{"type":49,"value":779},"Serializable props only",{"type":49,"value":781}," — Strings, numbers, booleans, arrays, plain objects",{"type":43,"tag":90,"props":783,"children":784},{},[785,790],{"type":43,"tag":94,"props":786,"children":787},{},[788],{"type":49,"value":789},"Include CSS in the component file",{"type":49,"value":791}," — DOM components run in isolated context",{"type":43,"tag":44,"props":793,"children":795},{"id":794},"the-dom-prop",[796,798,804],{"type":49,"value":797},"The ",{"type":43,"tag":58,"props":799,"children":801},{"className":800},[],[802],{"type":49,"value":803},"dom",{"type":49,"value":805}," Prop",{"type":43,"tag":52,"props":807,"children":808},{},[809,811,816],{"type":49,"value":810},"Every DOM component receives a special ",{"type":43,"tag":58,"props":812,"children":814},{"className":813},[],[815],{"type":49,"value":803},{"type":49,"value":817}," prop for webview configuration. Always type it in your props:",{"type":43,"tag":223,"props":819,"children":821},{"className":225,"code":820,"language":227,"meta":228,"style":228},"\"use dom\";\n\ninterface Props {\n content: string;\n dom: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function MyComponent({ content }: Props) {\n return \u003Cdiv>{content}\u003C\u002Fdiv>;\n}\n",[822],{"type":43,"tag":58,"props":823,"children":824},{"__ignoreMap":228},[825,844,851,868,889,932,939,946,993,1032],{"type":43,"tag":234,"props":826,"children":827},{"class":236,"line":237},[828,832,836,840],{"type":43,"tag":234,"props":829,"children":830},{"style":251},[831],{"type":49,"value":254},{"type":43,"tag":234,"props":833,"children":834},{"style":257},[835],{"type":49,"value":260},{"type":43,"tag":234,"props":837,"children":838},{"style":251},[839],{"type":49,"value":254},{"type":43,"tag":234,"props":841,"children":842},{"style":251},[843],{"type":49,"value":269},{"type":43,"tag":234,"props":845,"children":846},{"class":236,"line":247},[847],{"type":43,"tag":234,"props":848,"children":849},{"emptyLinePlaceholder":276},[850],{"type":49,"value":279},{"type":43,"tag":234,"props":852,"children":853},{"class":236,"line":272},[854,859,864],{"type":43,"tag":234,"props":855,"children":856},{"style":297},[857],{"type":49,"value":858},"interface",{"type":43,"tag":234,"props":860,"children":861},{"style":357},[862],{"type":49,"value":863}," Props",{"type":43,"tag":234,"props":865,"children":866},{"style":251},[867],{"type":49,"value":340},{"type":43,"tag":234,"props":869,"children":870},{"class":236,"line":282},[871,876,880,885],{"type":43,"tag":234,"props":872,"children":873},{"style":347},[874],{"type":49,"value":875}," content",{"type":43,"tag":234,"props":877,"children":878},{"style":251},[879],{"type":49,"value":354},{"type":43,"tag":234,"props":881,"children":882},{"style":357},[883],{"type":49,"value":884}," string",{"type":43,"tag":234,"props":886,"children":887},{"style":251},[888],{"type":49,"value":269},{"type":43,"tag":234,"props":890,"children":891},{"class":236,"line":314},[892,896,900,904,908,912,916,920,924,928],{"type":43,"tag":234,"props":893,"children":894},{"style":347},[895],{"type":49,"value":379},{"type":43,"tag":234,"props":897,"children":898},{"style":251},[899],{"type":49,"value":354},{"type":43,"tag":234,"props":901,"children":902},{"style":251},[903],{"type":49,"value":388},{"type":43,"tag":234,"props":905,"children":906},{"style":363},[907],{"type":49,"value":393},{"type":43,"tag":234,"props":909,"children":910},{"style":251},[911],{"type":49,"value":254},{"type":43,"tag":234,"props":913,"children":914},{"style":257},[915],{"type":49,"value":402},{"type":43,"tag":234,"props":917,"children":918},{"style":251},[919],{"type":49,"value":254},{"type":43,"tag":234,"props":921,"children":922},{"style":363},[923],{"type":49,"value":411},{"type":43,"tag":234,"props":925,"children":926},{"style":357},[927],{"type":49,"value":416},{"type":43,"tag":234,"props":929,"children":930},{"style":251},[931],{"type":49,"value":269},{"type":43,"tag":234,"props":933,"children":934},{"class":236,"line":329},[935],{"type":43,"tag":234,"props":936,"children":937},{"style":251},[938],{"type":49,"value":669},{"type":43,"tag":234,"props":940,"children":941},{"class":236,"line":343},[942],{"type":43,"tag":234,"props":943,"children":944},{"emptyLinePlaceholder":276},[945],{"type":49,"value":279},{"type":43,"tag":234,"props":947,"children":948},{"class":236,"line":373},[949,953,957,961,966,971,976,981,985,989],{"type":43,"tag":234,"props":950,"children":951},{"style":286},[952],{"type":49,"value":289},{"type":43,"tag":234,"props":954,"children":955},{"style":286},[956],{"type":49,"value":294},{"type":43,"tag":234,"props":958,"children":959},{"style":297},[960],{"type":49,"value":300},{"type":43,"tag":234,"props":962,"children":963},{"style":303},[964],{"type":49,"value":965}," MyComponent",{"type":43,"tag":234,"props":967,"children":968},{"style":251},[969],{"type":49,"value":970},"({",{"type":43,"tag":234,"props":972,"children":973},{"style":318},[974],{"type":49,"value":975}," content",{"type":43,"tag":234,"props":977,"children":978},{"style":251},[979],{"type":49,"value":980}," }:",{"type":43,"tag":234,"props":982,"children":983},{"style":357},[984],{"type":49,"value":863},{"type":43,"tag":234,"props":986,"children":987},{"style":251},[988],{"type":49,"value":596},{"type":43,"tag":234,"props":990,"children":991},{"style":251},[992],{"type":49,"value":340},{"type":43,"tag":234,"props":994,"children":995},{"class":236,"line":423},[996,1000,1005,1009,1014,1019,1023,1027],{"type":43,"tag":234,"props":997,"children":998},{"style":286},[999],{"type":49,"value":442},{"type":43,"tag":234,"props":1001,"children":1002},{"style":251},[1003],{"type":49,"value":1004}," \u003C",{"type":43,"tag":234,"props":1006,"children":1007},{"style":347},[1008],{"type":49,"value":461},{"type":43,"tag":234,"props":1010,"children":1011},{"style":251},[1012],{"type":49,"value":1013},">{",{"type":43,"tag":234,"props":1015,"children":1016},{"style":363},[1017],{"type":49,"value":1018},"content",{"type":43,"tag":234,"props":1020,"children":1021},{"style":251},[1022],{"type":49,"value":647},{"type":43,"tag":234,"props":1024,"children":1025},{"style":347},[1026],{"type":49,"value":461},{"type":43,"tag":234,"props":1028,"children":1029},{"style":251},[1030],{"type":49,"value":1031},">;\n",{"type":43,"tag":234,"props":1033,"children":1034},{"class":236,"line":436},[1035],{"type":43,"tag":234,"props":1036,"children":1037},{"style":251},[1038],{"type":49,"value":669},{"type":43,"tag":1040,"props":1041,"children":1043},"h3",{"id":1042},"common-dom-prop-options",[1044,1046,1051],{"type":49,"value":1045},"Common ",{"type":43,"tag":58,"props":1047,"children":1049},{"className":1048},[],[1050],{"type":49,"value":803},{"type":49,"value":1052}," Prop Options",{"type":43,"tag":223,"props":1054,"children":1056},{"className":225,"code":1055,"language":227,"meta":228,"style":228},"\u002F\u002F Disable body scrolling\n\u003CDOMComponent dom={{ scrollEnabled: false }} \u002F>\n\n\u002F\u002F Flow under the notch (disable safe area insets)\n\u003CDOMComponent dom={{ contentInsetAdjustmentBehavior: \"never\" }} \u002F>\n\n\u002F\u002F Control size manually\n\u003CDOMComponent dom={{ style: { width: 300, height: 400 } }} \u002F>\n\n\u002F\u002F Combine options\n\u003CDOMComponent\n dom={{\n scrollEnabled: false,\n contentInsetAdjustmentBehavior: \"never\",\n style: { width: '100%', height: 500 }\n }}\n\u002F>\n",[1057],{"type":43,"tag":58,"props":1058,"children":1059},{"__ignoreMap":228},[1060,1068,1110,1117,1125,1171,1178,1186,1259,1266,1274,1286,1298,1318,1346,1407,1415],{"type":43,"tag":234,"props":1061,"children":1062},{"class":236,"line":237},[1063],{"type":43,"tag":234,"props":1064,"children":1065},{"style":241},[1066],{"type":49,"value":1067},"\u002F\u002F Disable body scrolling\n",{"type":43,"tag":234,"props":1069,"children":1070},{"class":236,"line":247},[1071,1076,1081,1086,1090,1095,1099,1105],{"type":43,"tag":234,"props":1072,"children":1073},{"style":251},[1074],{"type":49,"value":1075},"\u003C",{"type":43,"tag":234,"props":1077,"children":1078},{"style":357},[1079],{"type":49,"value":1080},"DOMComponent",{"type":43,"tag":234,"props":1082,"children":1083},{"style":297},[1084],{"type":49,"value":1085}," dom",{"type":43,"tag":234,"props":1087,"children":1088},{"style":251},[1089],{"type":49,"value":471},{"type":43,"tag":234,"props":1091,"children":1092},{"style":347},[1093],{"type":49,"value":1094}," scrollEnabled",{"type":43,"tag":234,"props":1096,"children":1097},{"style":251},[1098],{"type":49,"value":354},{"type":43,"tag":234,"props":1100,"children":1102},{"style":1101},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1103],{"type":49,"value":1104}," false",{"type":43,"tag":234,"props":1106,"children":1107},{"style":251},[1108],{"type":49,"value":1109}," }} \u002F>\n",{"type":43,"tag":234,"props":1111,"children":1112},{"class":236,"line":272},[1113],{"type":43,"tag":234,"props":1114,"children":1115},{"emptyLinePlaceholder":276},[1116],{"type":49,"value":279},{"type":43,"tag":234,"props":1118,"children":1119},{"class":236,"line":282},[1120],{"type":43,"tag":234,"props":1121,"children":1122},{"style":241},[1123],{"type":49,"value":1124},"\u002F\u002F Flow under the notch (disable safe area insets)\n",{"type":43,"tag":234,"props":1126,"children":1127},{"class":236,"line":314},[1128,1132,1136,1140,1144,1149,1153,1158,1163,1167],{"type":43,"tag":234,"props":1129,"children":1130},{"style":251},[1131],{"type":49,"value":1075},{"type":43,"tag":234,"props":1133,"children":1134},{"style":357},[1135],{"type":49,"value":1080},{"type":43,"tag":234,"props":1137,"children":1138},{"style":297},[1139],{"type":49,"value":1085},{"type":43,"tag":234,"props":1141,"children":1142},{"style":251},[1143],{"type":49,"value":471},{"type":43,"tag":234,"props":1145,"children":1146},{"style":347},[1147],{"type":49,"value":1148}," contentInsetAdjustmentBehavior",{"type":43,"tag":234,"props":1150,"children":1151},{"style":251},[1152],{"type":49,"value":354},{"type":43,"tag":234,"props":1154,"children":1155},{"style":251},[1156],{"type":49,"value":1157}," \"",{"type":43,"tag":234,"props":1159,"children":1160},{"style":257},[1161],{"type":49,"value":1162},"never",{"type":43,"tag":234,"props":1164,"children":1165},{"style":251},[1166],{"type":49,"value":254},{"type":43,"tag":234,"props":1168,"children":1169},{"style":251},[1170],{"type":49,"value":1109},{"type":43,"tag":234,"props":1172,"children":1173},{"class":236,"line":329},[1174],{"type":43,"tag":234,"props":1175,"children":1176},{"emptyLinePlaceholder":276},[1177],{"type":49,"value":279},{"type":43,"tag":234,"props":1179,"children":1180},{"class":236,"line":343},[1181],{"type":43,"tag":234,"props":1182,"children":1183},{"style":241},[1184],{"type":49,"value":1185},"\u002F\u002F Control size manually\n",{"type":43,"tag":234,"props":1187,"children":1188},{"class":236,"line":373},[1189,1193,1197,1201,1205,1209,1213,1218,1223,1227,1232,1236,1241,1245,1250,1255],{"type":43,"tag":234,"props":1190,"children":1191},{"style":251},[1192],{"type":49,"value":1075},{"type":43,"tag":234,"props":1194,"children":1195},{"style":357},[1196],{"type":49,"value":1080},{"type":43,"tag":234,"props":1198,"children":1199},{"style":297},[1200],{"type":49,"value":1085},{"type":43,"tag":234,"props":1202,"children":1203},{"style":251},[1204],{"type":49,"value":471},{"type":43,"tag":234,"props":1206,"children":1207},{"style":347},[1208],{"type":49,"value":466},{"type":43,"tag":234,"props":1210,"children":1211},{"style":251},[1212],{"type":49,"value":354},{"type":43,"tag":234,"props":1214,"children":1215},{"style":251},[1216],{"type":49,"value":1217}," {",{"type":43,"tag":234,"props":1219,"children":1220},{"style":347},[1221],{"type":49,"value":1222}," width",{"type":43,"tag":234,"props":1224,"children":1225},{"style":251},[1226],{"type":49,"value":354},{"type":43,"tag":234,"props":1228,"children":1229},{"style":483},[1230],{"type":49,"value":1231}," 300",{"type":43,"tag":234,"props":1233,"children":1234},{"style":251},[1235],{"type":49,"value":586},{"type":43,"tag":234,"props":1237,"children":1238},{"style":347},[1239],{"type":49,"value":1240}," height",{"type":43,"tag":234,"props":1242,"children":1243},{"style":251},[1244],{"type":49,"value":354},{"type":43,"tag":234,"props":1246,"children":1247},{"style":483},[1248],{"type":49,"value":1249}," 400",{"type":43,"tag":234,"props":1251,"children":1252},{"style":251},[1253],{"type":49,"value":1254}," }",{"type":43,"tag":234,"props":1256,"children":1257},{"style":251},[1258],{"type":49,"value":1109},{"type":43,"tag":234,"props":1260,"children":1261},{"class":236,"line":423},[1262],{"type":43,"tag":234,"props":1263,"children":1264},{"emptyLinePlaceholder":276},[1265],{"type":49,"value":279},{"type":43,"tag":234,"props":1267,"children":1268},{"class":236,"line":436},[1269],{"type":43,"tag":234,"props":1270,"children":1271},{"style":241},[1272],{"type":49,"value":1273},"\u002F\u002F Combine options\n",{"type":43,"tag":234,"props":1275,"children":1276},{"class":236,"line":450},[1277,1281],{"type":43,"tag":234,"props":1278,"children":1279},{"style":251},[1280],{"type":49,"value":1075},{"type":43,"tag":234,"props":1282,"children":1283},{"style":357},[1284],{"type":49,"value":1285},"DOMComponent\n",{"type":43,"tag":234,"props":1287,"children":1288},{"class":236,"line":494},[1289,1293],{"type":43,"tag":234,"props":1290,"children":1291},{"style":297},[1292],{"type":49,"value":379},{"type":43,"tag":234,"props":1294,"children":1295},{"style":251},[1296],{"type":49,"value":1297},"={{\n",{"type":43,"tag":234,"props":1299,"children":1300},{"class":236,"line":531},[1301,1306,1310,1314],{"type":43,"tag":234,"props":1302,"children":1303},{"style":347},[1304],{"type":49,"value":1305}," scrollEnabled",{"type":43,"tag":234,"props":1307,"children":1308},{"style":251},[1309],{"type":49,"value":354},{"type":43,"tag":234,"props":1311,"children":1312},{"style":1101},[1313],{"type":49,"value":1104},{"type":43,"tag":234,"props":1315,"children":1316},{"style":251},[1317],{"type":49,"value":326},{"type":43,"tag":234,"props":1319,"children":1320},{"class":236,"line":547},[1321,1326,1330,1334,1338,1342],{"type":43,"tag":234,"props":1322,"children":1323},{"style":347},[1324],{"type":49,"value":1325}," contentInsetAdjustmentBehavior",{"type":43,"tag":234,"props":1327,"children":1328},{"style":251},[1329],{"type":49,"value":354},{"type":43,"tag":234,"props":1331,"children":1332},{"style":251},[1333],{"type":49,"value":1157},{"type":43,"tag":234,"props":1335,"children":1336},{"style":257},[1337],{"type":49,"value":1162},{"type":43,"tag":234,"props":1339,"children":1340},{"style":251},[1341],{"type":49,"value":254},{"type":43,"tag":234,"props":1343,"children":1344},{"style":251},[1345],{"type":49,"value":326},{"type":43,"tag":234,"props":1347,"children":1348},{"class":236,"line":608},[1349,1354,1358,1362,1366,1370,1375,1380,1385,1389,1393,1397,1402],{"type":43,"tag":234,"props":1350,"children":1351},{"style":347},[1352],{"type":49,"value":1353}," style",{"type":43,"tag":234,"props":1355,"children":1356},{"style":251},[1357],{"type":49,"value":354},{"type":43,"tag":234,"props":1359,"children":1360},{"style":251},[1361],{"type":49,"value":1217},{"type":43,"tag":234,"props":1363,"children":1364},{"style":347},[1365],{"type":49,"value":1222},{"type":43,"tag":234,"props":1367,"children":1368},{"style":251},[1369],{"type":49,"value":354},{"type":43,"tag":234,"props":1371,"children":1372},{"style":251},[1373],{"type":49,"value":1374}," '",{"type":43,"tag":234,"props":1376,"children":1377},{"style":257},[1378],{"type":49,"value":1379},"100%",{"type":43,"tag":234,"props":1381,"children":1382},{"style":251},[1383],{"type":49,"value":1384},"'",{"type":43,"tag":234,"props":1386,"children":1387},{"style":251},[1388],{"type":49,"value":586},{"type":43,"tag":234,"props":1390,"children":1391},{"style":347},[1392],{"type":49,"value":1240},{"type":43,"tag":234,"props":1394,"children":1395},{"style":251},[1396],{"type":49,"value":354},{"type":43,"tag":234,"props":1398,"children":1399},{"style":483},[1400],{"type":49,"value":1401}," 500",{"type":43,"tag":234,"props":1403,"children":1404},{"style":251},[1405],{"type":49,"value":1406}," }\n",{"type":43,"tag":234,"props":1408,"children":1409},{"class":236,"line":658},[1410],{"type":43,"tag":234,"props":1411,"children":1412},{"style":251},[1413],{"type":49,"value":1414}," }}\n",{"type":43,"tag":234,"props":1416,"children":1417},{"class":236,"line":672},[1418],{"type":43,"tag":234,"props":1419,"children":1420},{"style":251},[1421],{"type":49,"value":1422},"\u002F>\n",{"type":43,"tag":44,"props":1424,"children":1426},{"id":1425},"exposing-native-actions-to-the-webview",[1427],{"type":49,"value":1428},"Exposing Native Actions to the Webview",{"type":43,"tag":52,"props":1430,"children":1431},{},[1432],{"type":49,"value":1433},"Pass async functions as props to expose native functionality to the DOM component:",{"type":43,"tag":223,"props":1435,"children":1437},{"className":225,"code":1436,"language":227,"meta":228,"style":228},"\u002F\u002F app\u002Findex.tsx (native)\nimport { Alert } from \"react-native\";\nimport DOMComponent from \"@\u002Fcomponents\u002Fdom-component\";\n\nexport default function Screen() {\n return (\n \u003CDOMComponent\n showAlert={async (message: string) => {\n Alert.alert(\"From Web\", message);\n }}\n saveData={async (data: { name: string; value: number }) => {\n \u002F\u002F Save to native storage, database, etc.\n console.log(\"Saving:\", data);\n return { success: true };\n }}\n \u002F>\n );\n}\n",[1438],{"type":43,"tag":58,"props":1439,"children":1440},{"__ignoreMap":228},[1441,1449,1491,1525,1532,1561,1572,1583,1630,1681,1689,1765,1773,1824,1855,1862,1870,1881],{"type":43,"tag":234,"props":1442,"children":1443},{"class":236,"line":237},[1444],{"type":43,"tag":234,"props":1445,"children":1446},{"style":241},[1447],{"type":49,"value":1448},"\u002F\u002F app\u002Findex.tsx (native)\n",{"type":43,"tag":234,"props":1450,"children":1451},{"class":236,"line":247},[1452,1457,1461,1466,1470,1475,1479,1483,1487],{"type":43,"tag":234,"props":1453,"children":1454},{"style":286},[1455],{"type":49,"value":1456},"import",{"type":43,"tag":234,"props":1458,"children":1459},{"style":251},[1460],{"type":49,"value":1217},{"type":43,"tag":234,"props":1462,"children":1463},{"style":363},[1464],{"type":49,"value":1465}," Alert",{"type":43,"tag":234,"props":1467,"children":1468},{"style":251},[1469],{"type":49,"value":1254},{"type":43,"tag":234,"props":1471,"children":1472},{"style":286},[1473],{"type":49,"value":1474}," from",{"type":43,"tag":234,"props":1476,"children":1477},{"style":251},[1478],{"type":49,"value":1157},{"type":43,"tag":234,"props":1480,"children":1481},{"style":257},[1482],{"type":49,"value":14},{"type":43,"tag":234,"props":1484,"children":1485},{"style":251},[1486],{"type":49,"value":254},{"type":43,"tag":234,"props":1488,"children":1489},{"style":251},[1490],{"type":49,"value":269},{"type":43,"tag":234,"props":1492,"children":1493},{"class":236,"line":272},[1494,1498,1503,1508,1512,1517,1521],{"type":43,"tag":234,"props":1495,"children":1496},{"style":286},[1497],{"type":49,"value":1456},{"type":43,"tag":234,"props":1499,"children":1500},{"style":363},[1501],{"type":49,"value":1502}," DOMComponent ",{"type":43,"tag":234,"props":1504,"children":1505},{"style":286},[1506],{"type":49,"value":1507},"from",{"type":43,"tag":234,"props":1509,"children":1510},{"style":251},[1511],{"type":49,"value":1157},{"type":43,"tag":234,"props":1513,"children":1514},{"style":257},[1515],{"type":49,"value":1516},"@\u002Fcomponents\u002Fdom-component",{"type":43,"tag":234,"props":1518,"children":1519},{"style":251},[1520],{"type":49,"value":254},{"type":43,"tag":234,"props":1522,"children":1523},{"style":251},[1524],{"type":49,"value":269},{"type":43,"tag":234,"props":1526,"children":1527},{"class":236,"line":282},[1528],{"type":43,"tag":234,"props":1529,"children":1530},{"emptyLinePlaceholder":276},[1531],{"type":49,"value":279},{"type":43,"tag":234,"props":1533,"children":1534},{"class":236,"line":314},[1535,1539,1543,1547,1552,1557],{"type":43,"tag":234,"props":1536,"children":1537},{"style":286},[1538],{"type":49,"value":289},{"type":43,"tag":234,"props":1540,"children":1541},{"style":286},[1542],{"type":49,"value":294},{"type":43,"tag":234,"props":1544,"children":1545},{"style":297},[1546],{"type":49,"value":300},{"type":43,"tag":234,"props":1548,"children":1549},{"style":303},[1550],{"type":49,"value":1551}," Screen",{"type":43,"tag":234,"props":1553,"children":1554},{"style":251},[1555],{"type":49,"value":1556},"()",{"type":43,"tag":234,"props":1558,"children":1559},{"style":251},[1560],{"type":49,"value":340},{"type":43,"tag":234,"props":1562,"children":1563},{"class":236,"line":329},[1564,1568],{"type":43,"tag":234,"props":1565,"children":1566},{"style":286},[1567],{"type":49,"value":442},{"type":43,"tag":234,"props":1569,"children":1570},{"style":347},[1571],{"type":49,"value":447},{"type":43,"tag":234,"props":1573,"children":1574},{"class":236,"line":343},[1575,1579],{"type":43,"tag":234,"props":1576,"children":1577},{"style":251},[1578],{"type":49,"value":456},{"type":43,"tag":234,"props":1580,"children":1581},{"style":357},[1582],{"type":49,"value":1285},{"type":43,"tag":234,"props":1584,"children":1585},{"class":236,"line":373},[1586,1591,1595,1600,1605,1610,1614,1618,1622,1626],{"type":43,"tag":234,"props":1587,"children":1588},{"style":297},[1589],{"type":49,"value":1590}," showAlert",{"type":43,"tag":234,"props":1592,"children":1593},{"style":251},[1594],{"type":49,"value":628},{"type":43,"tag":234,"props":1596,"children":1597},{"style":297},[1598],{"type":49,"value":1599},"async",{"type":43,"tag":234,"props":1601,"children":1602},{"style":251},[1603],{"type":49,"value":1604}," (",{"type":43,"tag":234,"props":1606,"children":1607},{"style":318},[1608],{"type":49,"value":1609},"message",{"type":43,"tag":234,"props":1611,"children":1612},{"style":251},[1613],{"type":49,"value":354},{"type":43,"tag":234,"props":1615,"children":1616},{"style":357},[1617],{"type":49,"value":884},{"type":43,"tag":234,"props":1619,"children":1620},{"style":251},[1621],{"type":49,"value":596},{"type":43,"tag":234,"props":1623,"children":1624},{"style":297},[1625],{"type":49,"value":601},{"type":43,"tag":234,"props":1627,"children":1628},{"style":251},[1629],{"type":49,"value":340},{"type":43,"tag":234,"props":1631,"children":1632},{"class":236,"line":423},[1633,1638,1642,1647,1651,1655,1660,1664,1668,1673,1677],{"type":43,"tag":234,"props":1634,"children":1635},{"style":363},[1636],{"type":49,"value":1637}," Alert",{"type":43,"tag":234,"props":1639,"children":1640},{"style":251},[1641],{"type":49,"value":563},{"type":43,"tag":234,"props":1643,"children":1644},{"style":303},[1645],{"type":49,"value":1646},"alert",{"type":43,"tag":234,"props":1648,"children":1649},{"style":347},[1650],{"type":49,"value":393},{"type":43,"tag":234,"props":1652,"children":1653},{"style":251},[1654],{"type":49,"value":254},{"type":43,"tag":234,"props":1656,"children":1657},{"style":257},[1658],{"type":49,"value":1659},"From Web",{"type":43,"tag":234,"props":1661,"children":1662},{"style":251},[1663],{"type":49,"value":254},{"type":43,"tag":234,"props":1665,"children":1666},{"style":251},[1667],{"type":49,"value":586},{"type":43,"tag":234,"props":1669,"children":1670},{"style":363},[1671],{"type":49,"value":1672}," message",{"type":43,"tag":234,"props":1674,"children":1675},{"style":347},[1676],{"type":49,"value":596},{"type":43,"tag":234,"props":1678,"children":1679},{"style":251},[1680],{"type":49,"value":269},{"type":43,"tag":234,"props":1682,"children":1683},{"class":236,"line":436},[1684],{"type":43,"tag":234,"props":1685,"children":1686},{"style":251},[1687],{"type":49,"value":1688}," }}\n",{"type":43,"tag":234,"props":1690,"children":1691},{"class":236,"line":450},[1692,1697,1701,1705,1709,1713,1717,1721,1726,1730,1734,1739,1744,1748,1752,1757,1761],{"type":43,"tag":234,"props":1693,"children":1694},{"style":297},[1695],{"type":49,"value":1696}," saveData",{"type":43,"tag":234,"props":1698,"children":1699},{"style":251},[1700],{"type":49,"value":628},{"type":43,"tag":234,"props":1702,"children":1703},{"style":297},[1704],{"type":49,"value":1599},{"type":43,"tag":234,"props":1706,"children":1707},{"style":251},[1708],{"type":49,"value":1604},{"type":43,"tag":234,"props":1710,"children":1711},{"style":318},[1712],{"type":49,"value":558},{"type":43,"tag":234,"props":1714,"children":1715},{"style":251},[1716],{"type":49,"value":354},{"type":43,"tag":234,"props":1718,"children":1719},{"style":251},[1720],{"type":49,"value":1217},{"type":43,"tag":234,"props":1722,"children":1723},{"style":347},[1724],{"type":49,"value":1725}," name",{"type":43,"tag":234,"props":1727,"children":1728},{"style":251},[1729],{"type":49,"value":354},{"type":43,"tag":234,"props":1731,"children":1732},{"style":357},[1733],{"type":49,"value":884},{"type":43,"tag":234,"props":1735,"children":1736},{"style":251},[1737],{"type":49,"value":1738},";",{"type":43,"tag":234,"props":1740,"children":1741},{"style":347},[1742],{"type":49,"value":1743}," value",{"type":43,"tag":234,"props":1745,"children":1746},{"style":251},[1747],{"type":49,"value":354},{"type":43,"tag":234,"props":1749,"children":1750},{"style":357},[1751],{"type":49,"value":360},{"type":43,"tag":234,"props":1753,"children":1754},{"style":251},[1755],{"type":49,"value":1756}," })",{"type":43,"tag":234,"props":1758,"children":1759},{"style":297},[1760],{"type":49,"value":601},{"type":43,"tag":234,"props":1762,"children":1763},{"style":251},[1764],{"type":49,"value":340},{"type":43,"tag":234,"props":1766,"children":1767},{"class":236,"line":494},[1768],{"type":43,"tag":234,"props":1769,"children":1770},{"style":241},[1771],{"type":49,"value":1772}," \u002F\u002F Save to native storage, database, etc.\n",{"type":43,"tag":234,"props":1774,"children":1775},{"class":236,"line":531},[1776,1781,1785,1790,1794,1798,1803,1807,1811,1816,1820],{"type":43,"tag":234,"props":1777,"children":1778},{"style":363},[1779],{"type":49,"value":1780}," console",{"type":43,"tag":234,"props":1782,"children":1783},{"style":251},[1784],{"type":49,"value":563},{"type":43,"tag":234,"props":1786,"children":1787},{"style":303},[1788],{"type":49,"value":1789},"log",{"type":43,"tag":234,"props":1791,"children":1792},{"style":347},[1793],{"type":49,"value":393},{"type":43,"tag":234,"props":1795,"children":1796},{"style":251},[1797],{"type":49,"value":254},{"type":43,"tag":234,"props":1799,"children":1800},{"style":257},[1801],{"type":49,"value":1802},"Saving:",{"type":43,"tag":234,"props":1804,"children":1805},{"style":251},[1806],{"type":49,"value":254},{"type":43,"tag":234,"props":1808,"children":1809},{"style":251},[1810],{"type":49,"value":586},{"type":43,"tag":234,"props":1812,"children":1813},{"style":363},[1814],{"type":49,"value":1815}," data",{"type":43,"tag":234,"props":1817,"children":1818},{"style":347},[1819],{"type":49,"value":596},{"type":43,"tag":234,"props":1821,"children":1822},{"style":251},[1823],{"type":49,"value":269},{"type":43,"tag":234,"props":1825,"children":1826},{"class":236,"line":547},[1827,1832,1836,1841,1845,1850],{"type":43,"tag":234,"props":1828,"children":1829},{"style":286},[1830],{"type":49,"value":1831}," return",{"type":43,"tag":234,"props":1833,"children":1834},{"style":251},[1835],{"type":49,"value":1217},{"type":43,"tag":234,"props":1837,"children":1838},{"style":347},[1839],{"type":49,"value":1840}," success",{"type":43,"tag":234,"props":1842,"children":1843},{"style":251},[1844],{"type":49,"value":354},{"type":43,"tag":234,"props":1846,"children":1847},{"style":1101},[1848],{"type":49,"value":1849}," true",{"type":43,"tag":234,"props":1851,"children":1852},{"style":251},[1853],{"type":49,"value":1854}," };\n",{"type":43,"tag":234,"props":1856,"children":1857},{"class":236,"line":608},[1858],{"type":43,"tag":234,"props":1859,"children":1860},{"style":251},[1861],{"type":49,"value":1688},{"type":43,"tag":234,"props":1863,"children":1864},{"class":236,"line":658},[1865],{"type":43,"tag":234,"props":1866,"children":1867},{"style":251},[1868],{"type":49,"value":1869}," \u002F>\n",{"type":43,"tag":234,"props":1871,"children":1872},{"class":236,"line":672},[1873,1877],{"type":43,"tag":234,"props":1874,"children":1875},{"style":347},[1876],{"type":49,"value":712},{"type":43,"tag":234,"props":1878,"children":1879},{"style":251},[1880],{"type":49,"value":269},{"type":43,"tag":234,"props":1882,"children":1883},{"class":236,"line":689},[1884],{"type":43,"tag":234,"props":1885,"children":1886},{"style":251},[1887],{"type":49,"value":669},{"type":43,"tag":223,"props":1889,"children":1891},{"className":225,"code":1890,"language":227,"meta":228,"style":228},"\u002F\u002F components\u002Fdom-component.tsx\n\"use dom\";\n\ninterface Props {\n showAlert: (message: string) => Promise\u003Cvoid>;\n saveData: (data: {\n name: string;\n value: number;\n }) => Promise\u003C{ success: boolean }>;\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function DOMComponent({ showAlert, saveData }: Props) {\n const handleClick = async () => {\n await showAlert(\"Hello from the webview!\");\n const result = await saveData({ name: \"test\", value: 42 });\n console.log(\"Save result:\", result);\n };\n\n return \u003Cbutton onClick={handleClick}>Trigger Native Action\u003C\u002Fbutton>;\n}\n",[1892],{"type":43,"tag":58,"props":1893,"children":1894},{"__ignoreMap":228},[1895,1903,1922,1929,1944,1998,2026,2046,2066,2105,2149,2156,2163,2217,2253,2290,2375,2424,2432,2439,2491],{"type":43,"tag":234,"props":1896,"children":1897},{"class":236,"line":237},[1898],{"type":43,"tag":234,"props":1899,"children":1900},{"style":241},[1901],{"type":49,"value":1902},"\u002F\u002F components\u002Fdom-component.tsx\n",{"type":43,"tag":234,"props":1904,"children":1905},{"class":236,"line":247},[1906,1910,1914,1918],{"type":43,"tag":234,"props":1907,"children":1908},{"style":251},[1909],{"type":49,"value":254},{"type":43,"tag":234,"props":1911,"children":1912},{"style":257},[1913],{"type":49,"value":260},{"type":43,"tag":234,"props":1915,"children":1916},{"style":251},[1917],{"type":49,"value":254},{"type":43,"tag":234,"props":1919,"children":1920},{"style":251},[1921],{"type":49,"value":269},{"type":43,"tag":234,"props":1923,"children":1924},{"class":236,"line":272},[1925],{"type":43,"tag":234,"props":1926,"children":1927},{"emptyLinePlaceholder":276},[1928],{"type":49,"value":279},{"type":43,"tag":234,"props":1930,"children":1931},{"class":236,"line":282},[1932,1936,1940],{"type":43,"tag":234,"props":1933,"children":1934},{"style":297},[1935],{"type":49,"value":858},{"type":43,"tag":234,"props":1937,"children":1938},{"style":357},[1939],{"type":49,"value":863},{"type":43,"tag":234,"props":1941,"children":1942},{"style":251},[1943],{"type":49,"value":340},{"type":43,"tag":234,"props":1945,"children":1946},{"class":236,"line":314},[1947,1952,1956,1960,1964,1968,1972,1976,1980,1985,1989,1994],{"type":43,"tag":234,"props":1948,"children":1949},{"style":347},[1950],{"type":49,"value":1951}," showAlert",{"type":43,"tag":234,"props":1953,"children":1954},{"style":251},[1955],{"type":49,"value":354},{"type":43,"tag":234,"props":1957,"children":1958},{"style":251},[1959],{"type":49,"value":1604},{"type":43,"tag":234,"props":1961,"children":1962},{"style":318},[1963],{"type":49,"value":1609},{"type":43,"tag":234,"props":1965,"children":1966},{"style":251},[1967],{"type":49,"value":354},{"type":43,"tag":234,"props":1969,"children":1970},{"style":357},[1971],{"type":49,"value":884},{"type":43,"tag":234,"props":1973,"children":1974},{"style":251},[1975],{"type":49,"value":596},{"type":43,"tag":234,"props":1977,"children":1978},{"style":297},[1979],{"type":49,"value":601},{"type":43,"tag":234,"props":1981,"children":1982},{"style":357},[1983],{"type":49,"value":1984}," Promise",{"type":43,"tag":234,"props":1986,"children":1987},{"style":251},[1988],{"type":49,"value":1075},{"type":43,"tag":234,"props":1990,"children":1991},{"style":357},[1992],{"type":49,"value":1993},"void",{"type":43,"tag":234,"props":1995,"children":1996},{"style":251},[1997],{"type":49,"value":1031},{"type":43,"tag":234,"props":1999,"children":2000},{"class":236,"line":329},[2001,2006,2010,2014,2018,2022],{"type":43,"tag":234,"props":2002,"children":2003},{"style":347},[2004],{"type":49,"value":2005}," saveData",{"type":43,"tag":234,"props":2007,"children":2008},{"style":251},[2009],{"type":49,"value":354},{"type":43,"tag":234,"props":2011,"children":2012},{"style":251},[2013],{"type":49,"value":1604},{"type":43,"tag":234,"props":2015,"children":2016},{"style":318},[2017],{"type":49,"value":558},{"type":43,"tag":234,"props":2019,"children":2020},{"style":251},[2021],{"type":49,"value":354},{"type":43,"tag":234,"props":2023,"children":2024},{"style":251},[2025],{"type":49,"value":340},{"type":43,"tag":234,"props":2027,"children":2028},{"class":236,"line":343},[2029,2034,2038,2042],{"type":43,"tag":234,"props":2030,"children":2031},{"style":347},[2032],{"type":49,"value":2033}," name",{"type":43,"tag":234,"props":2035,"children":2036},{"style":251},[2037],{"type":49,"value":354},{"type":43,"tag":234,"props":2039,"children":2040},{"style":357},[2041],{"type":49,"value":884},{"type":43,"tag":234,"props":2043,"children":2044},{"style":251},[2045],{"type":49,"value":269},{"type":43,"tag":234,"props":2047,"children":2048},{"class":236,"line":373},[2049,2054,2058,2062],{"type":43,"tag":234,"props":2050,"children":2051},{"style":347},[2052],{"type":49,"value":2053}," value",{"type":43,"tag":234,"props":2055,"children":2056},{"style":251},[2057],{"type":49,"value":354},{"type":43,"tag":234,"props":2059,"children":2060},{"style":357},[2061],{"type":49,"value":360},{"type":43,"tag":234,"props":2063,"children":2064},{"style":251},[2065],{"type":49,"value":269},{"type":43,"tag":234,"props":2067,"children":2068},{"class":236,"line":423},[2069,2074,2078,2082,2087,2091,2095,2100],{"type":43,"tag":234,"props":2070,"children":2071},{"style":251},[2072],{"type":49,"value":2073}," })",{"type":43,"tag":234,"props":2075,"children":2076},{"style":297},[2077],{"type":49,"value":601},{"type":43,"tag":234,"props":2079,"children":2080},{"style":357},[2081],{"type":49,"value":1984},{"type":43,"tag":234,"props":2083,"children":2084},{"style":251},[2085],{"type":49,"value":2086},"\u003C{",{"type":43,"tag":234,"props":2088,"children":2089},{"style":347},[2090],{"type":49,"value":1840},{"type":43,"tag":234,"props":2092,"children":2093},{"style":251},[2094],{"type":49,"value":354},{"type":43,"tag":234,"props":2096,"children":2097},{"style":357},[2098],{"type":49,"value":2099}," boolean",{"type":43,"tag":234,"props":2101,"children":2102},{"style":251},[2103],{"type":49,"value":2104}," }>;\n",{"type":43,"tag":234,"props":2106,"children":2107},{"class":236,"line":436},[2108,2112,2117,2121,2125,2129,2133,2137,2141,2145],{"type":43,"tag":234,"props":2109,"children":2110},{"style":347},[2111],{"type":49,"value":379},{"type":43,"tag":234,"props":2113,"children":2114},{"style":251},[2115],{"type":49,"value":2116},"?:",{"type":43,"tag":234,"props":2118,"children":2119},{"style":251},[2120],{"type":49,"value":388},{"type":43,"tag":234,"props":2122,"children":2123},{"style":363},[2124],{"type":49,"value":393},{"type":43,"tag":234,"props":2126,"children":2127},{"style":251},[2128],{"type":49,"value":254},{"type":43,"tag":234,"props":2130,"children":2131},{"style":257},[2132],{"type":49,"value":402},{"type":43,"tag":234,"props":2134,"children":2135},{"style":251},[2136],{"type":49,"value":254},{"type":43,"tag":234,"props":2138,"children":2139},{"style":363},[2140],{"type":49,"value":411},{"type":43,"tag":234,"props":2142,"children":2143},{"style":357},[2144],{"type":49,"value":416},{"type":43,"tag":234,"props":2146,"children":2147},{"style":251},[2148],{"type":49,"value":269},{"type":43,"tag":234,"props":2150,"children":2151},{"class":236,"line":450},[2152],{"type":43,"tag":234,"props":2153,"children":2154},{"style":251},[2155],{"type":49,"value":669},{"type":43,"tag":234,"props":2157,"children":2158},{"class":236,"line":494},[2159],{"type":43,"tag":234,"props":2160,"children":2161},{"emptyLinePlaceholder":276},[2162],{"type":49,"value":279},{"type":43,"tag":234,"props":2164,"children":2165},{"class":236,"line":531},[2166,2170,2174,2178,2183,2187,2192,2196,2201,2205,2209,2213],{"type":43,"tag":234,"props":2167,"children":2168},{"style":286},[2169],{"type":49,"value":289},{"type":43,"tag":234,"props":2171,"children":2172},{"style":286},[2173],{"type":49,"value":294},{"type":43,"tag":234,"props":2175,"children":2176},{"style":297},[2177],{"type":49,"value":300},{"type":43,"tag":234,"props":2179,"children":2180},{"style":303},[2181],{"type":49,"value":2182}," DOMComponent",{"type":43,"tag":234,"props":2184,"children":2185},{"style":251},[2186],{"type":49,"value":970},{"type":43,"tag":234,"props":2188,"children":2189},{"style":318},[2190],{"type":49,"value":2191}," showAlert",{"type":43,"tag":234,"props":2193,"children":2194},{"style":251},[2195],{"type":49,"value":586},{"type":43,"tag":234,"props":2197,"children":2198},{"style":318},[2199],{"type":49,"value":2200}," saveData",{"type":43,"tag":234,"props":2202,"children":2203},{"style":251},[2204],{"type":49,"value":980},{"type":43,"tag":234,"props":2206,"children":2207},{"style":357},[2208],{"type":49,"value":863},{"type":43,"tag":234,"props":2210,"children":2211},{"style":251},[2212],{"type":49,"value":596},{"type":43,"tag":234,"props":2214,"children":2215},{"style":251},[2216],{"type":49,"value":340},{"type":43,"tag":234,"props":2218,"children":2219},{"class":236,"line":547},[2220,2225,2230,2235,2240,2245,2249],{"type":43,"tag":234,"props":2221,"children":2222},{"style":297},[2223],{"type":49,"value":2224}," const",{"type":43,"tag":234,"props":2226,"children":2227},{"style":363},[2228],{"type":49,"value":2229}," handleClick",{"type":43,"tag":234,"props":2231,"children":2232},{"style":251},[2233],{"type":49,"value":2234}," =",{"type":43,"tag":234,"props":2236,"children":2237},{"style":297},[2238],{"type":49,"value":2239}," async",{"type":43,"tag":234,"props":2241,"children":2242},{"style":251},[2243],{"type":49,"value":2244}," ()",{"type":43,"tag":234,"props":2246,"children":2247},{"style":297},[2248],{"type":49,"value":601},{"type":43,"tag":234,"props":2250,"children":2251},{"style":251},[2252],{"type":49,"value":340},{"type":43,"tag":234,"props":2254,"children":2255},{"class":236,"line":608},[2256,2261,2265,2269,2273,2278,2282,2286],{"type":43,"tag":234,"props":2257,"children":2258},{"style":286},[2259],{"type":49,"value":2260}," await",{"type":43,"tag":234,"props":2262,"children":2263},{"style":303},[2264],{"type":49,"value":2191},{"type":43,"tag":234,"props":2266,"children":2267},{"style":347},[2268],{"type":49,"value":393},{"type":43,"tag":234,"props":2270,"children":2271},{"style":251},[2272],{"type":49,"value":254},{"type":43,"tag":234,"props":2274,"children":2275},{"style":257},[2276],{"type":49,"value":2277},"Hello from the webview!",{"type":43,"tag":234,"props":2279,"children":2280},{"style":251},[2281],{"type":49,"value":254},{"type":43,"tag":234,"props":2283,"children":2284},{"style":347},[2285],{"type":49,"value":596},{"type":43,"tag":234,"props":2287,"children":2288},{"style":251},[2289],{"type":49,"value":269},{"type":43,"tag":234,"props":2291,"children":2292},{"class":236,"line":658},[2293,2298,2303,2307,2312,2316,2320,2325,2329,2333,2337,2342,2346,2350,2354,2358,2363,2367,2371],{"type":43,"tag":234,"props":2294,"children":2295},{"style":297},[2296],{"type":49,"value":2297}," const",{"type":43,"tag":234,"props":2299,"children":2300},{"style":363},[2301],{"type":49,"value":2302}," result",{"type":43,"tag":234,"props":2304,"children":2305},{"style":251},[2306],{"type":49,"value":2234},{"type":43,"tag":234,"props":2308,"children":2309},{"style":286},[2310],{"type":49,"value":2311}," await",{"type":43,"tag":234,"props":2313,"children":2314},{"style":303},[2315],{"type":49,"value":2200},{"type":43,"tag":234,"props":2317,"children":2318},{"style":347},[2319],{"type":49,"value":393},{"type":43,"tag":234,"props":2321,"children":2322},{"style":251},[2323],{"type":49,"value":2324},"{",{"type":43,"tag":234,"props":2326,"children":2327},{"style":347},[2328],{"type":49,"value":1725},{"type":43,"tag":234,"props":2330,"children":2331},{"style":251},[2332],{"type":49,"value":354},{"type":43,"tag":234,"props":2334,"children":2335},{"style":251},[2336],{"type":49,"value":1157},{"type":43,"tag":234,"props":2338,"children":2339},{"style":257},[2340],{"type":49,"value":2341},"test",{"type":43,"tag":234,"props":2343,"children":2344},{"style":251},[2345],{"type":49,"value":254},{"type":43,"tag":234,"props":2347,"children":2348},{"style":251},[2349],{"type":49,"value":586},{"type":43,"tag":234,"props":2351,"children":2352},{"style":347},[2353],{"type":49,"value":1743},{"type":43,"tag":234,"props":2355,"children":2356},{"style":251},[2357],{"type":49,"value":354},{"type":43,"tag":234,"props":2359,"children":2360},{"style":483},[2361],{"type":49,"value":2362}," 42",{"type":43,"tag":234,"props":2364,"children":2365},{"style":251},[2366],{"type":49,"value":1254},{"type":43,"tag":234,"props":2368,"children":2369},{"style":347},[2370],{"type":49,"value":596},{"type":43,"tag":234,"props":2372,"children":2373},{"style":251},[2374],{"type":49,"value":269},{"type":43,"tag":234,"props":2376,"children":2377},{"class":236,"line":672},[2378,2383,2387,2391,2395,2399,2404,2408,2412,2416,2420],{"type":43,"tag":234,"props":2379,"children":2380},{"style":363},[2381],{"type":49,"value":2382}," console",{"type":43,"tag":234,"props":2384,"children":2385},{"style":251},[2386],{"type":49,"value":563},{"type":43,"tag":234,"props":2388,"children":2389},{"style":303},[2390],{"type":49,"value":1789},{"type":43,"tag":234,"props":2392,"children":2393},{"style":347},[2394],{"type":49,"value":393},{"type":43,"tag":234,"props":2396,"children":2397},{"style":251},[2398],{"type":49,"value":254},{"type":43,"tag":234,"props":2400,"children":2401},{"style":257},[2402],{"type":49,"value":2403},"Save result:",{"type":43,"tag":234,"props":2405,"children":2406},{"style":251},[2407],{"type":49,"value":254},{"type":43,"tag":234,"props":2409,"children":2410},{"style":251},[2411],{"type":49,"value":586},{"type":43,"tag":234,"props":2413,"children":2414},{"style":363},[2415],{"type":49,"value":2302},{"type":43,"tag":234,"props":2417,"children":2418},{"style":347},[2419],{"type":49,"value":596},{"type":43,"tag":234,"props":2421,"children":2422},{"style":251},[2423],{"type":49,"value":269},{"type":43,"tag":234,"props":2425,"children":2426},{"class":236,"line":689},[2427],{"type":43,"tag":234,"props":2428,"children":2429},{"style":251},[2430],{"type":49,"value":2431}," };\n",{"type":43,"tag":234,"props":2433,"children":2434},{"class":236,"line":706},[2435],{"type":43,"tag":234,"props":2436,"children":2437},{"emptyLinePlaceholder":276},[2438],{"type":49,"value":279},{"type":43,"tag":234,"props":2440,"children":2441},{"class":236,"line":719},[2442,2446,2450,2455,2460,2464,2469,2474,2479,2483,2487],{"type":43,"tag":234,"props":2443,"children":2444},{"style":286},[2445],{"type":49,"value":442},{"type":43,"tag":234,"props":2447,"children":2448},{"style":251},[2449],{"type":49,"value":1004},{"type":43,"tag":234,"props":2451,"children":2452},{"style":347},[2453],{"type":49,"value":2454},"button",{"type":43,"tag":234,"props":2456,"children":2457},{"style":297},[2458],{"type":49,"value":2459}," onClick",{"type":43,"tag":234,"props":2461,"children":2462},{"style":251},[2463],{"type":49,"value":628},{"type":43,"tag":234,"props":2465,"children":2466},{"style":363},[2467],{"type":49,"value":2468},"handleClick",{"type":43,"tag":234,"props":2470,"children":2471},{"style":251},[2472],{"type":49,"value":2473},"}>",{"type":43,"tag":234,"props":2475,"children":2476},{"style":363},[2477],{"type":49,"value":2478},"Trigger Native Action",{"type":43,"tag":234,"props":2480,"children":2481},{"style":251},[2482],{"type":49,"value":519},{"type":43,"tag":234,"props":2484,"children":2485},{"style":347},[2486],{"type":49,"value":2454},{"type":43,"tag":234,"props":2488,"children":2489},{"style":251},[2490],{"type":49,"value":1031},{"type":43,"tag":234,"props":2492,"children":2494},{"class":236,"line":2493},21,[2495],{"type":43,"tag":234,"props":2496,"children":2497},{"style":251},[2498],{"type":49,"value":669},{"type":43,"tag":44,"props":2500,"children":2502},{"id":2501},"using-web-libraries",[2503],{"type":49,"value":2504},"Using Web Libraries",{"type":43,"tag":52,"props":2506,"children":2507},{},[2508],{"type":49,"value":2509},"DOM components can use any web library:",{"type":43,"tag":223,"props":2511,"children":2513},{"className":225,"code":2512,"language":227,"meta":228,"style":228},"\u002F\u002F components\u002Fsyntax-highlight.tsx\n\"use dom\";\n\nimport SyntaxHighlighter from \"react-syntax-highlighter\";\nimport { docco } from \"react-syntax-highlighter\u002Fdist\u002Fesm\u002Fstyles\u002Fhljs\";\n\ninterface Props {\n code: string;\n language: string;\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function SyntaxHighlight({ code, language }: Props) {\n return (\n \u003CSyntaxHighlighter language={language} style={docco}>\n {code}\n \u003C\u002FSyntaxHighlighter>\n );\n}\n",[2514],{"type":43,"tag":58,"props":2515,"children":2516},{"__ignoreMap":228},[2517,2525,2544,2551,2583,2624,2631,2646,2666,2686,2729,2736,2743,2797,2808,2857,2873,2888,2899],{"type":43,"tag":234,"props":2518,"children":2519},{"class":236,"line":237},[2520],{"type":43,"tag":234,"props":2521,"children":2522},{"style":241},[2523],{"type":49,"value":2524},"\u002F\u002F components\u002Fsyntax-highlight.tsx\n",{"type":43,"tag":234,"props":2526,"children":2527},{"class":236,"line":247},[2528,2532,2536,2540],{"type":43,"tag":234,"props":2529,"children":2530},{"style":251},[2531],{"type":49,"value":254},{"type":43,"tag":234,"props":2533,"children":2534},{"style":257},[2535],{"type":49,"value":260},{"type":43,"tag":234,"props":2537,"children":2538},{"style":251},[2539],{"type":49,"value":254},{"type":43,"tag":234,"props":2541,"children":2542},{"style":251},[2543],{"type":49,"value":269},{"type":43,"tag":234,"props":2545,"children":2546},{"class":236,"line":272},[2547],{"type":43,"tag":234,"props":2548,"children":2549},{"emptyLinePlaceholder":276},[2550],{"type":49,"value":279},{"type":43,"tag":234,"props":2552,"children":2553},{"class":236,"line":282},[2554,2558,2563,2567,2571,2575,2579],{"type":43,"tag":234,"props":2555,"children":2556},{"style":286},[2557],{"type":49,"value":1456},{"type":43,"tag":234,"props":2559,"children":2560},{"style":363},[2561],{"type":49,"value":2562}," SyntaxHighlighter ",{"type":43,"tag":234,"props":2564,"children":2565},{"style":286},[2566],{"type":49,"value":1507},{"type":43,"tag":234,"props":2568,"children":2569},{"style":251},[2570],{"type":49,"value":1157},{"type":43,"tag":234,"props":2572,"children":2573},{"style":257},[2574],{"type":49,"value":71},{"type":43,"tag":234,"props":2576,"children":2577},{"style":251},[2578],{"type":49,"value":254},{"type":43,"tag":234,"props":2580,"children":2581},{"style":251},[2582],{"type":49,"value":269},{"type":43,"tag":234,"props":2584,"children":2585},{"class":236,"line":314},[2586,2590,2594,2599,2603,2607,2611,2616,2620],{"type":43,"tag":234,"props":2587,"children":2588},{"style":286},[2589],{"type":49,"value":1456},{"type":43,"tag":234,"props":2591,"children":2592},{"style":251},[2593],{"type":49,"value":1217},{"type":43,"tag":234,"props":2595,"children":2596},{"style":363},[2597],{"type":49,"value":2598}," docco",{"type":43,"tag":234,"props":2600,"children":2601},{"style":251},[2602],{"type":49,"value":1254},{"type":43,"tag":234,"props":2604,"children":2605},{"style":286},[2606],{"type":49,"value":1474},{"type":43,"tag":234,"props":2608,"children":2609},{"style":251},[2610],{"type":49,"value":1157},{"type":43,"tag":234,"props":2612,"children":2613},{"style":257},[2614],{"type":49,"value":2615},"react-syntax-highlighter\u002Fdist\u002Fesm\u002Fstyles\u002Fhljs",{"type":43,"tag":234,"props":2617,"children":2618},{"style":251},[2619],{"type":49,"value":254},{"type":43,"tag":234,"props":2621,"children":2622},{"style":251},[2623],{"type":49,"value":269},{"type":43,"tag":234,"props":2625,"children":2626},{"class":236,"line":329},[2627],{"type":43,"tag":234,"props":2628,"children":2629},{"emptyLinePlaceholder":276},[2630],{"type":49,"value":279},{"type":43,"tag":234,"props":2632,"children":2633},{"class":236,"line":343},[2634,2638,2642],{"type":43,"tag":234,"props":2635,"children":2636},{"style":297},[2637],{"type":49,"value":858},{"type":43,"tag":234,"props":2639,"children":2640},{"style":357},[2641],{"type":49,"value":863},{"type":43,"tag":234,"props":2643,"children":2644},{"style":251},[2645],{"type":49,"value":340},{"type":43,"tag":234,"props":2647,"children":2648},{"class":236,"line":373},[2649,2654,2658,2662],{"type":43,"tag":234,"props":2650,"children":2651},{"style":347},[2652],{"type":49,"value":2653}," code",{"type":43,"tag":234,"props":2655,"children":2656},{"style":251},[2657],{"type":49,"value":354},{"type":43,"tag":234,"props":2659,"children":2660},{"style":357},[2661],{"type":49,"value":884},{"type":43,"tag":234,"props":2663,"children":2664},{"style":251},[2665],{"type":49,"value":269},{"type":43,"tag":234,"props":2667,"children":2668},{"class":236,"line":423},[2669,2674,2678,2682],{"type":43,"tag":234,"props":2670,"children":2671},{"style":347},[2672],{"type":49,"value":2673}," language",{"type":43,"tag":234,"props":2675,"children":2676},{"style":251},[2677],{"type":49,"value":354},{"type":43,"tag":234,"props":2679,"children":2680},{"style":357},[2681],{"type":49,"value":884},{"type":43,"tag":234,"props":2683,"children":2684},{"style":251},[2685],{"type":49,"value":269},{"type":43,"tag":234,"props":2687,"children":2688},{"class":236,"line":436},[2689,2693,2697,2701,2705,2709,2713,2717,2721,2725],{"type":43,"tag":234,"props":2690,"children":2691},{"style":347},[2692],{"type":49,"value":379},{"type":43,"tag":234,"props":2694,"children":2695},{"style":251},[2696],{"type":49,"value":2116},{"type":43,"tag":234,"props":2698,"children":2699},{"style":251},[2700],{"type":49,"value":388},{"type":43,"tag":234,"props":2702,"children":2703},{"style":363},[2704],{"type":49,"value":393},{"type":43,"tag":234,"props":2706,"children":2707},{"style":251},[2708],{"type":49,"value":254},{"type":43,"tag":234,"props":2710,"children":2711},{"style":257},[2712],{"type":49,"value":402},{"type":43,"tag":234,"props":2714,"children":2715},{"style":251},[2716],{"type":49,"value":254},{"type":43,"tag":234,"props":2718,"children":2719},{"style":363},[2720],{"type":49,"value":411},{"type":43,"tag":234,"props":2722,"children":2723},{"style":357},[2724],{"type":49,"value":416},{"type":43,"tag":234,"props":2726,"children":2727},{"style":251},[2728],{"type":49,"value":269},{"type":43,"tag":234,"props":2730,"children":2731},{"class":236,"line":450},[2732],{"type":43,"tag":234,"props":2733,"children":2734},{"style":251},[2735],{"type":49,"value":669},{"type":43,"tag":234,"props":2737,"children":2738},{"class":236,"line":494},[2739],{"type":43,"tag":234,"props":2740,"children":2741},{"emptyLinePlaceholder":276},[2742],{"type":49,"value":279},{"type":43,"tag":234,"props":2744,"children":2745},{"class":236,"line":531},[2746,2750,2754,2758,2763,2767,2772,2776,2781,2785,2789,2793],{"type":43,"tag":234,"props":2747,"children":2748},{"style":286},[2749],{"type":49,"value":289},{"type":43,"tag":234,"props":2751,"children":2752},{"style":286},[2753],{"type":49,"value":294},{"type":43,"tag":234,"props":2755,"children":2756},{"style":297},[2757],{"type":49,"value":300},{"type":43,"tag":234,"props":2759,"children":2760},{"style":303},[2761],{"type":49,"value":2762}," SyntaxHighlight",{"type":43,"tag":234,"props":2764,"children":2765},{"style":251},[2766],{"type":49,"value":970},{"type":43,"tag":234,"props":2768,"children":2769},{"style":318},[2770],{"type":49,"value":2771}," code",{"type":43,"tag":234,"props":2773,"children":2774},{"style":251},[2775],{"type":49,"value":586},{"type":43,"tag":234,"props":2777,"children":2778},{"style":318},[2779],{"type":49,"value":2780}," language",{"type":43,"tag":234,"props":2782,"children":2783},{"style":251},[2784],{"type":49,"value":980},{"type":43,"tag":234,"props":2786,"children":2787},{"style":357},[2788],{"type":49,"value":863},{"type":43,"tag":234,"props":2790,"children":2791},{"style":251},[2792],{"type":49,"value":596},{"type":43,"tag":234,"props":2794,"children":2795},{"style":251},[2796],{"type":49,"value":340},{"type":43,"tag":234,"props":2798,"children":2799},{"class":236,"line":547},[2800,2804],{"type":43,"tag":234,"props":2801,"children":2802},{"style":286},[2803],{"type":49,"value":442},{"type":43,"tag":234,"props":2805,"children":2806},{"style":347},[2807],{"type":49,"value":447},{"type":43,"tag":234,"props":2809,"children":2810},{"class":236,"line":608},[2811,2815,2820,2824,2828,2833,2838,2843,2847,2852],{"type":43,"tag":234,"props":2812,"children":2813},{"style":251},[2814],{"type":49,"value":456},{"type":43,"tag":234,"props":2816,"children":2817},{"style":357},[2818],{"type":49,"value":2819},"SyntaxHighlighter",{"type":43,"tag":234,"props":2821,"children":2822},{"style":297},[2823],{"type":49,"value":2780},{"type":43,"tag":234,"props":2825,"children":2826},{"style":251},[2827],{"type":49,"value":628},{"type":43,"tag":234,"props":2829,"children":2830},{"style":363},[2831],{"type":49,"value":2832},"language",{"type":43,"tag":234,"props":2834,"children":2835},{"style":251},[2836],{"type":49,"value":2837},"} ",{"type":43,"tag":234,"props":2839,"children":2840},{"style":297},[2841],{"type":49,"value":2842},"style",{"type":43,"tag":234,"props":2844,"children":2845},{"style":251},[2846],{"type":49,"value":628},{"type":43,"tag":234,"props":2848,"children":2849},{"style":363},[2850],{"type":49,"value":2851},"docco",{"type":43,"tag":234,"props":2853,"children":2854},{"style":251},[2855],{"type":49,"value":2856},"}>\n",{"type":43,"tag":234,"props":2858,"children":2859},{"class":236,"line":658},[2860,2865,2869],{"type":43,"tag":234,"props":2861,"children":2862},{"style":251},[2863],{"type":49,"value":2864}," {",{"type":43,"tag":234,"props":2866,"children":2867},{"style":363},[2868],{"type":49,"value":58},{"type":43,"tag":234,"props":2870,"children":2871},{"style":251},[2872],{"type":49,"value":669},{"type":43,"tag":234,"props":2874,"children":2875},{"class":236,"line":672},[2876,2880,2884],{"type":43,"tag":234,"props":2877,"children":2878},{"style":251},[2879],{"type":49,"value":695},{"type":43,"tag":234,"props":2881,"children":2882},{"style":357},[2883],{"type":49,"value":2819},{"type":43,"tag":234,"props":2885,"children":2886},{"style":251},[2887],{"type":49,"value":528},{"type":43,"tag":234,"props":2889,"children":2890},{"class":236,"line":689},[2891,2895],{"type":43,"tag":234,"props":2892,"children":2893},{"style":347},[2894],{"type":49,"value":712},{"type":43,"tag":234,"props":2896,"children":2897},{"style":251},[2898],{"type":49,"value":269},{"type":43,"tag":234,"props":2900,"children":2901},{"class":236,"line":706},[2902],{"type":43,"tag":234,"props":2903,"children":2904},{"style":251},[2905],{"type":49,"value":669},{"type":43,"tag":223,"props":2907,"children":2909},{"className":225,"code":2908,"language":227,"meta":228,"style":228},"\u002F\u002F components\u002Fchart.tsx\n\"use dom\";\n\nimport {\n LineChart,\n Line,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n} from \"recharts\";\n\ninterface Props {\n data: Array\u003C{ name: string; value: number }>;\n dom: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function Chart({ data }: Props) {\n return (\n \u003CLineChart width={400} height={300} data={data}>\n \u003CCartesianGrid strokeDasharray=\"3 3\" \u002F>\n \u003CXAxis dataKey=\"name\" \u002F>\n \u003CYAxis \u002F>\n \u003CTooltip \u002F>\n \u003CLine type=\"monotone\" dataKey=\"value\" stroke=\"#8884d8\" \u002F>\n \u003C\u002FLineChart>\n );\n}\n",[2910],{"type":43,"tag":58,"props":2911,"children":2912},{"__ignoreMap":228},[2913,2921,2940,2947,2958,2970,2982,2994,3006,3018,3030,3058,3065,3080,3132,3175,3182,3189,3233,3244,3307,3347,3386,3403,3420,3501,3517,3529],{"type":43,"tag":234,"props":2914,"children":2915},{"class":236,"line":237},[2916],{"type":43,"tag":234,"props":2917,"children":2918},{"style":241},[2919],{"type":49,"value":2920},"\u002F\u002F components\u002Fchart.tsx\n",{"type":43,"tag":234,"props":2922,"children":2923},{"class":236,"line":247},[2924,2928,2932,2936],{"type":43,"tag":234,"props":2925,"children":2926},{"style":251},[2927],{"type":49,"value":254},{"type":43,"tag":234,"props":2929,"children":2930},{"style":257},[2931],{"type":49,"value":260},{"type":43,"tag":234,"props":2933,"children":2934},{"style":251},[2935],{"type":49,"value":254},{"type":43,"tag":234,"props":2937,"children":2938},{"style":251},[2939],{"type":49,"value":269},{"type":43,"tag":234,"props":2941,"children":2942},{"class":236,"line":272},[2943],{"type":43,"tag":234,"props":2944,"children":2945},{"emptyLinePlaceholder":276},[2946],{"type":49,"value":279},{"type":43,"tag":234,"props":2948,"children":2949},{"class":236,"line":282},[2950,2954],{"type":43,"tag":234,"props":2951,"children":2952},{"style":286},[2953],{"type":49,"value":1456},{"type":43,"tag":234,"props":2955,"children":2956},{"style":251},[2957],{"type":49,"value":340},{"type":43,"tag":234,"props":2959,"children":2960},{"class":236,"line":314},[2961,2966],{"type":43,"tag":234,"props":2962,"children":2963},{"style":363},[2964],{"type":49,"value":2965}," LineChart",{"type":43,"tag":234,"props":2967,"children":2968},{"style":251},[2969],{"type":49,"value":326},{"type":43,"tag":234,"props":2971,"children":2972},{"class":236,"line":329},[2973,2978],{"type":43,"tag":234,"props":2974,"children":2975},{"style":363},[2976],{"type":49,"value":2977}," Line",{"type":43,"tag":234,"props":2979,"children":2980},{"style":251},[2981],{"type":49,"value":326},{"type":43,"tag":234,"props":2983,"children":2984},{"class":236,"line":343},[2985,2990],{"type":43,"tag":234,"props":2986,"children":2987},{"style":363},[2988],{"type":49,"value":2989}," XAxis",{"type":43,"tag":234,"props":2991,"children":2992},{"style":251},[2993],{"type":49,"value":326},{"type":43,"tag":234,"props":2995,"children":2996},{"class":236,"line":373},[2997,3002],{"type":43,"tag":234,"props":2998,"children":2999},{"style":363},[3000],{"type":49,"value":3001}," YAxis",{"type":43,"tag":234,"props":3003,"children":3004},{"style":251},[3005],{"type":49,"value":326},{"type":43,"tag":234,"props":3007,"children":3008},{"class":236,"line":423},[3009,3014],{"type":43,"tag":234,"props":3010,"children":3011},{"style":363},[3012],{"type":49,"value":3013}," CartesianGrid",{"type":43,"tag":234,"props":3015,"children":3016},{"style":251},[3017],{"type":49,"value":326},{"type":43,"tag":234,"props":3019,"children":3020},{"class":236,"line":436},[3021,3026],{"type":43,"tag":234,"props":3022,"children":3023},{"style":363},[3024],{"type":49,"value":3025}," Tooltip",{"type":43,"tag":234,"props":3027,"children":3028},{"style":251},[3029],{"type":49,"value":326},{"type":43,"tag":234,"props":3031,"children":3032},{"class":236,"line":450},[3033,3038,3042,3046,3050,3054],{"type":43,"tag":234,"props":3034,"children":3035},{"style":251},[3036],{"type":49,"value":3037},"}",{"type":43,"tag":234,"props":3039,"children":3040},{"style":286},[3041],{"type":49,"value":1474},{"type":43,"tag":234,"props":3043,"children":3044},{"style":251},[3045],{"type":49,"value":1157},{"type":43,"tag":234,"props":3047,"children":3048},{"style":257},[3049],{"type":49,"value":63},{"type":43,"tag":234,"props":3051,"children":3052},{"style":251},[3053],{"type":49,"value":254},{"type":43,"tag":234,"props":3055,"children":3056},{"style":251},[3057],{"type":49,"value":269},{"type":43,"tag":234,"props":3059,"children":3060},{"class":236,"line":494},[3061],{"type":43,"tag":234,"props":3062,"children":3063},{"emptyLinePlaceholder":276},[3064],{"type":49,"value":279},{"type":43,"tag":234,"props":3066,"children":3067},{"class":236,"line":531},[3068,3072,3076],{"type":43,"tag":234,"props":3069,"children":3070},{"style":297},[3071],{"type":49,"value":858},{"type":43,"tag":234,"props":3073,"children":3074},{"style":357},[3075],{"type":49,"value":863},{"type":43,"tag":234,"props":3077,"children":3078},{"style":251},[3079],{"type":49,"value":340},{"type":43,"tag":234,"props":3081,"children":3082},{"class":236,"line":547},[3083,3087,3091,3096,3100,3104,3108,3112,3116,3120,3124,3128],{"type":43,"tag":234,"props":3084,"children":3085},{"style":347},[3086],{"type":49,"value":321},{"type":43,"tag":234,"props":3088,"children":3089},{"style":251},[3090],{"type":49,"value":354},{"type":43,"tag":234,"props":3092,"children":3093},{"style":357},[3094],{"type":49,"value":3095}," Array",{"type":43,"tag":234,"props":3097,"children":3098},{"style":251},[3099],{"type":49,"value":2086},{"type":43,"tag":234,"props":3101,"children":3102},{"style":347},[3103],{"type":49,"value":1725},{"type":43,"tag":234,"props":3105,"children":3106},{"style":251},[3107],{"type":49,"value":354},{"type":43,"tag":234,"props":3109,"children":3110},{"style":357},[3111],{"type":49,"value":884},{"type":43,"tag":234,"props":3113,"children":3114},{"style":251},[3115],{"type":49,"value":1738},{"type":43,"tag":234,"props":3117,"children":3118},{"style":347},[3119],{"type":49,"value":1743},{"type":43,"tag":234,"props":3121,"children":3122},{"style":251},[3123],{"type":49,"value":354},{"type":43,"tag":234,"props":3125,"children":3126},{"style":357},[3127],{"type":49,"value":360},{"type":43,"tag":234,"props":3129,"children":3130},{"style":251},[3131],{"type":49,"value":2104},{"type":43,"tag":234,"props":3133,"children":3134},{"class":236,"line":608},[3135,3139,3143,3147,3151,3155,3159,3163,3167,3171],{"type":43,"tag":234,"props":3136,"children":3137},{"style":347},[3138],{"type":49,"value":379},{"type":43,"tag":234,"props":3140,"children":3141},{"style":251},[3142],{"type":49,"value":354},{"type":43,"tag":234,"props":3144,"children":3145},{"style":251},[3146],{"type":49,"value":388},{"type":43,"tag":234,"props":3148,"children":3149},{"style":363},[3150],{"type":49,"value":393},{"type":43,"tag":234,"props":3152,"children":3153},{"style":251},[3154],{"type":49,"value":254},{"type":43,"tag":234,"props":3156,"children":3157},{"style":257},[3158],{"type":49,"value":402},{"type":43,"tag":234,"props":3160,"children":3161},{"style":251},[3162],{"type":49,"value":254},{"type":43,"tag":234,"props":3164,"children":3165},{"style":363},[3166],{"type":49,"value":411},{"type":43,"tag":234,"props":3168,"children":3169},{"style":357},[3170],{"type":49,"value":416},{"type":43,"tag":234,"props":3172,"children":3173},{"style":251},[3174],{"type":49,"value":269},{"type":43,"tag":234,"props":3176,"children":3177},{"class":236,"line":658},[3178],{"type":43,"tag":234,"props":3179,"children":3180},{"style":251},[3181],{"type":49,"value":669},{"type":43,"tag":234,"props":3183,"children":3184},{"class":236,"line":672},[3185],{"type":43,"tag":234,"props":3186,"children":3187},{"emptyLinePlaceholder":276},[3188],{"type":49,"value":279},{"type":43,"tag":234,"props":3190,"children":3191},{"class":236,"line":689},[3192,3196,3200,3204,3209,3213,3217,3221,3225,3229],{"type":43,"tag":234,"props":3193,"children":3194},{"style":286},[3195],{"type":49,"value":289},{"type":43,"tag":234,"props":3197,"children":3198},{"style":286},[3199],{"type":49,"value":294},{"type":43,"tag":234,"props":3201,"children":3202},{"style":297},[3203],{"type":49,"value":300},{"type":43,"tag":234,"props":3205,"children":3206},{"style":303},[3207],{"type":49,"value":3208}," Chart",{"type":43,"tag":234,"props":3210,"children":3211},{"style":251},[3212],{"type":49,"value":970},{"type":43,"tag":234,"props":3214,"children":3215},{"style":318},[3216],{"type":49,"value":1815},{"type":43,"tag":234,"props":3218,"children":3219},{"style":251},[3220],{"type":49,"value":980},{"type":43,"tag":234,"props":3222,"children":3223},{"style":357},[3224],{"type":49,"value":863},{"type":43,"tag":234,"props":3226,"children":3227},{"style":251},[3228],{"type":49,"value":596},{"type":43,"tag":234,"props":3230,"children":3231},{"style":251},[3232],{"type":49,"value":340},{"type":43,"tag":234,"props":3234,"children":3235},{"class":236,"line":706},[3236,3240],{"type":43,"tag":234,"props":3237,"children":3238},{"style":286},[3239],{"type":49,"value":442},{"type":43,"tag":234,"props":3241,"children":3242},{"style":347},[3243],{"type":49,"value":447},{"type":43,"tag":234,"props":3245,"children":3246},{"class":236,"line":719},[3247,3251,3256,3260,3264,3269,3273,3278,3282,3287,3291,3295,3299,3303],{"type":43,"tag":234,"props":3248,"children":3249},{"style":251},[3250],{"type":49,"value":456},{"type":43,"tag":234,"props":3252,"children":3253},{"style":357},[3254],{"type":49,"value":3255},"LineChart",{"type":43,"tag":234,"props":3257,"children":3258},{"style":297},[3259],{"type":49,"value":1222},{"type":43,"tag":234,"props":3261,"children":3262},{"style":251},[3263],{"type":49,"value":628},{"type":43,"tag":234,"props":3265,"children":3266},{"style":483},[3267],{"type":49,"value":3268},"400",{"type":43,"tag":234,"props":3270,"children":3271},{"style":251},[3272],{"type":49,"value":2837},{"type":43,"tag":234,"props":3274,"children":3275},{"style":297},[3276],{"type":49,"value":3277},"height",{"type":43,"tag":234,"props":3279,"children":3280},{"style":251},[3281],{"type":49,"value":628},{"type":43,"tag":234,"props":3283,"children":3284},{"style":483},[3285],{"type":49,"value":3286},"300",{"type":43,"tag":234,"props":3288,"children":3289},{"style":251},[3290],{"type":49,"value":2837},{"type":43,"tag":234,"props":3292,"children":3293},{"style":297},[3294],{"type":49,"value":558},{"type":43,"tag":234,"props":3296,"children":3297},{"style":251},[3298],{"type":49,"value":628},{"type":43,"tag":234,"props":3300,"children":3301},{"style":363},[3302],{"type":49,"value":558},{"type":43,"tag":234,"props":3304,"children":3305},{"style":251},[3306],{"type":49,"value":2856},{"type":43,"tag":234,"props":3308,"children":3309},{"class":236,"line":2493},[3310,3314,3319,3324,3329,3333,3338,3342],{"type":43,"tag":234,"props":3311,"children":3312},{"style":251},[3313],{"type":49,"value":500},{"type":43,"tag":234,"props":3315,"children":3316},{"style":357},[3317],{"type":49,"value":3318},"CartesianGrid",{"type":43,"tag":234,"props":3320,"children":3321},{"style":297},[3322],{"type":49,"value":3323}," strokeDasharray",{"type":43,"tag":234,"props":3325,"children":3326},{"style":251},[3327],{"type":49,"value":3328},"=",{"type":43,"tag":234,"props":3330,"children":3331},{"style":251},[3332],{"type":49,"value":254},{"type":43,"tag":234,"props":3334,"children":3335},{"style":257},[3336],{"type":49,"value":3337},"3 3",{"type":43,"tag":234,"props":3339,"children":3340},{"style":251},[3341],{"type":49,"value":254},{"type":43,"tag":234,"props":3343,"children":3344},{"style":251},[3345],{"type":49,"value":3346}," \u002F>\n",{"type":43,"tag":234,"props":3348,"children":3350},{"class":236,"line":3349},22,[3351,3355,3360,3365,3369,3373,3378,3382],{"type":43,"tag":234,"props":3352,"children":3353},{"style":251},[3354],{"type":49,"value":500},{"type":43,"tag":234,"props":3356,"children":3357},{"style":357},[3358],{"type":49,"value":3359},"XAxis",{"type":43,"tag":234,"props":3361,"children":3362},{"style":297},[3363],{"type":49,"value":3364}," dataKey",{"type":43,"tag":234,"props":3366,"children":3367},{"style":251},[3368],{"type":49,"value":3328},{"type":43,"tag":234,"props":3370,"children":3371},{"style":251},[3372],{"type":49,"value":254},{"type":43,"tag":234,"props":3374,"children":3375},{"style":257},[3376],{"type":49,"value":3377},"name",{"type":43,"tag":234,"props":3379,"children":3380},{"style":251},[3381],{"type":49,"value":254},{"type":43,"tag":234,"props":3383,"children":3384},{"style":251},[3385],{"type":49,"value":3346},{"type":43,"tag":234,"props":3387,"children":3389},{"class":236,"line":3388},23,[3390,3394,3399],{"type":43,"tag":234,"props":3391,"children":3392},{"style":251},[3393],{"type":49,"value":500},{"type":43,"tag":234,"props":3395,"children":3396},{"style":357},[3397],{"type":49,"value":3398},"YAxis",{"type":43,"tag":234,"props":3400,"children":3401},{"style":251},[3402],{"type":49,"value":3346},{"type":43,"tag":234,"props":3404,"children":3406},{"class":236,"line":3405},24,[3407,3411,3416],{"type":43,"tag":234,"props":3408,"children":3409},{"style":251},[3410],{"type":49,"value":500},{"type":43,"tag":234,"props":3412,"children":3413},{"style":357},[3414],{"type":49,"value":3415},"Tooltip",{"type":43,"tag":234,"props":3417,"children":3418},{"style":251},[3419],{"type":49,"value":3346},{"type":43,"tag":234,"props":3421,"children":3423},{"class":236,"line":3422},25,[3424,3428,3433,3438,3442,3446,3451,3455,3459,3463,3467,3471,3475,3480,3484,3488,3493,3497],{"type":43,"tag":234,"props":3425,"children":3426},{"style":251},[3427],{"type":49,"value":500},{"type":43,"tag":234,"props":3429,"children":3430},{"style":357},[3431],{"type":49,"value":3432},"Line",{"type":43,"tag":234,"props":3434,"children":3435},{"style":297},[3436],{"type":49,"value":3437}," type",{"type":43,"tag":234,"props":3439,"children":3440},{"style":251},[3441],{"type":49,"value":3328},{"type":43,"tag":234,"props":3443,"children":3444},{"style":251},[3445],{"type":49,"value":254},{"type":43,"tag":234,"props":3447,"children":3448},{"style":257},[3449],{"type":49,"value":3450},"monotone",{"type":43,"tag":234,"props":3452,"children":3453},{"style":251},[3454],{"type":49,"value":254},{"type":43,"tag":234,"props":3456,"children":3457},{"style":297},[3458],{"type":49,"value":3364},{"type":43,"tag":234,"props":3460,"children":3461},{"style":251},[3462],{"type":49,"value":3328},{"type":43,"tag":234,"props":3464,"children":3465},{"style":251},[3466],{"type":49,"value":254},{"type":43,"tag":234,"props":3468,"children":3469},{"style":257},[3470],{"type":49,"value":581},{"type":43,"tag":234,"props":3472,"children":3473},{"style":251},[3474],{"type":49,"value":254},{"type":43,"tag":234,"props":3476,"children":3477},{"style":297},[3478],{"type":49,"value":3479}," stroke",{"type":43,"tag":234,"props":3481,"children":3482},{"style":251},[3483],{"type":49,"value":3328},{"type":43,"tag":234,"props":3485,"children":3486},{"style":251},[3487],{"type":49,"value":254},{"type":43,"tag":234,"props":3489,"children":3490},{"style":257},[3491],{"type":49,"value":3492},"#8884d8",{"type":43,"tag":234,"props":3494,"children":3495},{"style":251},[3496],{"type":49,"value":254},{"type":43,"tag":234,"props":3498,"children":3499},{"style":251},[3500],{"type":49,"value":3346},{"type":43,"tag":234,"props":3502,"children":3504},{"class":236,"line":3503},26,[3505,3509,3513],{"type":43,"tag":234,"props":3506,"children":3507},{"style":251},[3508],{"type":49,"value":695},{"type":43,"tag":234,"props":3510,"children":3511},{"style":357},[3512],{"type":49,"value":3255},{"type":43,"tag":234,"props":3514,"children":3515},{"style":251},[3516],{"type":49,"value":528},{"type":43,"tag":234,"props":3518,"children":3520},{"class":236,"line":3519},27,[3521,3525],{"type":43,"tag":234,"props":3522,"children":3523},{"style":347},[3524],{"type":49,"value":712},{"type":43,"tag":234,"props":3526,"children":3527},{"style":251},[3528],{"type":49,"value":269},{"type":43,"tag":234,"props":3530,"children":3532},{"class":236,"line":3531},28,[3533],{"type":43,"tag":234,"props":3534,"children":3535},{"style":251},[3536],{"type":49,"value":669},{"type":43,"tag":44,"props":3538,"children":3540},{"id":3539},"css-in-dom-components",[3541],{"type":49,"value":3542},"CSS in DOM Components",{"type":43,"tag":52,"props":3544,"children":3545},{},[3546],{"type":49,"value":3547},"CSS imports must be in the DOM component file since they run in isolated context:",{"type":43,"tag":223,"props":3549,"children":3551},{"className":225,"code":3550,"language":227,"meta":228,"style":228},"\u002F\u002F components\u002Fstyled-component.tsx\n\"use dom\";\n\nimport \"@\u002Fstyles.css\"; \u002F\u002F CSS file in same directory\n\nexport default function StyledComponent({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return (\n \u003Cdiv className=\"container\">\n \u003Ch1 className=\"title\">Styled Content\u003C\u002Fh1>\n \u003C\u002Fdiv>\n );\n}\n",[3552],{"type":43,"tag":58,"props":3553,"children":3554},{"__ignoreMap":228},[3555,3563,3582,3589,3618,3625,3649,3660,3671,3714,3725,3736,3773,3827,3842,3853],{"type":43,"tag":234,"props":3556,"children":3557},{"class":236,"line":237},[3558],{"type":43,"tag":234,"props":3559,"children":3560},{"style":241},[3561],{"type":49,"value":3562},"\u002F\u002F components\u002Fstyled-component.tsx\n",{"type":43,"tag":234,"props":3564,"children":3565},{"class":236,"line":247},[3566,3570,3574,3578],{"type":43,"tag":234,"props":3567,"children":3568},{"style":251},[3569],{"type":49,"value":254},{"type":43,"tag":234,"props":3571,"children":3572},{"style":257},[3573],{"type":49,"value":260},{"type":43,"tag":234,"props":3575,"children":3576},{"style":251},[3577],{"type":49,"value":254},{"type":43,"tag":234,"props":3579,"children":3580},{"style":251},[3581],{"type":49,"value":269},{"type":43,"tag":234,"props":3583,"children":3584},{"class":236,"line":272},[3585],{"type":43,"tag":234,"props":3586,"children":3587},{"emptyLinePlaceholder":276},[3588],{"type":49,"value":279},{"type":43,"tag":234,"props":3590,"children":3591},{"class":236,"line":282},[3592,3596,3600,3605,3609,3613],{"type":43,"tag":234,"props":3593,"children":3594},{"style":286},[3595],{"type":49,"value":1456},{"type":43,"tag":234,"props":3597,"children":3598},{"style":251},[3599],{"type":49,"value":1157},{"type":43,"tag":234,"props":3601,"children":3602},{"style":257},[3603],{"type":49,"value":3604},"@\u002Fstyles.css",{"type":43,"tag":234,"props":3606,"children":3607},{"style":251},[3608],{"type":49,"value":254},{"type":43,"tag":234,"props":3610,"children":3611},{"style":251},[3612],{"type":49,"value":1738},{"type":43,"tag":234,"props":3614,"children":3615},{"style":241},[3616],{"type":49,"value":3617}," \u002F\u002F CSS file in same directory\n",{"type":43,"tag":234,"props":3619,"children":3620},{"class":236,"line":314},[3621],{"type":43,"tag":234,"props":3622,"children":3623},{"emptyLinePlaceholder":276},[3624],{"type":49,"value":279},{"type":43,"tag":234,"props":3626,"children":3627},{"class":236,"line":329},[3628,3632,3636,3640,3645],{"type":43,"tag":234,"props":3629,"children":3630},{"style":286},[3631],{"type":49,"value":289},{"type":43,"tag":234,"props":3633,"children":3634},{"style":286},[3635],{"type":49,"value":294},{"type":43,"tag":234,"props":3637,"children":3638},{"style":297},[3639],{"type":49,"value":300},{"type":43,"tag":234,"props":3641,"children":3642},{"style":303},[3643],{"type":49,"value":3644}," StyledComponent",{"type":43,"tag":234,"props":3646,"children":3647},{"style":251},[3648],{"type":49,"value":311},{"type":43,"tag":234,"props":3650,"children":3651},{"class":236,"line":343},[3652,3656],{"type":43,"tag":234,"props":3653,"children":3654},{"style":318},[3655],{"type":49,"value":379},{"type":43,"tag":234,"props":3657,"children":3658},{"style":251},[3659],{"type":49,"value":326},{"type":43,"tag":234,"props":3661,"children":3662},{"class":236,"line":373},[3663,3667],{"type":43,"tag":234,"props":3664,"children":3665},{"style":251},[3666],{"type":49,"value":335},{"type":43,"tag":234,"props":3668,"children":3669},{"style":251},[3670],{"type":49,"value":340},{"type":43,"tag":234,"props":3672,"children":3673},{"class":236,"line":423},[3674,3678,3682,3686,3690,3694,3698,3702,3706,3710],{"type":43,"tag":234,"props":3675,"children":3676},{"style":347},[3677],{"type":49,"value":379},{"type":43,"tag":234,"props":3679,"children":3680},{"style":251},[3681],{"type":49,"value":354},{"type":43,"tag":234,"props":3683,"children":3684},{"style":251},[3685],{"type":49,"value":388},{"type":43,"tag":234,"props":3687,"children":3688},{"style":363},[3689],{"type":49,"value":393},{"type":43,"tag":234,"props":3691,"children":3692},{"style":251},[3693],{"type":49,"value":254},{"type":43,"tag":234,"props":3695,"children":3696},{"style":257},[3697],{"type":49,"value":402},{"type":43,"tag":234,"props":3699,"children":3700},{"style":251},[3701],{"type":49,"value":254},{"type":43,"tag":234,"props":3703,"children":3704},{"style":363},[3705],{"type":49,"value":411},{"type":43,"tag":234,"props":3707,"children":3708},{"style":357},[3709],{"type":49,"value":416},{"type":43,"tag":234,"props":3711,"children":3712},{"style":251},[3713],{"type":49,"value":269},{"type":43,"tag":234,"props":3715,"children":3716},{"class":236,"line":436},[3717,3721],{"type":43,"tag":234,"props":3718,"children":3719},{"style":251},[3720],{"type":49,"value":429},{"type":43,"tag":234,"props":3722,"children":3723},{"style":251},[3724],{"type":49,"value":340},{"type":43,"tag":234,"props":3726,"children":3727},{"class":236,"line":450},[3728,3732],{"type":43,"tag":234,"props":3729,"children":3730},{"style":286},[3731],{"type":49,"value":442},{"type":43,"tag":234,"props":3733,"children":3734},{"style":347},[3735],{"type":49,"value":447},{"type":43,"tag":234,"props":3737,"children":3738},{"class":236,"line":494},[3739,3743,3747,3752,3756,3760,3765,3769],{"type":43,"tag":234,"props":3740,"children":3741},{"style":251},[3742],{"type":49,"value":456},{"type":43,"tag":234,"props":3744,"children":3745},{"style":347},[3746],{"type":49,"value":461},{"type":43,"tag":234,"props":3748,"children":3749},{"style":297},[3750],{"type":49,"value":3751}," className",{"type":43,"tag":234,"props":3753,"children":3754},{"style":251},[3755],{"type":49,"value":3328},{"type":43,"tag":234,"props":3757,"children":3758},{"style":251},[3759],{"type":49,"value":254},{"type":43,"tag":234,"props":3761,"children":3762},{"style":257},[3763],{"type":49,"value":3764},"container",{"type":43,"tag":234,"props":3766,"children":3767},{"style":251},[3768],{"type":49,"value":254},{"type":43,"tag":234,"props":3770,"children":3771},{"style":251},[3772],{"type":49,"value":528},{"type":43,"tag":234,"props":3774,"children":3775},{"class":236,"line":531},[3776,3780,3785,3789,3793,3797,3802,3806,3810,3815,3819,3823],{"type":43,"tag":234,"props":3777,"children":3778},{"style":251},[3779],{"type":49,"value":500},{"type":43,"tag":234,"props":3781,"children":3782},{"style":347},[3783],{"type":49,"value":3784},"h1",{"type":43,"tag":234,"props":3786,"children":3787},{"style":297},[3788],{"type":49,"value":3751},{"type":43,"tag":234,"props":3790,"children":3791},{"style":251},[3792],{"type":49,"value":3328},{"type":43,"tag":234,"props":3794,"children":3795},{"style":251},[3796],{"type":49,"value":254},{"type":43,"tag":234,"props":3798,"children":3799},{"style":257},[3800],{"type":49,"value":3801},"title",{"type":43,"tag":234,"props":3803,"children":3804},{"style":251},[3805],{"type":49,"value":254},{"type":43,"tag":234,"props":3807,"children":3808},{"style":251},[3809],{"type":49,"value":509},{"type":43,"tag":234,"props":3811,"children":3812},{"style":363},[3813],{"type":49,"value":3814},"Styled Content",{"type":43,"tag":234,"props":3816,"children":3817},{"style":251},[3818],{"type":49,"value":519},{"type":43,"tag":234,"props":3820,"children":3821},{"style":347},[3822],{"type":49,"value":3784},{"type":43,"tag":234,"props":3824,"children":3825},{"style":251},[3826],{"type":49,"value":528},{"type":43,"tag":234,"props":3828,"children":3829},{"class":236,"line":547},[3830,3834,3838],{"type":43,"tag":234,"props":3831,"children":3832},{"style":251},[3833],{"type":49,"value":695},{"type":43,"tag":234,"props":3835,"children":3836},{"style":347},[3837],{"type":49,"value":461},{"type":43,"tag":234,"props":3839,"children":3840},{"style":251},[3841],{"type":49,"value":528},{"type":43,"tag":234,"props":3843,"children":3844},{"class":236,"line":608},[3845,3849],{"type":43,"tag":234,"props":3846,"children":3847},{"style":347},[3848],{"type":49,"value":712},{"type":43,"tag":234,"props":3850,"children":3851},{"style":251},[3852],{"type":49,"value":269},{"type":43,"tag":234,"props":3854,"children":3855},{"class":236,"line":658},[3856],{"type":43,"tag":234,"props":3857,"children":3858},{"style":251},[3859],{"type":49,"value":669},{"type":43,"tag":52,"props":3861,"children":3862},{},[3863],{"type":49,"value":3864},"Or use inline styles \u002F CSS-in-JS:",{"type":43,"tag":223,"props":3866,"children":3868},{"className":225,"code":3867,"language":227,"meta":228,"style":228},"\"use dom\";\n\nconst styles = {\n container: {\n padding: 20,\n backgroundColor: \"#f0f0f0\",\n },\n title: {\n fontSize: 24,\n color: \"#333\",\n },\n};\n\nexport default function StyledComponent({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return (\n \u003Cdiv style={styles.container}>\n \u003Ch1 style={styles.title}>Styled Content\u003C\u002Fh1>\n \u003C\u002Fdiv>\n );\n}\n",[3869],{"type":43,"tag":58,"props":3870,"children":3871},{"__ignoreMap":228},[3872,3891,3898,3919,3935,3955,3984,3992,4008,4029,4058,4065,4073,4080,4103,4114,4125,4168,4179,4190,4226,4277,4292,4303],{"type":43,"tag":234,"props":3873,"children":3874},{"class":236,"line":237},[3875,3879,3883,3887],{"type":43,"tag":234,"props":3876,"children":3877},{"style":251},[3878],{"type":49,"value":254},{"type":43,"tag":234,"props":3880,"children":3881},{"style":257},[3882],{"type":49,"value":260},{"type":43,"tag":234,"props":3884,"children":3885},{"style":251},[3886],{"type":49,"value":254},{"type":43,"tag":234,"props":3888,"children":3889},{"style":251},[3890],{"type":49,"value":269},{"type":43,"tag":234,"props":3892,"children":3893},{"class":236,"line":247},[3894],{"type":43,"tag":234,"props":3895,"children":3896},{"emptyLinePlaceholder":276},[3897],{"type":49,"value":279},{"type":43,"tag":234,"props":3899,"children":3900},{"class":236,"line":272},[3901,3906,3911,3915],{"type":43,"tag":234,"props":3902,"children":3903},{"style":297},[3904],{"type":49,"value":3905},"const",{"type":43,"tag":234,"props":3907,"children":3908},{"style":363},[3909],{"type":49,"value":3910}," styles ",{"type":43,"tag":234,"props":3912,"children":3913},{"style":251},[3914],{"type":49,"value":3328},{"type":43,"tag":234,"props":3916,"children":3917},{"style":251},[3918],{"type":49,"value":340},{"type":43,"tag":234,"props":3920,"children":3921},{"class":236,"line":282},[3922,3927,3931],{"type":43,"tag":234,"props":3923,"children":3924},{"style":347},[3925],{"type":49,"value":3926}," container",{"type":43,"tag":234,"props":3928,"children":3929},{"style":251},[3930],{"type":49,"value":354},{"type":43,"tag":234,"props":3932,"children":3933},{"style":251},[3934],{"type":49,"value":340},{"type":43,"tag":234,"props":3936,"children":3937},{"class":236,"line":314},[3938,3943,3947,3951],{"type":43,"tag":234,"props":3939,"children":3940},{"style":347},[3941],{"type":49,"value":3942}," padding",{"type":43,"tag":234,"props":3944,"children":3945},{"style":251},[3946],{"type":49,"value":354},{"type":43,"tag":234,"props":3948,"children":3949},{"style":483},[3950],{"type":49,"value":486},{"type":43,"tag":234,"props":3952,"children":3953},{"style":251},[3954],{"type":49,"value":326},{"type":43,"tag":234,"props":3956,"children":3957},{"class":236,"line":329},[3958,3963,3967,3971,3976,3980],{"type":43,"tag":234,"props":3959,"children":3960},{"style":347},[3961],{"type":49,"value":3962}," backgroundColor",{"type":43,"tag":234,"props":3964,"children":3965},{"style":251},[3966],{"type":49,"value":354},{"type":43,"tag":234,"props":3968,"children":3969},{"style":251},[3970],{"type":49,"value":1157},{"type":43,"tag":234,"props":3972,"children":3973},{"style":257},[3974],{"type":49,"value":3975},"#f0f0f0",{"type":43,"tag":234,"props":3977,"children":3978},{"style":251},[3979],{"type":49,"value":254},{"type":43,"tag":234,"props":3981,"children":3982},{"style":251},[3983],{"type":49,"value":326},{"type":43,"tag":234,"props":3985,"children":3986},{"class":236,"line":343},[3987],{"type":43,"tag":234,"props":3988,"children":3989},{"style":251},[3990],{"type":49,"value":3991}," },\n",{"type":43,"tag":234,"props":3993,"children":3994},{"class":236,"line":373},[3995,4000,4004],{"type":43,"tag":234,"props":3996,"children":3997},{"style":347},[3998],{"type":49,"value":3999}," title",{"type":43,"tag":234,"props":4001,"children":4002},{"style":251},[4003],{"type":49,"value":354},{"type":43,"tag":234,"props":4005,"children":4006},{"style":251},[4007],{"type":49,"value":340},{"type":43,"tag":234,"props":4009,"children":4010},{"class":236,"line":423},[4011,4016,4020,4025],{"type":43,"tag":234,"props":4012,"children":4013},{"style":347},[4014],{"type":49,"value":4015}," fontSize",{"type":43,"tag":234,"props":4017,"children":4018},{"style":251},[4019],{"type":49,"value":354},{"type":43,"tag":234,"props":4021,"children":4022},{"style":483},[4023],{"type":49,"value":4024}," 24",{"type":43,"tag":234,"props":4026,"children":4027},{"style":251},[4028],{"type":49,"value":326},{"type":43,"tag":234,"props":4030,"children":4031},{"class":236,"line":436},[4032,4037,4041,4045,4050,4054],{"type":43,"tag":234,"props":4033,"children":4034},{"style":347},[4035],{"type":49,"value":4036}," color",{"type":43,"tag":234,"props":4038,"children":4039},{"style":251},[4040],{"type":49,"value":354},{"type":43,"tag":234,"props":4042,"children":4043},{"style":251},[4044],{"type":49,"value":1157},{"type":43,"tag":234,"props":4046,"children":4047},{"style":257},[4048],{"type":49,"value":4049},"#333",{"type":43,"tag":234,"props":4051,"children":4052},{"style":251},[4053],{"type":49,"value":254},{"type":43,"tag":234,"props":4055,"children":4056},{"style":251},[4057],{"type":49,"value":326},{"type":43,"tag":234,"props":4059,"children":4060},{"class":236,"line":450},[4061],{"type":43,"tag":234,"props":4062,"children":4063},{"style":251},[4064],{"type":49,"value":3991},{"type":43,"tag":234,"props":4066,"children":4067},{"class":236,"line":494},[4068],{"type":43,"tag":234,"props":4069,"children":4070},{"style":251},[4071],{"type":49,"value":4072},"};\n",{"type":43,"tag":234,"props":4074,"children":4075},{"class":236,"line":531},[4076],{"type":43,"tag":234,"props":4077,"children":4078},{"emptyLinePlaceholder":276},[4079],{"type":49,"value":279},{"type":43,"tag":234,"props":4081,"children":4082},{"class":236,"line":547},[4083,4087,4091,4095,4099],{"type":43,"tag":234,"props":4084,"children":4085},{"style":286},[4086],{"type":49,"value":289},{"type":43,"tag":234,"props":4088,"children":4089},{"style":286},[4090],{"type":49,"value":294},{"type":43,"tag":234,"props":4092,"children":4093},{"style":297},[4094],{"type":49,"value":300},{"type":43,"tag":234,"props":4096,"children":4097},{"style":303},[4098],{"type":49,"value":3644},{"type":43,"tag":234,"props":4100,"children":4101},{"style":251},[4102],{"type":49,"value":311},{"type":43,"tag":234,"props":4104,"children":4105},{"class":236,"line":608},[4106,4110],{"type":43,"tag":234,"props":4107,"children":4108},{"style":318},[4109],{"type":49,"value":379},{"type":43,"tag":234,"props":4111,"children":4112},{"style":251},[4113],{"type":49,"value":326},{"type":43,"tag":234,"props":4115,"children":4116},{"class":236,"line":658},[4117,4121],{"type":43,"tag":234,"props":4118,"children":4119},{"style":251},[4120],{"type":49,"value":335},{"type":43,"tag":234,"props":4122,"children":4123},{"style":251},[4124],{"type":49,"value":340},{"type":43,"tag":234,"props":4126,"children":4127},{"class":236,"line":672},[4128,4132,4136,4140,4144,4148,4152,4156,4160,4164],{"type":43,"tag":234,"props":4129,"children":4130},{"style":347},[4131],{"type":49,"value":379},{"type":43,"tag":234,"props":4133,"children":4134},{"style":251},[4135],{"type":49,"value":354},{"type":43,"tag":234,"props":4137,"children":4138},{"style":251},[4139],{"type":49,"value":388},{"type":43,"tag":234,"props":4141,"children":4142},{"style":363},[4143],{"type":49,"value":393},{"type":43,"tag":234,"props":4145,"children":4146},{"style":251},[4147],{"type":49,"value":254},{"type":43,"tag":234,"props":4149,"children":4150},{"style":257},[4151],{"type":49,"value":402},{"type":43,"tag":234,"props":4153,"children":4154},{"style":251},[4155],{"type":49,"value":254},{"type":43,"tag":234,"props":4157,"children":4158},{"style":363},[4159],{"type":49,"value":411},{"type":43,"tag":234,"props":4161,"children":4162},{"style":357},[4163],{"type":49,"value":416},{"type":43,"tag":234,"props":4165,"children":4166},{"style":251},[4167],{"type":49,"value":269},{"type":43,"tag":234,"props":4169,"children":4170},{"class":236,"line":689},[4171,4175],{"type":43,"tag":234,"props":4172,"children":4173},{"style":251},[4174],{"type":49,"value":429},{"type":43,"tag":234,"props":4176,"children":4177},{"style":251},[4178],{"type":49,"value":340},{"type":43,"tag":234,"props":4180,"children":4181},{"class":236,"line":706},[4182,4186],{"type":43,"tag":234,"props":4183,"children":4184},{"style":286},[4185],{"type":49,"value":442},{"type":43,"tag":234,"props":4187,"children":4188},{"style":347},[4189],{"type":49,"value":447},{"type":43,"tag":234,"props":4191,"children":4192},{"class":236,"line":719},[4193,4197,4201,4205,4209,4214,4218,4222],{"type":43,"tag":234,"props":4194,"children":4195},{"style":251},[4196],{"type":49,"value":456},{"type":43,"tag":234,"props":4198,"children":4199},{"style":347},[4200],{"type":49,"value":461},{"type":43,"tag":234,"props":4202,"children":4203},{"style":297},[4204],{"type":49,"value":466},{"type":43,"tag":234,"props":4206,"children":4207},{"style":251},[4208],{"type":49,"value":628},{"type":43,"tag":234,"props":4210,"children":4211},{"style":363},[4212],{"type":49,"value":4213},"styles",{"type":43,"tag":234,"props":4215,"children":4216},{"style":251},[4217],{"type":49,"value":563},{"type":43,"tag":234,"props":4219,"children":4220},{"style":363},[4221],{"type":49,"value":3764},{"type":43,"tag":234,"props":4223,"children":4224},{"style":251},[4225],{"type":49,"value":2856},{"type":43,"tag":234,"props":4227,"children":4228},{"class":236,"line":2493},[4229,4233,4237,4241,4245,4249,4253,4257,4261,4265,4269,4273],{"type":43,"tag":234,"props":4230,"children":4231},{"style":251},[4232],{"type":49,"value":500},{"type":43,"tag":234,"props":4234,"children":4235},{"style":347},[4236],{"type":49,"value":3784},{"type":43,"tag":234,"props":4238,"children":4239},{"style":297},[4240],{"type":49,"value":466},{"type":43,"tag":234,"props":4242,"children":4243},{"style":251},[4244],{"type":49,"value":628},{"type":43,"tag":234,"props":4246,"children":4247},{"style":363},[4248],{"type":49,"value":4213},{"type":43,"tag":234,"props":4250,"children":4251},{"style":251},[4252],{"type":49,"value":563},{"type":43,"tag":234,"props":4254,"children":4255},{"style":363},[4256],{"type":49,"value":3801},{"type":43,"tag":234,"props":4258,"children":4259},{"style":251},[4260],{"type":49,"value":2473},{"type":43,"tag":234,"props":4262,"children":4263},{"style":363},[4264],{"type":49,"value":3814},{"type":43,"tag":234,"props":4266,"children":4267},{"style":251},[4268],{"type":49,"value":519},{"type":43,"tag":234,"props":4270,"children":4271},{"style":347},[4272],{"type":49,"value":3784},{"type":43,"tag":234,"props":4274,"children":4275},{"style":251},[4276],{"type":49,"value":528},{"type":43,"tag":234,"props":4278,"children":4279},{"class":236,"line":3349},[4280,4284,4288],{"type":43,"tag":234,"props":4281,"children":4282},{"style":251},[4283],{"type":49,"value":695},{"type":43,"tag":234,"props":4285,"children":4286},{"style":347},[4287],{"type":49,"value":461},{"type":43,"tag":234,"props":4289,"children":4290},{"style":251},[4291],{"type":49,"value":528},{"type":43,"tag":234,"props":4293,"children":4294},{"class":236,"line":3388},[4295,4299],{"type":43,"tag":234,"props":4296,"children":4297},{"style":347},[4298],{"type":49,"value":712},{"type":43,"tag":234,"props":4300,"children":4301},{"style":251},[4302],{"type":49,"value":269},{"type":43,"tag":234,"props":4304,"children":4305},{"class":236,"line":3405},[4306],{"type":43,"tag":234,"props":4307,"children":4308},{"style":251},[4309],{"type":49,"value":669},{"type":43,"tag":44,"props":4311,"children":4313},{"id":4312},"expo-router-in-dom-components",[4314],{"type":49,"value":4315},"Expo Router in DOM Components",{"type":43,"tag":52,"props":4317,"children":4318},{},[4319,4321,4327],{"type":49,"value":4320},"The expo-router ",{"type":43,"tag":58,"props":4322,"children":4324},{"className":4323},[],[4325],{"type":49,"value":4326},"\u003CLink \u002F>",{"type":49,"value":4328}," component and router API work inside DOM components:",{"type":43,"tag":223,"props":4330,"children":4332},{"className":225,"code":4331,"language":227,"meta":228,"style":228},"\"use dom\";\n\nimport { Link, useRouter } from \"expo-router\";\n\nexport default function Navigation({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n const router = useRouter();\n\n return (\n \u003Cnav>\n \u003CLink href=\"\u002Fabout\">About\u003C\u002FLink>\n \u003Cbutton onClick={() => router.push(\"\u002Fsettings\")}>Settings\u003C\u002Fbutton>\n \u003C\u002Fnav>\n );\n}\n",[4333],{"type":43,"tag":58,"props":4334,"children":4335},{"__ignoreMap":228},[4336,4355,4362,4412,4419,4443,4454,4465,4508,4519,4547,4554,4565,4581,4636,4715,4730,4741],{"type":43,"tag":234,"props":4337,"children":4338},{"class":236,"line":237},[4339,4343,4347,4351],{"type":43,"tag":234,"props":4340,"children":4341},{"style":251},[4342],{"type":49,"value":254},{"type":43,"tag":234,"props":4344,"children":4345},{"style":257},[4346],{"type":49,"value":260},{"type":43,"tag":234,"props":4348,"children":4349},{"style":251},[4350],{"type":49,"value":254},{"type":43,"tag":234,"props":4352,"children":4353},{"style":251},[4354],{"type":49,"value":269},{"type":43,"tag":234,"props":4356,"children":4357},{"class":236,"line":247},[4358],{"type":43,"tag":234,"props":4359,"children":4360},{"emptyLinePlaceholder":276},[4361],{"type":49,"value":279},{"type":43,"tag":234,"props":4363,"children":4364},{"class":236,"line":272},[4365,4369,4373,4378,4382,4387,4391,4395,4399,4404,4408],{"type":43,"tag":234,"props":4366,"children":4367},{"style":286},[4368],{"type":49,"value":1456},{"type":43,"tag":234,"props":4370,"children":4371},{"style":251},[4372],{"type":49,"value":1217},{"type":43,"tag":234,"props":4374,"children":4375},{"style":363},[4376],{"type":49,"value":4377}," Link",{"type":43,"tag":234,"props":4379,"children":4380},{"style":251},[4381],{"type":49,"value":586},{"type":43,"tag":234,"props":4383,"children":4384},{"style":363},[4385],{"type":49,"value":4386}," useRouter",{"type":43,"tag":234,"props":4388,"children":4389},{"style":251},[4390],{"type":49,"value":1254},{"type":43,"tag":234,"props":4392,"children":4393},{"style":286},[4394],{"type":49,"value":1474},{"type":43,"tag":234,"props":4396,"children":4397},{"style":251},[4398],{"type":49,"value":1157},{"type":43,"tag":234,"props":4400,"children":4401},{"style":257},[4402],{"type":49,"value":4403},"expo-router",{"type":43,"tag":234,"props":4405,"children":4406},{"style":251},[4407],{"type":49,"value":254},{"type":43,"tag":234,"props":4409,"children":4410},{"style":251},[4411],{"type":49,"value":269},{"type":43,"tag":234,"props":4413,"children":4414},{"class":236,"line":282},[4415],{"type":43,"tag":234,"props":4416,"children":4417},{"emptyLinePlaceholder":276},[4418],{"type":49,"value":279},{"type":43,"tag":234,"props":4420,"children":4421},{"class":236,"line":314},[4422,4426,4430,4434,4439],{"type":43,"tag":234,"props":4423,"children":4424},{"style":286},[4425],{"type":49,"value":289},{"type":43,"tag":234,"props":4427,"children":4428},{"style":286},[4429],{"type":49,"value":294},{"type":43,"tag":234,"props":4431,"children":4432},{"style":297},[4433],{"type":49,"value":300},{"type":43,"tag":234,"props":4435,"children":4436},{"style":303},[4437],{"type":49,"value":4438}," Navigation",{"type":43,"tag":234,"props":4440,"children":4441},{"style":251},[4442],{"type":49,"value":311},{"type":43,"tag":234,"props":4444,"children":4445},{"class":236,"line":329},[4446,4450],{"type":43,"tag":234,"props":4447,"children":4448},{"style":318},[4449],{"type":49,"value":379},{"type":43,"tag":234,"props":4451,"children":4452},{"style":251},[4453],{"type":49,"value":326},{"type":43,"tag":234,"props":4455,"children":4456},{"class":236,"line":343},[4457,4461],{"type":43,"tag":234,"props":4458,"children":4459},{"style":251},[4460],{"type":49,"value":335},{"type":43,"tag":234,"props":4462,"children":4463},{"style":251},[4464],{"type":49,"value":340},{"type":43,"tag":234,"props":4466,"children":4467},{"class":236,"line":373},[4468,4472,4476,4480,4484,4488,4492,4496,4500,4504],{"type":43,"tag":234,"props":4469,"children":4470},{"style":347},[4471],{"type":49,"value":379},{"type":43,"tag":234,"props":4473,"children":4474},{"style":251},[4475],{"type":49,"value":354},{"type":43,"tag":234,"props":4477,"children":4478},{"style":251},[4479],{"type":49,"value":388},{"type":43,"tag":234,"props":4481,"children":4482},{"style":363},[4483],{"type":49,"value":393},{"type":43,"tag":234,"props":4485,"children":4486},{"style":251},[4487],{"type":49,"value":254},{"type":43,"tag":234,"props":4489,"children":4490},{"style":257},[4491],{"type":49,"value":402},{"type":43,"tag":234,"props":4493,"children":4494},{"style":251},[4495],{"type":49,"value":254},{"type":43,"tag":234,"props":4497,"children":4498},{"style":363},[4499],{"type":49,"value":411},{"type":43,"tag":234,"props":4501,"children":4502},{"style":357},[4503],{"type":49,"value":416},{"type":43,"tag":234,"props":4505,"children":4506},{"style":251},[4507],{"type":49,"value":269},{"type":43,"tag":234,"props":4509,"children":4510},{"class":236,"line":423},[4511,4515],{"type":43,"tag":234,"props":4512,"children":4513},{"style":251},[4514],{"type":49,"value":429},{"type":43,"tag":234,"props":4516,"children":4517},{"style":251},[4518],{"type":49,"value":340},{"type":43,"tag":234,"props":4520,"children":4521},{"class":236,"line":436},[4522,4526,4531,4535,4539,4543],{"type":43,"tag":234,"props":4523,"children":4524},{"style":297},[4525],{"type":49,"value":2224},{"type":43,"tag":234,"props":4527,"children":4528},{"style":363},[4529],{"type":49,"value":4530}," router",{"type":43,"tag":234,"props":4532,"children":4533},{"style":251},[4534],{"type":49,"value":2234},{"type":43,"tag":234,"props":4536,"children":4537},{"style":303},[4538],{"type":49,"value":4386},{"type":43,"tag":234,"props":4540,"children":4541},{"style":347},[4542],{"type":49,"value":1556},{"type":43,"tag":234,"props":4544,"children":4545},{"style":251},[4546],{"type":49,"value":269},{"type":43,"tag":234,"props":4548,"children":4549},{"class":236,"line":450},[4550],{"type":43,"tag":234,"props":4551,"children":4552},{"emptyLinePlaceholder":276},[4553],{"type":49,"value":279},{"type":43,"tag":234,"props":4555,"children":4556},{"class":236,"line":494},[4557,4561],{"type":43,"tag":234,"props":4558,"children":4559},{"style":286},[4560],{"type":49,"value":442},{"type":43,"tag":234,"props":4562,"children":4563},{"style":347},[4564],{"type":49,"value":447},{"type":43,"tag":234,"props":4566,"children":4567},{"class":236,"line":531},[4568,4572,4577],{"type":43,"tag":234,"props":4569,"children":4570},{"style":251},[4571],{"type":49,"value":456},{"type":43,"tag":234,"props":4573,"children":4574},{"style":347},[4575],{"type":49,"value":4576},"nav",{"type":43,"tag":234,"props":4578,"children":4579},{"style":251},[4580],{"type":49,"value":528},{"type":43,"tag":234,"props":4582,"children":4583},{"class":236,"line":547},[4584,4588,4593,4598,4602,4606,4611,4615,4619,4624,4628,4632],{"type":43,"tag":234,"props":4585,"children":4586},{"style":251},[4587],{"type":49,"value":500},{"type":43,"tag":234,"props":4589,"children":4590},{"style":357},[4591],{"type":49,"value":4592},"Link",{"type":43,"tag":234,"props":4594,"children":4595},{"style":297},[4596],{"type":49,"value":4597}," href",{"type":43,"tag":234,"props":4599,"children":4600},{"style":251},[4601],{"type":49,"value":3328},{"type":43,"tag":234,"props":4603,"children":4604},{"style":251},[4605],{"type":49,"value":254},{"type":43,"tag":234,"props":4607,"children":4608},{"style":257},[4609],{"type":49,"value":4610},"\u002Fabout",{"type":43,"tag":234,"props":4612,"children":4613},{"style":251},[4614],{"type":49,"value":254},{"type":43,"tag":234,"props":4616,"children":4617},{"style":251},[4618],{"type":49,"value":509},{"type":43,"tag":234,"props":4620,"children":4621},{"style":363},[4622],{"type":49,"value":4623},"About",{"type":43,"tag":234,"props":4625,"children":4626},{"style":251},[4627],{"type":49,"value":519},{"type":43,"tag":234,"props":4629,"children":4630},{"style":357},[4631],{"type":49,"value":4592},{"type":43,"tag":234,"props":4633,"children":4634},{"style":251},[4635],{"type":49,"value":528},{"type":43,"tag":234,"props":4637,"children":4638},{"class":236,"line":608},[4639,4643,4647,4651,4656,4660,4664,4668,4673,4677,4681,4686,4690,4694,4698,4703,4707,4711],{"type":43,"tag":234,"props":4640,"children":4641},{"style":251},[4642],{"type":49,"value":500},{"type":43,"tag":234,"props":4644,"children":4645},{"style":347},[4646],{"type":49,"value":2454},{"type":43,"tag":234,"props":4648,"children":4649},{"style":297},[4650],{"type":49,"value":2459},{"type":43,"tag":234,"props":4652,"children":4653},{"style":251},[4654],{"type":49,"value":4655},"={()",{"type":43,"tag":234,"props":4657,"children":4658},{"style":297},[4659],{"type":49,"value":601},{"type":43,"tag":234,"props":4661,"children":4662},{"style":363},[4663],{"type":49,"value":4530},{"type":43,"tag":234,"props":4665,"children":4666},{"style":251},[4667],{"type":49,"value":563},{"type":43,"tag":234,"props":4669,"children":4670},{"style":303},[4671],{"type":49,"value":4672},"push",{"type":43,"tag":234,"props":4674,"children":4675},{"style":363},[4676],{"type":49,"value":393},{"type":43,"tag":234,"props":4678,"children":4679},{"style":251},[4680],{"type":49,"value":254},{"type":43,"tag":234,"props":4682,"children":4683},{"style":257},[4684],{"type":49,"value":4685},"\u002Fsettings",{"type":43,"tag":234,"props":4687,"children":4688},{"style":251},[4689],{"type":49,"value":254},{"type":43,"tag":234,"props":4691,"children":4692},{"style":363},[4693],{"type":49,"value":596},{"type":43,"tag":234,"props":4695,"children":4696},{"style":251},[4697],{"type":49,"value":2473},{"type":43,"tag":234,"props":4699,"children":4700},{"style":363},[4701],{"type":49,"value":4702},"Settings",{"type":43,"tag":234,"props":4704,"children":4705},{"style":251},[4706],{"type":49,"value":519},{"type":43,"tag":234,"props":4708,"children":4709},{"style":347},[4710],{"type":49,"value":2454},{"type":43,"tag":234,"props":4712,"children":4713},{"style":251},[4714],{"type":49,"value":528},{"type":43,"tag":234,"props":4716,"children":4717},{"class":236,"line":658},[4718,4722,4726],{"type":43,"tag":234,"props":4719,"children":4720},{"style":251},[4721],{"type":49,"value":695},{"type":43,"tag":234,"props":4723,"children":4724},{"style":347},[4725],{"type":49,"value":4576},{"type":43,"tag":234,"props":4727,"children":4728},{"style":251},[4729],{"type":49,"value":528},{"type":43,"tag":234,"props":4731,"children":4732},{"class":236,"line":672},[4733,4737],{"type":43,"tag":234,"props":4734,"children":4735},{"style":347},[4736],{"type":49,"value":712},{"type":43,"tag":234,"props":4738,"children":4739},{"style":251},[4740],{"type":49,"value":269},{"type":43,"tag":234,"props":4742,"children":4743},{"class":236,"line":689},[4744],{"type":43,"tag":234,"props":4745,"children":4746},{"style":251},[4747],{"type":49,"value":669},{"type":43,"tag":1040,"props":4749,"children":4751},{"id":4750},"router-apis-that-require-props",[4752],{"type":49,"value":4753},"Router APIs That Require Props",{"type":43,"tag":52,"props":4755,"children":4756},{},[4757],{"type":49,"value":4758},"These hooks don't work directly in DOM components because they need synchronous access to native routing state:",{"type":43,"tag":86,"props":4760,"children":4761},{},[4762,4771,4780,4789,4798,4807],{"type":43,"tag":90,"props":4763,"children":4764},{},[4765],{"type":43,"tag":58,"props":4766,"children":4768},{"className":4767},[],[4769],{"type":49,"value":4770},"useLocalSearchParams()",{"type":43,"tag":90,"props":4772,"children":4773},{},[4774],{"type":43,"tag":58,"props":4775,"children":4777},{"className":4776},[],[4778],{"type":49,"value":4779},"useGlobalSearchParams()",{"type":43,"tag":90,"props":4781,"children":4782},{},[4783],{"type":43,"tag":58,"props":4784,"children":4786},{"className":4785},[],[4787],{"type":49,"value":4788},"usePathname()",{"type":43,"tag":90,"props":4790,"children":4791},{},[4792],{"type":43,"tag":58,"props":4793,"children":4795},{"className":4794},[],[4796],{"type":49,"value":4797},"useSegments()",{"type":43,"tag":90,"props":4799,"children":4800},{},[4801],{"type":43,"tag":58,"props":4802,"children":4804},{"className":4803},[],[4805],{"type":49,"value":4806},"useRootNavigation()",{"type":43,"tag":90,"props":4808,"children":4809},{},[4810],{"type":43,"tag":58,"props":4811,"children":4813},{"className":4812},[],[4814],{"type":49,"value":4815},"useRootNavigationState()",{"type":43,"tag":52,"props":4817,"children":4818},{},[4819,4824],{"type":43,"tag":94,"props":4820,"children":4821},{},[4822],{"type":49,"value":4823},"Solution:",{"type":49,"value":4825}," Read these values in the native parent and pass as props:",{"type":43,"tag":223,"props":4827,"children":4829},{"className":225,"code":4828,"language":227,"meta":228,"style":228},"\u002F\u002F app\u002F[id].tsx (native)\nimport { useLocalSearchParams, usePathname } from \"expo-router\";\nimport DOMComponent from \"@\u002Fcomponents\u002Fdom-component\";\n\nexport default function Screen() {\n const { id } = useLocalSearchParams();\n const pathname = usePathname();\n\n return \u003CDOMComponent id={id as string} pathname={pathname} \u002F>;\n}\n",[4830],{"type":43,"tag":58,"props":4831,"children":4832},{"__ignoreMap":228},[4833,4841,4890,4921,4928,4955,4991,5019,5026,5085],{"type":43,"tag":234,"props":4834,"children":4835},{"class":236,"line":237},[4836],{"type":43,"tag":234,"props":4837,"children":4838},{"style":241},[4839],{"type":49,"value":4840},"\u002F\u002F app\u002F[id].tsx (native)\n",{"type":43,"tag":234,"props":4842,"children":4843},{"class":236,"line":247},[4844,4848,4852,4857,4861,4866,4870,4874,4878,4882,4886],{"type":43,"tag":234,"props":4845,"children":4846},{"style":286},[4847],{"type":49,"value":1456},{"type":43,"tag":234,"props":4849,"children":4850},{"style":251},[4851],{"type":49,"value":1217},{"type":43,"tag":234,"props":4853,"children":4854},{"style":363},[4855],{"type":49,"value":4856}," useLocalSearchParams",{"type":43,"tag":234,"props":4858,"children":4859},{"style":251},[4860],{"type":49,"value":586},{"type":43,"tag":234,"props":4862,"children":4863},{"style":363},[4864],{"type":49,"value":4865}," usePathname",{"type":43,"tag":234,"props":4867,"children":4868},{"style":251},[4869],{"type":49,"value":1254},{"type":43,"tag":234,"props":4871,"children":4872},{"style":286},[4873],{"type":49,"value":1474},{"type":43,"tag":234,"props":4875,"children":4876},{"style":251},[4877],{"type":49,"value":1157},{"type":43,"tag":234,"props":4879,"children":4880},{"style":257},[4881],{"type":49,"value":4403},{"type":43,"tag":234,"props":4883,"children":4884},{"style":251},[4885],{"type":49,"value":254},{"type":43,"tag":234,"props":4887,"children":4888},{"style":251},[4889],{"type":49,"value":269},{"type":43,"tag":234,"props":4891,"children":4892},{"class":236,"line":272},[4893,4897,4901,4905,4909,4913,4917],{"type":43,"tag":234,"props":4894,"children":4895},{"style":286},[4896],{"type":49,"value":1456},{"type":43,"tag":234,"props":4898,"children":4899},{"style":363},[4900],{"type":49,"value":1502},{"type":43,"tag":234,"props":4902,"children":4903},{"style":286},[4904],{"type":49,"value":1507},{"type":43,"tag":234,"props":4906,"children":4907},{"style":251},[4908],{"type":49,"value":1157},{"type":43,"tag":234,"props":4910,"children":4911},{"style":257},[4912],{"type":49,"value":1516},{"type":43,"tag":234,"props":4914,"children":4915},{"style":251},[4916],{"type":49,"value":254},{"type":43,"tag":234,"props":4918,"children":4919},{"style":251},[4920],{"type":49,"value":269},{"type":43,"tag":234,"props":4922,"children":4923},{"class":236,"line":282},[4924],{"type":43,"tag":234,"props":4925,"children":4926},{"emptyLinePlaceholder":276},[4927],{"type":49,"value":279},{"type":43,"tag":234,"props":4929,"children":4930},{"class":236,"line":314},[4931,4935,4939,4943,4947,4951],{"type":43,"tag":234,"props":4932,"children":4933},{"style":286},[4934],{"type":49,"value":289},{"type":43,"tag":234,"props":4936,"children":4937},{"style":286},[4938],{"type":49,"value":294},{"type":43,"tag":234,"props":4940,"children":4941},{"style":297},[4942],{"type":49,"value":300},{"type":43,"tag":234,"props":4944,"children":4945},{"style":303},[4946],{"type":49,"value":1551},{"type":43,"tag":234,"props":4948,"children":4949},{"style":251},[4950],{"type":49,"value":1556},{"type":43,"tag":234,"props":4952,"children":4953},{"style":251},[4954],{"type":49,"value":340},{"type":43,"tag":234,"props":4956,"children":4957},{"class":236,"line":329},[4958,4962,4966,4971,4975,4979,4983,4987],{"type":43,"tag":234,"props":4959,"children":4960},{"style":297},[4961],{"type":49,"value":2224},{"type":43,"tag":234,"props":4963,"children":4964},{"style":251},[4965],{"type":49,"value":1217},{"type":43,"tag":234,"props":4967,"children":4968},{"style":363},[4969],{"type":49,"value":4970}," id",{"type":43,"tag":234,"props":4972,"children":4973},{"style":251},[4974],{"type":49,"value":1254},{"type":43,"tag":234,"props":4976,"children":4977},{"style":251},[4978],{"type":49,"value":2234},{"type":43,"tag":234,"props":4980,"children":4981},{"style":303},[4982],{"type":49,"value":4856},{"type":43,"tag":234,"props":4984,"children":4985},{"style":347},[4986],{"type":49,"value":1556},{"type":43,"tag":234,"props":4988,"children":4989},{"style":251},[4990],{"type":49,"value":269},{"type":43,"tag":234,"props":4992,"children":4993},{"class":236,"line":343},[4994,4998,5003,5007,5011,5015],{"type":43,"tag":234,"props":4995,"children":4996},{"style":297},[4997],{"type":49,"value":2224},{"type":43,"tag":234,"props":4999,"children":5000},{"style":363},[5001],{"type":49,"value":5002}," pathname",{"type":43,"tag":234,"props":5004,"children":5005},{"style":251},[5006],{"type":49,"value":2234},{"type":43,"tag":234,"props":5008,"children":5009},{"style":303},[5010],{"type":49,"value":4865},{"type":43,"tag":234,"props":5012,"children":5013},{"style":347},[5014],{"type":49,"value":1556},{"type":43,"tag":234,"props":5016,"children":5017},{"style":251},[5018],{"type":49,"value":269},{"type":43,"tag":234,"props":5020,"children":5021},{"class":236,"line":373},[5022],{"type":43,"tag":234,"props":5023,"children":5024},{"emptyLinePlaceholder":276},[5025],{"type":49,"value":279},{"type":43,"tag":234,"props":5027,"children":5028},{"class":236,"line":423},[5029,5033,5037,5041,5045,5049,5054,5059,5063,5067,5072,5076,5080],{"type":43,"tag":234,"props":5030,"children":5031},{"style":286},[5032],{"type":49,"value":442},{"type":43,"tag":234,"props":5034,"children":5035},{"style":251},[5036],{"type":49,"value":1004},{"type":43,"tag":234,"props":5038,"children":5039},{"style":357},[5040],{"type":49,"value":1080},{"type":43,"tag":234,"props":5042,"children":5043},{"style":297},[5044],{"type":49,"value":4970},{"type":43,"tag":234,"props":5046,"children":5047},{"style":251},[5048],{"type":49,"value":628},{"type":43,"tag":234,"props":5050,"children":5051},{"style":363},[5052],{"type":49,"value":5053},"id ",{"type":43,"tag":234,"props":5055,"children":5056},{"style":286},[5057],{"type":49,"value":5058},"as",{"type":43,"tag":234,"props":5060,"children":5061},{"style":357},[5062],{"type":49,"value":884},{"type":43,"tag":234,"props":5064,"children":5065},{"style":251},[5066],{"type":49,"value":2837},{"type":43,"tag":234,"props":5068,"children":5069},{"style":297},[5070],{"type":49,"value":5071},"pathname",{"type":43,"tag":234,"props":5073,"children":5074},{"style":251},[5075],{"type":49,"value":628},{"type":43,"tag":234,"props":5077,"children":5078},{"style":363},[5079],{"type":49,"value":5071},{"type":43,"tag":234,"props":5081,"children":5082},{"style":251},[5083],{"type":49,"value":5084},"} \u002F>;\n",{"type":43,"tag":234,"props":5086,"children":5087},{"class":236,"line":436},[5088],{"type":43,"tag":234,"props":5089,"children":5090},{"style":251},[5091],{"type":49,"value":669},{"type":43,"tag":223,"props":5093,"children":5095},{"className":225,"code":5094,"language":227,"meta":228,"style":228},"\u002F\u002F components\u002Fdom-component.tsx\n\"use dom\";\n\ninterface Props {\n id: string;\n pathname: string;\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}\n\nexport default function DOMComponent({ id, pathname }: Props) {\n return (\n \u003Cdiv>\n \u003Cp>Current ID: {id}\u003C\u002Fp>\n \u003Cp>Current Path: {pathname}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n",[5096],{"type":43,"tag":58,"props":5097,"children":5098},{"__ignoreMap":228},[5099,5106,5125,5132,5147,5167,5187,5230,5237,5244,5295,5306,5321,5362,5402,5417,5428],{"type":43,"tag":234,"props":5100,"children":5101},{"class":236,"line":237},[5102],{"type":43,"tag":234,"props":5103,"children":5104},{"style":241},[5105],{"type":49,"value":1902},{"type":43,"tag":234,"props":5107,"children":5108},{"class":236,"line":247},[5109,5113,5117,5121],{"type":43,"tag":234,"props":5110,"children":5111},{"style":251},[5112],{"type":49,"value":254},{"type":43,"tag":234,"props":5114,"children":5115},{"style":257},[5116],{"type":49,"value":260},{"type":43,"tag":234,"props":5118,"children":5119},{"style":251},[5120],{"type":49,"value":254},{"type":43,"tag":234,"props":5122,"children":5123},{"style":251},[5124],{"type":49,"value":269},{"type":43,"tag":234,"props":5126,"children":5127},{"class":236,"line":272},[5128],{"type":43,"tag":234,"props":5129,"children":5130},{"emptyLinePlaceholder":276},[5131],{"type":49,"value":279},{"type":43,"tag":234,"props":5133,"children":5134},{"class":236,"line":282},[5135,5139,5143],{"type":43,"tag":234,"props":5136,"children":5137},{"style":297},[5138],{"type":49,"value":858},{"type":43,"tag":234,"props":5140,"children":5141},{"style":357},[5142],{"type":49,"value":863},{"type":43,"tag":234,"props":5144,"children":5145},{"style":251},[5146],{"type":49,"value":340},{"type":43,"tag":234,"props":5148,"children":5149},{"class":236,"line":314},[5150,5155,5159,5163],{"type":43,"tag":234,"props":5151,"children":5152},{"style":347},[5153],{"type":49,"value":5154}," id",{"type":43,"tag":234,"props":5156,"children":5157},{"style":251},[5158],{"type":49,"value":354},{"type":43,"tag":234,"props":5160,"children":5161},{"style":357},[5162],{"type":49,"value":884},{"type":43,"tag":234,"props":5164,"children":5165},{"style":251},[5166],{"type":49,"value":269},{"type":43,"tag":234,"props":5168,"children":5169},{"class":236,"line":329},[5170,5175,5179,5183],{"type":43,"tag":234,"props":5171,"children":5172},{"style":347},[5173],{"type":49,"value":5174}," pathname",{"type":43,"tag":234,"props":5176,"children":5177},{"style":251},[5178],{"type":49,"value":354},{"type":43,"tag":234,"props":5180,"children":5181},{"style":357},[5182],{"type":49,"value":884},{"type":43,"tag":234,"props":5184,"children":5185},{"style":251},[5186],{"type":49,"value":269},{"type":43,"tag":234,"props":5188,"children":5189},{"class":236,"line":343},[5190,5194,5198,5202,5206,5210,5214,5218,5222,5226],{"type":43,"tag":234,"props":5191,"children":5192},{"style":347},[5193],{"type":49,"value":379},{"type":43,"tag":234,"props":5195,"children":5196},{"style":251},[5197],{"type":49,"value":2116},{"type":43,"tag":234,"props":5199,"children":5200},{"style":251},[5201],{"type":49,"value":388},{"type":43,"tag":234,"props":5203,"children":5204},{"style":363},[5205],{"type":49,"value":393},{"type":43,"tag":234,"props":5207,"children":5208},{"style":251},[5209],{"type":49,"value":254},{"type":43,"tag":234,"props":5211,"children":5212},{"style":257},[5213],{"type":49,"value":402},{"type":43,"tag":234,"props":5215,"children":5216},{"style":251},[5217],{"type":49,"value":254},{"type":43,"tag":234,"props":5219,"children":5220},{"style":363},[5221],{"type":49,"value":411},{"type":43,"tag":234,"props":5223,"children":5224},{"style":357},[5225],{"type":49,"value":416},{"type":43,"tag":234,"props":5227,"children":5228},{"style":251},[5229],{"type":49,"value":269},{"type":43,"tag":234,"props":5231,"children":5232},{"class":236,"line":373},[5233],{"type":43,"tag":234,"props":5234,"children":5235},{"style":251},[5236],{"type":49,"value":669},{"type":43,"tag":234,"props":5238,"children":5239},{"class":236,"line":423},[5240],{"type":43,"tag":234,"props":5241,"children":5242},{"emptyLinePlaceholder":276},[5243],{"type":49,"value":279},{"type":43,"tag":234,"props":5245,"children":5246},{"class":236,"line":436},[5247,5251,5255,5259,5263,5267,5271,5275,5279,5283,5287,5291],{"type":43,"tag":234,"props":5248,"children":5249},{"style":286},[5250],{"type":49,"value":289},{"type":43,"tag":234,"props":5252,"children":5253},{"style":286},[5254],{"type":49,"value":294},{"type":43,"tag":234,"props":5256,"children":5257},{"style":297},[5258],{"type":49,"value":300},{"type":43,"tag":234,"props":5260,"children":5261},{"style":303},[5262],{"type":49,"value":2182},{"type":43,"tag":234,"props":5264,"children":5265},{"style":251},[5266],{"type":49,"value":970},{"type":43,"tag":234,"props":5268,"children":5269},{"style":318},[5270],{"type":49,"value":4970},{"type":43,"tag":234,"props":5272,"children":5273},{"style":251},[5274],{"type":49,"value":586},{"type":43,"tag":234,"props":5276,"children":5277},{"style":318},[5278],{"type":49,"value":5002},{"type":43,"tag":234,"props":5280,"children":5281},{"style":251},[5282],{"type":49,"value":980},{"type":43,"tag":234,"props":5284,"children":5285},{"style":357},[5286],{"type":49,"value":863},{"type":43,"tag":234,"props":5288,"children":5289},{"style":251},[5290],{"type":49,"value":596},{"type":43,"tag":234,"props":5292,"children":5293},{"style":251},[5294],{"type":49,"value":340},{"type":43,"tag":234,"props":5296,"children":5297},{"class":236,"line":450},[5298,5302],{"type":43,"tag":234,"props":5299,"children":5300},{"style":286},[5301],{"type":49,"value":442},{"type":43,"tag":234,"props":5303,"children":5304},{"style":347},[5305],{"type":49,"value":447},{"type":43,"tag":234,"props":5307,"children":5308},{"class":236,"line":494},[5309,5313,5317],{"type":43,"tag":234,"props":5310,"children":5311},{"style":251},[5312],{"type":49,"value":456},{"type":43,"tag":234,"props":5314,"children":5315},{"style":347},[5316],{"type":49,"value":461},{"type":43,"tag":234,"props":5318,"children":5319},{"style":251},[5320],{"type":49,"value":528},{"type":43,"tag":234,"props":5322,"children":5323},{"class":236,"line":531},[5324,5328,5332,5336,5341,5345,5350,5354,5358],{"type":43,"tag":234,"props":5325,"children":5326},{"style":251},[5327],{"type":49,"value":500},{"type":43,"tag":234,"props":5329,"children":5330},{"style":347},[5331],{"type":49,"value":52},{"type":43,"tag":234,"props":5333,"children":5334},{"style":251},[5335],{"type":49,"value":509},{"type":43,"tag":234,"props":5337,"children":5338},{"style":363},[5339],{"type":49,"value":5340},"Current ID: ",{"type":43,"tag":234,"props":5342,"children":5343},{"style":251},[5344],{"type":49,"value":2324},{"type":43,"tag":234,"props":5346,"children":5347},{"style":363},[5348],{"type":49,"value":5349},"id",{"type":43,"tag":234,"props":5351,"children":5352},{"style":251},[5353],{"type":49,"value":647},{"type":43,"tag":234,"props":5355,"children":5356},{"style":347},[5357],{"type":49,"value":52},{"type":43,"tag":234,"props":5359,"children":5360},{"style":251},[5361],{"type":49,"value":528},{"type":43,"tag":234,"props":5363,"children":5364},{"class":236,"line":547},[5365,5369,5373,5377,5382,5386,5390,5394,5398],{"type":43,"tag":234,"props":5366,"children":5367},{"style":251},[5368],{"type":49,"value":500},{"type":43,"tag":234,"props":5370,"children":5371},{"style":347},[5372],{"type":49,"value":52},{"type":43,"tag":234,"props":5374,"children":5375},{"style":251},[5376],{"type":49,"value":509},{"type":43,"tag":234,"props":5378,"children":5379},{"style":363},[5380],{"type":49,"value":5381},"Current Path: ",{"type":43,"tag":234,"props":5383,"children":5384},{"style":251},[5385],{"type":49,"value":2324},{"type":43,"tag":234,"props":5387,"children":5388},{"style":363},[5389],{"type":49,"value":5071},{"type":43,"tag":234,"props":5391,"children":5392},{"style":251},[5393],{"type":49,"value":647},{"type":43,"tag":234,"props":5395,"children":5396},{"style":347},[5397],{"type":49,"value":52},{"type":43,"tag":234,"props":5399,"children":5400},{"style":251},[5401],{"type":49,"value":528},{"type":43,"tag":234,"props":5403,"children":5404},{"class":236,"line":608},[5405,5409,5413],{"type":43,"tag":234,"props":5406,"children":5407},{"style":251},[5408],{"type":49,"value":695},{"type":43,"tag":234,"props":5410,"children":5411},{"style":347},[5412],{"type":49,"value":461},{"type":43,"tag":234,"props":5414,"children":5415},{"style":251},[5416],{"type":49,"value":528},{"type":43,"tag":234,"props":5418,"children":5419},{"class":236,"line":658},[5420,5424],{"type":43,"tag":234,"props":5421,"children":5422},{"style":347},[5423],{"type":49,"value":712},{"type":43,"tag":234,"props":5425,"children":5426},{"style":251},[5427],{"type":49,"value":269},{"type":43,"tag":234,"props":5429,"children":5430},{"class":236,"line":672},[5431],{"type":43,"tag":234,"props":5432,"children":5433},{"style":251},[5434],{"type":49,"value":669},{"type":43,"tag":44,"props":5436,"children":5438},{"id":5437},"detecting-dom-environment",[5439],{"type":49,"value":5440},"Detecting DOM Environment",{"type":43,"tag":52,"props":5442,"children":5443},{},[5444],{"type":49,"value":5445},"Check if code is running in a DOM component:",{"type":43,"tag":223,"props":5447,"children":5449},{"className":225,"code":5448,"language":227,"meta":228,"style":228},"\"use dom\";\n\nimport { IS_DOM } from \"expo\u002Fdom\";\n\nexport default function Component({\n dom,\n}: {\n dom?: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return \u003Cdiv>{IS_DOM ? \"Running in DOM component\" : \"Running natively\"}\u003C\u002Fdiv>;\n}\n",[5450],{"type":43,"tag":58,"props":5451,"children":5452},{"__ignoreMap":228},[5453,5472,5479,5519,5526,5550,5561,5572,5615,5626,5698],{"type":43,"tag":234,"props":5454,"children":5455},{"class":236,"line":237},[5456,5460,5464,5468],{"type":43,"tag":234,"props":5457,"children":5458},{"style":251},[5459],{"type":49,"value":254},{"type":43,"tag":234,"props":5461,"children":5462},{"style":257},[5463],{"type":49,"value":260},{"type":43,"tag":234,"props":5465,"children":5466},{"style":251},[5467],{"type":49,"value":254},{"type":43,"tag":234,"props":5469,"children":5470},{"style":251},[5471],{"type":49,"value":269},{"type":43,"tag":234,"props":5473,"children":5474},{"class":236,"line":247},[5475],{"type":43,"tag":234,"props":5476,"children":5477},{"emptyLinePlaceholder":276},[5478],{"type":49,"value":279},{"type":43,"tag":234,"props":5480,"children":5481},{"class":236,"line":272},[5482,5486,5490,5495,5499,5503,5507,5511,5515],{"type":43,"tag":234,"props":5483,"children":5484},{"style":286},[5485],{"type":49,"value":1456},{"type":43,"tag":234,"props":5487,"children":5488},{"style":251},[5489],{"type":49,"value":1217},{"type":43,"tag":234,"props":5491,"children":5492},{"style":363},[5493],{"type":49,"value":5494}," IS_DOM",{"type":43,"tag":234,"props":5496,"children":5497},{"style":251},[5498],{"type":49,"value":1254},{"type":43,"tag":234,"props":5500,"children":5501},{"style":286},[5502],{"type":49,"value":1474},{"type":43,"tag":234,"props":5504,"children":5505},{"style":251},[5506],{"type":49,"value":1157},{"type":43,"tag":234,"props":5508,"children":5509},{"style":257},[5510],{"type":49,"value":402},{"type":43,"tag":234,"props":5512,"children":5513},{"style":251},[5514],{"type":49,"value":254},{"type":43,"tag":234,"props":5516,"children":5517},{"style":251},[5518],{"type":49,"value":269},{"type":43,"tag":234,"props":5520,"children":5521},{"class":236,"line":282},[5522],{"type":43,"tag":234,"props":5523,"children":5524},{"emptyLinePlaceholder":276},[5525],{"type":49,"value":279},{"type":43,"tag":234,"props":5527,"children":5528},{"class":236,"line":314},[5529,5533,5537,5541,5546],{"type":43,"tag":234,"props":5530,"children":5531},{"style":286},[5532],{"type":49,"value":289},{"type":43,"tag":234,"props":5534,"children":5535},{"style":286},[5536],{"type":49,"value":294},{"type":43,"tag":234,"props":5538,"children":5539},{"style":297},[5540],{"type":49,"value":300},{"type":43,"tag":234,"props":5542,"children":5543},{"style":303},[5544],{"type":49,"value":5545}," Component",{"type":43,"tag":234,"props":5547,"children":5548},{"style":251},[5549],{"type":49,"value":311},{"type":43,"tag":234,"props":5551,"children":5552},{"class":236,"line":329},[5553,5557],{"type":43,"tag":234,"props":5554,"children":5555},{"style":318},[5556],{"type":49,"value":379},{"type":43,"tag":234,"props":5558,"children":5559},{"style":251},[5560],{"type":49,"value":326},{"type":43,"tag":234,"props":5562,"children":5563},{"class":236,"line":343},[5564,5568],{"type":43,"tag":234,"props":5565,"children":5566},{"style":251},[5567],{"type":49,"value":335},{"type":43,"tag":234,"props":5569,"children":5570},{"style":251},[5571],{"type":49,"value":340},{"type":43,"tag":234,"props":5573,"children":5574},{"class":236,"line":373},[5575,5579,5583,5587,5591,5595,5599,5603,5607,5611],{"type":43,"tag":234,"props":5576,"children":5577},{"style":347},[5578],{"type":49,"value":379},{"type":43,"tag":234,"props":5580,"children":5581},{"style":251},[5582],{"type":49,"value":2116},{"type":43,"tag":234,"props":5584,"children":5585},{"style":251},[5586],{"type":49,"value":388},{"type":43,"tag":234,"props":5588,"children":5589},{"style":363},[5590],{"type":49,"value":393},{"type":43,"tag":234,"props":5592,"children":5593},{"style":251},[5594],{"type":49,"value":254},{"type":43,"tag":234,"props":5596,"children":5597},{"style":257},[5598],{"type":49,"value":402},{"type":43,"tag":234,"props":5600,"children":5601},{"style":251},[5602],{"type":49,"value":254},{"type":43,"tag":234,"props":5604,"children":5605},{"style":363},[5606],{"type":49,"value":411},{"type":43,"tag":234,"props":5608,"children":5609},{"style":357},[5610],{"type":49,"value":416},{"type":43,"tag":234,"props":5612,"children":5613},{"style":251},[5614],{"type":49,"value":269},{"type":43,"tag":234,"props":5616,"children":5617},{"class":236,"line":423},[5618,5622],{"type":43,"tag":234,"props":5619,"children":5620},{"style":251},[5621],{"type":49,"value":429},{"type":43,"tag":234,"props":5623,"children":5624},{"style":251},[5625],{"type":49,"value":340},{"type":43,"tag":234,"props":5627,"children":5628},{"class":236,"line":436},[5629,5633,5637,5641,5645,5650,5655,5659,5664,5668,5673,5677,5682,5686,5690,5694],{"type":43,"tag":234,"props":5630,"children":5631},{"style":286},[5632],{"type":49,"value":442},{"type":43,"tag":234,"props":5634,"children":5635},{"style":251},[5636],{"type":49,"value":1004},{"type":43,"tag":234,"props":5638,"children":5639},{"style":347},[5640],{"type":49,"value":461},{"type":43,"tag":234,"props":5642,"children":5643},{"style":251},[5644],{"type":49,"value":1013},{"type":43,"tag":234,"props":5646,"children":5647},{"style":363},[5648],{"type":49,"value":5649},"IS_DOM ",{"type":43,"tag":234,"props":5651,"children":5652},{"style":251},[5653],{"type":49,"value":5654},"?",{"type":43,"tag":234,"props":5656,"children":5657},{"style":251},[5658],{"type":49,"value":1157},{"type":43,"tag":234,"props":5660,"children":5661},{"style":257},[5662],{"type":49,"value":5663},"Running in DOM component",{"type":43,"tag":234,"props":5665,"children":5666},{"style":251},[5667],{"type":49,"value":254},{"type":43,"tag":234,"props":5669,"children":5670},{"style":251},[5671],{"type":49,"value":5672}," :",{"type":43,"tag":234,"props":5674,"children":5675},{"style":251},[5676],{"type":49,"value":1157},{"type":43,"tag":234,"props":5678,"children":5679},{"style":257},[5680],{"type":49,"value":5681},"Running natively",{"type":43,"tag":234,"props":5683,"children":5684},{"style":251},[5685],{"type":49,"value":254},{"type":43,"tag":234,"props":5687,"children":5688},{"style":251},[5689],{"type":49,"value":647},{"type":43,"tag":234,"props":5691,"children":5692},{"style":347},[5693],{"type":49,"value":461},{"type":43,"tag":234,"props":5695,"children":5696},{"style":251},[5697],{"type":49,"value":1031},{"type":43,"tag":234,"props":5699,"children":5700},{"class":236,"line":450},[5701],{"type":43,"tag":234,"props":5702,"children":5703},{"style":251},[5704],{"type":49,"value":669},{"type":43,"tag":44,"props":5706,"children":5708},{"id":5707},"assets",[5709],{"type":49,"value":5710},"Assets",{"type":43,"tag":52,"props":5712,"children":5713},{},[5714],{"type":49,"value":5715},"Prefer requiring assets instead of using the public directory:",{"type":43,"tag":223,"props":5717,"children":5719},{"className":225,"code":5718,"language":227,"meta":228,"style":228},"\"use dom\";\n\n\u002F\u002F Good - bundled with the component\nconst logo = require(\"..\u002Fassets\u002Flogo.png\");\n\nexport default function Component({\n dom,\n}: {\n dom: import(\"expo\u002Fdom\").DOMProps;\n}) {\n return \u003Cimg src={logo} alt=\"Logo\" \u002F>;\n}\n",[5720],{"type":43,"tag":58,"props":5721,"children":5722},{"__ignoreMap":228},[5723,5742,5749,5757,5803,5810,5833,5844,5855,5898,5909,5970],{"type":43,"tag":234,"props":5724,"children":5725},{"class":236,"line":237},[5726,5730,5734,5738],{"type":43,"tag":234,"props":5727,"children":5728},{"style":251},[5729],{"type":49,"value":254},{"type":43,"tag":234,"props":5731,"children":5732},{"style":257},[5733],{"type":49,"value":260},{"type":43,"tag":234,"props":5735,"children":5736},{"style":251},[5737],{"type":49,"value":254},{"type":43,"tag":234,"props":5739,"children":5740},{"style":251},[5741],{"type":49,"value":269},{"type":43,"tag":234,"props":5743,"children":5744},{"class":236,"line":247},[5745],{"type":43,"tag":234,"props":5746,"children":5747},{"emptyLinePlaceholder":276},[5748],{"type":49,"value":279},{"type":43,"tag":234,"props":5750,"children":5751},{"class":236,"line":272},[5752],{"type":43,"tag":234,"props":5753,"children":5754},{"style":241},[5755],{"type":49,"value":5756},"\u002F\u002F Good - bundled with the component\n",{"type":43,"tag":234,"props":5758,"children":5759},{"class":236,"line":282},[5760,5764,5769,5773,5778,5782,5786,5791,5795,5799],{"type":43,"tag":234,"props":5761,"children":5762},{"style":297},[5763],{"type":49,"value":3905},{"type":43,"tag":234,"props":5765,"children":5766},{"style":363},[5767],{"type":49,"value":5768}," logo ",{"type":43,"tag":234,"props":5770,"children":5771},{"style":251},[5772],{"type":49,"value":3328},{"type":43,"tag":234,"props":5774,"children":5775},{"style":303},[5776],{"type":49,"value":5777}," require",{"type":43,"tag":234,"props":5779,"children":5780},{"style":363},[5781],{"type":49,"value":393},{"type":43,"tag":234,"props":5783,"children":5784},{"style":251},[5785],{"type":49,"value":254},{"type":43,"tag":234,"props":5787,"children":5788},{"style":257},[5789],{"type":49,"value":5790},"..\u002Fassets\u002Flogo.png",{"type":43,"tag":234,"props":5792,"children":5793},{"style":251},[5794],{"type":49,"value":254},{"type":43,"tag":234,"props":5796,"children":5797},{"style":363},[5798],{"type":49,"value":596},{"type":43,"tag":234,"props":5800,"children":5801},{"style":251},[5802],{"type":49,"value":269},{"type":43,"tag":234,"props":5804,"children":5805},{"class":236,"line":314},[5806],{"type":43,"tag":234,"props":5807,"children":5808},{"emptyLinePlaceholder":276},[5809],{"type":49,"value":279},{"type":43,"tag":234,"props":5811,"children":5812},{"class":236,"line":329},[5813,5817,5821,5825,5829],{"type":43,"tag":234,"props":5814,"children":5815},{"style":286},[5816],{"type":49,"value":289},{"type":43,"tag":234,"props":5818,"children":5819},{"style":286},[5820],{"type":49,"value":294},{"type":43,"tag":234,"props":5822,"children":5823},{"style":297},[5824],{"type":49,"value":300},{"type":43,"tag":234,"props":5826,"children":5827},{"style":303},[5828],{"type":49,"value":5545},{"type":43,"tag":234,"props":5830,"children":5831},{"style":251},[5832],{"type":49,"value":311},{"type":43,"tag":234,"props":5834,"children":5835},{"class":236,"line":343},[5836,5840],{"type":43,"tag":234,"props":5837,"children":5838},{"style":318},[5839],{"type":49,"value":379},{"type":43,"tag":234,"props":5841,"children":5842},{"style":251},[5843],{"type":49,"value":326},{"type":43,"tag":234,"props":5845,"children":5846},{"class":236,"line":373},[5847,5851],{"type":43,"tag":234,"props":5848,"children":5849},{"style":251},[5850],{"type":49,"value":335},{"type":43,"tag":234,"props":5852,"children":5853},{"style":251},[5854],{"type":49,"value":340},{"type":43,"tag":234,"props":5856,"children":5857},{"class":236,"line":423},[5858,5862,5866,5870,5874,5878,5882,5886,5890,5894],{"type":43,"tag":234,"props":5859,"children":5860},{"style":347},[5861],{"type":49,"value":379},{"type":43,"tag":234,"props":5863,"children":5864},{"style":251},[5865],{"type":49,"value":354},{"type":43,"tag":234,"props":5867,"children":5868},{"style":251},[5869],{"type":49,"value":388},{"type":43,"tag":234,"props":5871,"children":5872},{"style":363},[5873],{"type":49,"value":393},{"type":43,"tag":234,"props":5875,"children":5876},{"style":251},[5877],{"type":49,"value":254},{"type":43,"tag":234,"props":5879,"children":5880},{"style":257},[5881],{"type":49,"value":402},{"type":43,"tag":234,"props":5883,"children":5884},{"style":251},[5885],{"type":49,"value":254},{"type":43,"tag":234,"props":5887,"children":5888},{"style":363},[5889],{"type":49,"value":411},{"type":43,"tag":234,"props":5891,"children":5892},{"style":357},[5893],{"type":49,"value":416},{"type":43,"tag":234,"props":5895,"children":5896},{"style":251},[5897],{"type":49,"value":269},{"type":43,"tag":234,"props":5899,"children":5900},{"class":236,"line":436},[5901,5905],{"type":43,"tag":234,"props":5902,"children":5903},{"style":251},[5904],{"type":49,"value":429},{"type":43,"tag":234,"props":5906,"children":5907},{"style":251},[5908],{"type":49,"value":340},{"type":43,"tag":234,"props":5910,"children":5911},{"class":236,"line":450},[5912,5916,5920,5925,5930,5934,5939,5943,5948,5952,5956,5961,5965],{"type":43,"tag":234,"props":5913,"children":5914},{"style":286},[5915],{"type":49,"value":442},{"type":43,"tag":234,"props":5917,"children":5918},{"style":251},[5919],{"type":49,"value":1004},{"type":43,"tag":234,"props":5921,"children":5922},{"style":347},[5923],{"type":49,"value":5924},"img",{"type":43,"tag":234,"props":5926,"children":5927},{"style":297},[5928],{"type":49,"value":5929}," src",{"type":43,"tag":234,"props":5931,"children":5932},{"style":251},[5933],{"type":49,"value":628},{"type":43,"tag":234,"props":5935,"children":5936},{"style":363},[5937],{"type":49,"value":5938},"logo",{"type":43,"tag":234,"props":5940,"children":5941},{"style":251},[5942],{"type":49,"value":2837},{"type":43,"tag":234,"props":5944,"children":5945},{"style":297},[5946],{"type":49,"value":5947},"alt",{"type":43,"tag":234,"props":5949,"children":5950},{"style":251},[5951],{"type":49,"value":3328},{"type":43,"tag":234,"props":5953,"children":5954},{"style":251},[5955],{"type":49,"value":254},{"type":43,"tag":234,"props":5957,"children":5958},{"style":257},[5959],{"type":49,"value":5960},"Logo",{"type":43,"tag":234,"props":5962,"children":5963},{"style":251},[5964],{"type":49,"value":254},{"type":43,"tag":234,"props":5966,"children":5967},{"style":251},[5968],{"type":49,"value":5969}," \u002F>;\n",{"type":43,"tag":234,"props":5971,"children":5972},{"class":236,"line":494},[5973],{"type":43,"tag":234,"props":5974,"children":5975},{"style":251},[5976],{"type":49,"value":669},{"type":43,"tag":44,"props":5978,"children":5980},{"id":5979},"usage-from-native-components",[5981],{"type":49,"value":5982},"Usage from Native Components",{"type":43,"tag":52,"props":5984,"children":5985},{},[5986],{"type":49,"value":5987},"Import and use DOM components like regular components:",{"type":43,"tag":223,"props":5989,"children":5991},{"className":225,"code":5990,"language":227,"meta":228,"style":228},"\u002F\u002F app\u002Findex.tsx\nimport { View, Text } from \"react-native\";\nimport WebChart from \"@\u002Fcomponents\u002Fweb-chart\";\nimport CodeBlock from \"@\u002Fcomponents\u002Fcode-block\";\n\nexport default function HomeScreen() {\n return (\n \u003CView style={{ flex: 1 }}>\n \u003CText>Native content above\u003C\u002FText>\n\n \u003CWebChart data={[10, 20, 30, 40, 50]} dom={{ style: { height: 300 } }} \u002F>\n\n \u003CCodeBlock\n code=\"const x = 1;\"\n language=\"javascript\"\n dom={{ scrollEnabled: true }}\n \u002F>\n\n \u003CText>Native content below\u003C\u002FText>\n \u003C\u002FView>\n );\n}\n",[5992],{"type":43,"tag":58,"props":5993,"children":5994},{"__ignoreMap":228},[5995,6003,6052,6085,6118,6125,6153,6164,6202,6235,6242,6356,6363,6375,6401,6426,6455,6463,6470,6502,6517,6528],{"type":43,"tag":234,"props":5996,"children":5997},{"class":236,"line":237},[5998],{"type":43,"tag":234,"props":5999,"children":6000},{"style":241},[6001],{"type":49,"value":6002},"\u002F\u002F app\u002Findex.tsx\n",{"type":43,"tag":234,"props":6004,"children":6005},{"class":236,"line":247},[6006,6010,6014,6019,6023,6028,6032,6036,6040,6044,6048],{"type":43,"tag":234,"props":6007,"children":6008},{"style":286},[6009],{"type":49,"value":1456},{"type":43,"tag":234,"props":6011,"children":6012},{"style":251},[6013],{"type":49,"value":1217},{"type":43,"tag":234,"props":6015,"children":6016},{"style":363},[6017],{"type":49,"value":6018}," View",{"type":43,"tag":234,"props":6020,"children":6021},{"style":251},[6022],{"type":49,"value":586},{"type":43,"tag":234,"props":6024,"children":6025},{"style":363},[6026],{"type":49,"value":6027}," Text",{"type":43,"tag":234,"props":6029,"children":6030},{"style":251},[6031],{"type":49,"value":1254},{"type":43,"tag":234,"props":6033,"children":6034},{"style":286},[6035],{"type":49,"value":1474},{"type":43,"tag":234,"props":6037,"children":6038},{"style":251},[6039],{"type":49,"value":1157},{"type":43,"tag":234,"props":6041,"children":6042},{"style":257},[6043],{"type":49,"value":14},{"type":43,"tag":234,"props":6045,"children":6046},{"style":251},[6047],{"type":49,"value":254},{"type":43,"tag":234,"props":6049,"children":6050},{"style":251},[6051],{"type":49,"value":269},{"type":43,"tag":234,"props":6053,"children":6054},{"class":236,"line":272},[6055,6059,6064,6068,6072,6077,6081],{"type":43,"tag":234,"props":6056,"children":6057},{"style":286},[6058],{"type":49,"value":1456},{"type":43,"tag":234,"props":6060,"children":6061},{"style":363},[6062],{"type":49,"value":6063}," WebChart ",{"type":43,"tag":234,"props":6065,"children":6066},{"style":286},[6067],{"type":49,"value":1507},{"type":43,"tag":234,"props":6069,"children":6070},{"style":251},[6071],{"type":49,"value":1157},{"type":43,"tag":234,"props":6073,"children":6074},{"style":257},[6075],{"type":49,"value":6076},"@\u002Fcomponents\u002Fweb-chart",{"type":43,"tag":234,"props":6078,"children":6079},{"style":251},[6080],{"type":49,"value":254},{"type":43,"tag":234,"props":6082,"children":6083},{"style":251},[6084],{"type":49,"value":269},{"type":43,"tag":234,"props":6086,"children":6087},{"class":236,"line":282},[6088,6092,6097,6101,6105,6110,6114],{"type":43,"tag":234,"props":6089,"children":6090},{"style":286},[6091],{"type":49,"value":1456},{"type":43,"tag":234,"props":6093,"children":6094},{"style":363},[6095],{"type":49,"value":6096}," CodeBlock ",{"type":43,"tag":234,"props":6098,"children":6099},{"style":286},[6100],{"type":49,"value":1507},{"type":43,"tag":234,"props":6102,"children":6103},{"style":251},[6104],{"type":49,"value":1157},{"type":43,"tag":234,"props":6106,"children":6107},{"style":257},[6108],{"type":49,"value":6109},"@\u002Fcomponents\u002Fcode-block",{"type":43,"tag":234,"props":6111,"children":6112},{"style":251},[6113],{"type":49,"value":254},{"type":43,"tag":234,"props":6115,"children":6116},{"style":251},[6117],{"type":49,"value":269},{"type":43,"tag":234,"props":6119,"children":6120},{"class":236,"line":314},[6121],{"type":43,"tag":234,"props":6122,"children":6123},{"emptyLinePlaceholder":276},[6124],{"type":49,"value":279},{"type":43,"tag":234,"props":6126,"children":6127},{"class":236,"line":329},[6128,6132,6136,6140,6145,6149],{"type":43,"tag":234,"props":6129,"children":6130},{"style":286},[6131],{"type":49,"value":289},{"type":43,"tag":234,"props":6133,"children":6134},{"style":286},[6135],{"type":49,"value":294},{"type":43,"tag":234,"props":6137,"children":6138},{"style":297},[6139],{"type":49,"value":300},{"type":43,"tag":234,"props":6141,"children":6142},{"style":303},[6143],{"type":49,"value":6144}," HomeScreen",{"type":43,"tag":234,"props":6146,"children":6147},{"style":251},[6148],{"type":49,"value":1556},{"type":43,"tag":234,"props":6150,"children":6151},{"style":251},[6152],{"type":49,"value":340},{"type":43,"tag":234,"props":6154,"children":6155},{"class":236,"line":343},[6156,6160],{"type":43,"tag":234,"props":6157,"children":6158},{"style":286},[6159],{"type":49,"value":442},{"type":43,"tag":234,"props":6161,"children":6162},{"style":347},[6163],{"type":49,"value":447},{"type":43,"tag":234,"props":6165,"children":6166},{"class":236,"line":373},[6167,6171,6176,6180,6184,6189,6193,6198],{"type":43,"tag":234,"props":6168,"children":6169},{"style":251},[6170],{"type":49,"value":456},{"type":43,"tag":234,"props":6172,"children":6173},{"style":357},[6174],{"type":49,"value":6175},"View",{"type":43,"tag":234,"props":6177,"children":6178},{"style":297},[6179],{"type":49,"value":466},{"type":43,"tag":234,"props":6181,"children":6182},{"style":251},[6183],{"type":49,"value":471},{"type":43,"tag":234,"props":6185,"children":6186},{"style":347},[6187],{"type":49,"value":6188}," flex",{"type":43,"tag":234,"props":6190,"children":6191},{"style":251},[6192],{"type":49,"value":354},{"type":43,"tag":234,"props":6194,"children":6195},{"style":483},[6196],{"type":49,"value":6197}," 1",{"type":43,"tag":234,"props":6199,"children":6200},{"style":251},[6201],{"type":49,"value":491},{"type":43,"tag":234,"props":6203,"children":6204},{"class":236,"line":423},[6205,6209,6214,6218,6223,6227,6231],{"type":43,"tag":234,"props":6206,"children":6207},{"style":251},[6208],{"type":49,"value":500},{"type":43,"tag":234,"props":6210,"children":6211},{"style":357},[6212],{"type":49,"value":6213},"Text",{"type":43,"tag":234,"props":6215,"children":6216},{"style":251},[6217],{"type":49,"value":509},{"type":43,"tag":234,"props":6219,"children":6220},{"style":363},[6221],{"type":49,"value":6222},"Native content above",{"type":43,"tag":234,"props":6224,"children":6225},{"style":251},[6226],{"type":49,"value":519},{"type":43,"tag":234,"props":6228,"children":6229},{"style":357},[6230],{"type":49,"value":6213},{"type":43,"tag":234,"props":6232,"children":6233},{"style":251},[6234],{"type":49,"value":528},{"type":43,"tag":234,"props":6236,"children":6237},{"class":236,"line":436},[6238],{"type":43,"tag":234,"props":6239,"children":6240},{"emptyLinePlaceholder":276},[6241],{"type":49,"value":279},{"type":43,"tag":234,"props":6243,"children":6244},{"class":236,"line":450},[6245,6249,6254,6258,6262,6267,6272,6276,6280,6284,6289,6293,6298,6302,6307,6312,6316,6320,6324,6328,6332,6336,6340,6344,6348,6352],{"type":43,"tag":234,"props":6246,"children":6247},{"style":251},[6248],{"type":49,"value":500},{"type":43,"tag":234,"props":6250,"children":6251},{"style":357},[6252],{"type":49,"value":6253},"WebChart",{"type":43,"tag":234,"props":6255,"children":6256},{"style":297},[6257],{"type":49,"value":1815},{"type":43,"tag":234,"props":6259,"children":6260},{"style":251},[6261],{"type":49,"value":628},{"type":43,"tag":234,"props":6263,"children":6264},{"style":363},[6265],{"type":49,"value":6266},"[",{"type":43,"tag":234,"props":6268,"children":6269},{"style":483},[6270],{"type":49,"value":6271},"10",{"type":43,"tag":234,"props":6273,"children":6274},{"style":251},[6275],{"type":49,"value":586},{"type":43,"tag":234,"props":6277,"children":6278},{"style":483},[6279],{"type":49,"value":486},{"type":43,"tag":234,"props":6281,"children":6282},{"style":251},[6283],{"type":49,"value":586},{"type":43,"tag":234,"props":6285,"children":6286},{"style":483},[6287],{"type":49,"value":6288}," 30",{"type":43,"tag":234,"props":6290,"children":6291},{"style":251},[6292],{"type":49,"value":586},{"type":43,"tag":234,"props":6294,"children":6295},{"style":483},[6296],{"type":49,"value":6297}," 40",{"type":43,"tag":234,"props":6299,"children":6300},{"style":251},[6301],{"type":49,"value":586},{"type":43,"tag":234,"props":6303,"children":6304},{"style":483},[6305],{"type":49,"value":6306}," 50",{"type":43,"tag":234,"props":6308,"children":6309},{"style":363},[6310],{"type":49,"value":6311},"]",{"type":43,"tag":234,"props":6313,"children":6314},{"style":251},[6315],{"type":49,"value":2837},{"type":43,"tag":234,"props":6317,"children":6318},{"style":297},[6319],{"type":49,"value":803},{"type":43,"tag":234,"props":6321,"children":6322},{"style":251},[6323],{"type":49,"value":471},{"type":43,"tag":234,"props":6325,"children":6326},{"style":347},[6327],{"type":49,"value":466},{"type":43,"tag":234,"props":6329,"children":6330},{"style":251},[6331],{"type":49,"value":354},{"type":43,"tag":234,"props":6333,"children":6334},{"style":251},[6335],{"type":49,"value":1217},{"type":43,"tag":234,"props":6337,"children":6338},{"style":347},[6339],{"type":49,"value":1240},{"type":43,"tag":234,"props":6341,"children":6342},{"style":251},[6343],{"type":49,"value":354},{"type":43,"tag":234,"props":6345,"children":6346},{"style":483},[6347],{"type":49,"value":1231},{"type":43,"tag":234,"props":6349,"children":6350},{"style":251},[6351],{"type":49,"value":1254},{"type":43,"tag":234,"props":6353,"children":6354},{"style":251},[6355],{"type":49,"value":1109},{"type":43,"tag":234,"props":6357,"children":6358},{"class":236,"line":494},[6359],{"type":43,"tag":234,"props":6360,"children":6361},{"emptyLinePlaceholder":276},[6362],{"type":49,"value":279},{"type":43,"tag":234,"props":6364,"children":6365},{"class":236,"line":531},[6366,6370],{"type":43,"tag":234,"props":6367,"children":6368},{"style":251},[6369],{"type":49,"value":500},{"type":43,"tag":234,"props":6371,"children":6372},{"style":357},[6373],{"type":49,"value":6374},"CodeBlock\n",{"type":43,"tag":234,"props":6376,"children":6377},{"class":236,"line":547},[6378,6383,6387,6391,6396],{"type":43,"tag":234,"props":6379,"children":6380},{"style":297},[6381],{"type":49,"value":6382}," code",{"type":43,"tag":234,"props":6384,"children":6385},{"style":251},[6386],{"type":49,"value":3328},{"type":43,"tag":234,"props":6388,"children":6389},{"style":251},[6390],{"type":49,"value":254},{"type":43,"tag":234,"props":6392,"children":6393},{"style":257},[6394],{"type":49,"value":6395},"const x = 1;",{"type":43,"tag":234,"props":6397,"children":6398},{"style":251},[6399],{"type":49,"value":6400},"\"\n",{"type":43,"tag":234,"props":6402,"children":6403},{"class":236,"line":608},[6404,6409,6413,6417,6422],{"type":43,"tag":234,"props":6405,"children":6406},{"style":297},[6407],{"type":49,"value":6408}," language",{"type":43,"tag":234,"props":6410,"children":6411},{"style":251},[6412],{"type":49,"value":3328},{"type":43,"tag":234,"props":6414,"children":6415},{"style":251},[6416],{"type":49,"value":254},{"type":43,"tag":234,"props":6418,"children":6419},{"style":257},[6420],{"type":49,"value":6421},"javascript",{"type":43,"tag":234,"props":6423,"children":6424},{"style":251},[6425],{"type":49,"value":6400},{"type":43,"tag":234,"props":6427,"children":6428},{"class":236,"line":658},[6429,6434,6438,6442,6446,6450],{"type":43,"tag":234,"props":6430,"children":6431},{"style":297},[6432],{"type":49,"value":6433}," dom",{"type":43,"tag":234,"props":6435,"children":6436},{"style":251},[6437],{"type":49,"value":471},{"type":43,"tag":234,"props":6439,"children":6440},{"style":347},[6441],{"type":49,"value":1094},{"type":43,"tag":234,"props":6443,"children":6444},{"style":251},[6445],{"type":49,"value":354},{"type":43,"tag":234,"props":6447,"children":6448},{"style":1101},[6449],{"type":49,"value":1849},{"type":43,"tag":234,"props":6451,"children":6452},{"style":251},[6453],{"type":49,"value":6454}," }}\n",{"type":43,"tag":234,"props":6456,"children":6457},{"class":236,"line":672},[6458],{"type":43,"tag":234,"props":6459,"children":6460},{"style":251},[6461],{"type":49,"value":6462}," \u002F>\n",{"type":43,"tag":234,"props":6464,"children":6465},{"class":236,"line":689},[6466],{"type":43,"tag":234,"props":6467,"children":6468},{"emptyLinePlaceholder":276},[6469],{"type":49,"value":279},{"type":43,"tag":234,"props":6471,"children":6472},{"class":236,"line":706},[6473,6477,6481,6485,6490,6494,6498],{"type":43,"tag":234,"props":6474,"children":6475},{"style":251},[6476],{"type":49,"value":500},{"type":43,"tag":234,"props":6478,"children":6479},{"style":357},[6480],{"type":49,"value":6213},{"type":43,"tag":234,"props":6482,"children":6483},{"style":251},[6484],{"type":49,"value":509},{"type":43,"tag":234,"props":6486,"children":6487},{"style":363},[6488],{"type":49,"value":6489},"Native content below",{"type":43,"tag":234,"props":6491,"children":6492},{"style":251},[6493],{"type":49,"value":519},{"type":43,"tag":234,"props":6495,"children":6496},{"style":357},[6497],{"type":49,"value":6213},{"type":43,"tag":234,"props":6499,"children":6500},{"style":251},[6501],{"type":49,"value":528},{"type":43,"tag":234,"props":6503,"children":6504},{"class":236,"line":719},[6505,6509,6513],{"type":43,"tag":234,"props":6506,"children":6507},{"style":251},[6508],{"type":49,"value":695},{"type":43,"tag":234,"props":6510,"children":6511},{"style":357},[6512],{"type":49,"value":6175},{"type":43,"tag":234,"props":6514,"children":6515},{"style":251},[6516],{"type":49,"value":528},{"type":43,"tag":234,"props":6518,"children":6519},{"class":236,"line":2493},[6520,6524],{"type":43,"tag":234,"props":6521,"children":6522},{"style":347},[6523],{"type":49,"value":712},{"type":43,"tag":234,"props":6525,"children":6526},{"style":251},[6527],{"type":49,"value":269},{"type":43,"tag":234,"props":6529,"children":6530},{"class":236,"line":3349},[6531],{"type":43,"tag":234,"props":6532,"children":6533},{"style":251},[6534],{"type":49,"value":669},{"type":43,"tag":44,"props":6536,"children":6538},{"id":6537},"platform-behavior",[6539],{"type":49,"value":6540},"Platform Behavior",{"type":43,"tag":6542,"props":6543,"children":6544},"table",{},[6545,6564],{"type":43,"tag":6546,"props":6547,"children":6548},"thead",{},[6549],{"type":43,"tag":6550,"props":6551,"children":6552},"tr",{},[6553,6559],{"type":43,"tag":6554,"props":6555,"children":6556},"th",{},[6557],{"type":49,"value":6558},"Platform",{"type":43,"tag":6554,"props":6560,"children":6561},{},[6562],{"type":49,"value":6563},"Behavior",{"type":43,"tag":6565,"props":6566,"children":6567},"tbody",{},[6568,6582,6595],{"type":43,"tag":6550,"props":6569,"children":6570},{},[6571,6577],{"type":43,"tag":6572,"props":6573,"children":6574},"td",{},[6575],{"type":49,"value":6576},"iOS",{"type":43,"tag":6572,"props":6578,"children":6579},{},[6580],{"type":49,"value":6581},"Rendered in WKWebView",{"type":43,"tag":6550,"props":6583,"children":6584},{},[6585,6590],{"type":43,"tag":6572,"props":6586,"children":6587},{},[6588],{"type":49,"value":6589},"Android",{"type":43,"tag":6572,"props":6591,"children":6592},{},[6593],{"type":49,"value":6594},"Rendered in WebView",{"type":43,"tag":6550,"props":6596,"children":6597},{},[6598,6603],{"type":43,"tag":6572,"props":6599,"children":6600},{},[6601],{"type":49,"value":6602},"Web",{"type":43,"tag":6572,"props":6604,"children":6605},{},[6606],{"type":49,"value":6607},"Rendered as-is (no webview wrapper)",{"type":43,"tag":52,"props":6609,"children":6610},{},[6611,6613,6618],{"type":49,"value":6612},"On web, the ",{"type":43,"tag":58,"props":6614,"children":6616},{"className":6615},[],[6617],{"type":49,"value":803},{"type":49,"value":6619}," prop is ignored since no webview is needed.",{"type":43,"tag":44,"props":6621,"children":6623},{"id":6622},"tips",[6624],{"type":49,"value":6625},"Tips",{"type":43,"tag":86,"props":6627,"children":6628},{},[6629,6634,6639,6644,6649,6654],{"type":43,"tag":90,"props":6630,"children":6631},{},[6632],{"type":49,"value":6633},"DOM components hot reload during development",{"type":43,"tag":90,"props":6635,"children":6636},{},[6637],{"type":49,"value":6638},"Keep DOM components focused — don't put entire screens in webviews",{"type":43,"tag":90,"props":6640,"children":6641},{},[6642],{"type":49,"value":6643},"Use native components for navigation chrome, DOM components for specialized content",{"type":43,"tag":90,"props":6645,"children":6646},{},[6647],{"type":49,"value":6648},"Test on all platforms — web rendering may differ slightly from native webviews",{"type":43,"tag":90,"props":6650,"children":6651},{},[6652],{"type":49,"value":6653},"Large DOM components may impact performance — profile if needed",{"type":43,"tag":90,"props":6655,"children":6656},{},[6657],{"type":49,"value":6658},"The webview has its own JavaScript context — cannot directly share state with native",{"type":43,"tag":2842,"props":6660,"children":6661},{},[6662],{"type":49,"value":6663},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":6665,"total":6785},[6666,6685,6701,6713,6733,6753,6773],{"slug":6667,"name":6667,"fn":6668,"description":6669,"org":6670,"tags":6671,"stars":25,"repoUrl":26,"updatedAt":6684},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6672,6675,6678,6681],{"name":6673,"slug":6674,"type":15},"Accessibility","accessibility",{"name":6676,"slug":6677,"type":15},"Charts","charts",{"name":6679,"slug":6680,"type":15},"Data Visualization","data-visualization",{"name":6682,"slug":6683,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":6686,"name":6686,"fn":6687,"description":6688,"org":6689,"tags":6690,"stars":25,"repoUrl":26,"updatedAt":6700},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6691,6694,6697],{"name":6692,"slug":6693,"type":15},"Agents","agents",{"name":6695,"slug":6696,"type":15},"Browser Automation","browser-automation",{"name":6698,"slug":6699,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":6702,"name":6702,"fn":6703,"description":6704,"org":6705,"tags":6706,"stars":25,"repoUrl":26,"updatedAt":6712},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6707,6708,6711],{"name":6695,"slug":6696,"type":15},{"name":6709,"slug":6710,"type":15},"Local Development","local-development",{"name":6698,"slug":6699,"type":15},"2026-04-06T18:41:17.526867",{"slug":6714,"name":6714,"fn":6715,"description":6716,"org":6717,"tags":6718,"stars":25,"repoUrl":26,"updatedAt":6732},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6719,6720,6723,6726,6729],{"name":6692,"slug":6693,"type":15},{"name":6721,"slug":6722,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":6724,"slug":6725,"type":15},"SDK","sdk",{"name":6727,"slug":6728,"type":15},"Serverless","serverless",{"name":6730,"slug":6731,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":6734,"name":6734,"fn":6735,"description":6736,"org":6737,"tags":6738,"stars":25,"repoUrl":26,"updatedAt":6752},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6739,6740,6743,6746,6749],{"name":23,"slug":24,"type":15},{"name":6741,"slug":6742,"type":15},"React","react",{"name":6744,"slug":6745,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":6747,"slug":6748,"type":15},"UI Components","ui-components",{"name":6750,"slug":6751,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":6754,"name":6754,"fn":6755,"description":6756,"org":6757,"tags":6758,"stars":25,"repoUrl":26,"updatedAt":6772},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6759,6762,6765,6768,6771],{"name":6760,"slug":6761,"type":15},"AI Infrastructure","ai-infrastructure",{"name":6763,"slug":6764,"type":15},"Cost Optimization","cost-optimization",{"name":6766,"slug":6767,"type":15},"LLM","llm",{"name":6769,"slug":6770,"type":15},"Performance","performance",{"name":6750,"slug":6751,"type":15},"2026-04-06T18:40:44.377464",{"slug":6774,"name":6774,"fn":6775,"description":6776,"org":6777,"tags":6778,"stars":25,"repoUrl":26,"updatedAt":6784},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6779,6780,6783],{"name":6763,"slug":6764,"type":15},{"name":6781,"slug":6782,"type":15},"Database","database",{"name":6766,"slug":6767,"type":15},"2026-04-06T18:41:08.513425",600,{"items":6787,"total":6984},[6788,6809,6832,6849,6865,6882,6901,6913,6927,6941,6953,6968],{"slug":6789,"name":6789,"fn":6790,"description":6791,"org":6792,"tags":6793,"stars":6806,"repoUrl":6807,"updatedAt":6808},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6794,6797,6800,6803],{"name":6795,"slug":6796,"type":15},"Documents","documents",{"name":6798,"slug":6799,"type":15},"Healthcare","healthcare",{"name":6801,"slug":6802,"type":15},"Insurance","insurance",{"name":6804,"slug":6805,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":6810,"name":6810,"fn":6811,"description":6812,"org":6813,"tags":6814,"stars":6829,"repoUrl":6830,"updatedAt":6831},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6815,6818,6820,6823,6826],{"name":6816,"slug":6817,"type":15},".NET","dotnet",{"name":6819,"slug":6810,"type":15},"ASP.NET Core",{"name":6821,"slug":6822,"type":15},"Blazor","blazor",{"name":6824,"slug":6825,"type":15},"C#","csharp",{"name":6827,"slug":6828,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":6833,"name":6833,"fn":6834,"description":6835,"org":6836,"tags":6837,"stars":6829,"repoUrl":6830,"updatedAt":6848},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6838,6841,6844,6847],{"name":6839,"slug":6840,"type":15},"Apps SDK","apps-sdk",{"name":6842,"slug":6843,"type":15},"ChatGPT","chatgpt",{"name":6845,"slug":6846,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":6850,"name":6850,"fn":6851,"description":6852,"org":6853,"tags":6854,"stars":6829,"repoUrl":6830,"updatedAt":6864},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6855,6858,6861],{"name":6856,"slug":6857,"type":15},"API Development","api-development",{"name":6859,"slug":6860,"type":15},"CLI","cli",{"name":6862,"slug":6863,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":6866,"name":6866,"fn":6867,"description":6868,"org":6869,"tags":6870,"stars":6829,"repoUrl":6830,"updatedAt":6881},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6871,6874,6877,6878],{"name":6872,"slug":6873,"type":15},"Cloudflare","cloudflare",{"name":6875,"slug":6876,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":6721,"slug":6722,"type":15},{"name":6879,"slug":6880,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":6883,"name":6883,"fn":6884,"description":6885,"org":6886,"tags":6887,"stars":6829,"repoUrl":6830,"updatedAt":6900},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6888,6891,6894,6897],{"name":6889,"slug":6890,"type":15},"Productivity","productivity",{"name":6892,"slug":6893,"type":15},"Project Management","project-management",{"name":6895,"slug":6896,"type":15},"Strategy","strategy",{"name":6898,"slug":6899,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":6902,"name":6902,"fn":6903,"description":6904,"org":6905,"tags":6906,"stars":6829,"repoUrl":6830,"updatedAt":6912},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6907,6908,6910,6911],{"name":6682,"slug":6683,"type":15},{"name":6909,"slug":6902,"type":15},"Figma",{"name":23,"slug":24,"type":15},{"name":6845,"slug":6846,"type":15},"2026-04-12T05:06:47.939943",{"slug":6914,"name":6914,"fn":6915,"description":6916,"org":6917,"tags":6918,"stars":6829,"repoUrl":6830,"updatedAt":6926},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6919,6920,6923,6924,6925],{"name":6682,"slug":6683,"type":15},{"name":6921,"slug":6922,"type":15},"Design System","design-system",{"name":6909,"slug":6902,"type":15},{"name":23,"slug":24,"type":15},{"name":6747,"slug":6748,"type":15},"2026-05-10T05:59:52.971881",{"slug":6928,"name":6928,"fn":6929,"description":6930,"org":6931,"tags":6932,"stars":6829,"repoUrl":6830,"updatedAt":6940},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6933,6934,6935,6938,6939],{"name":6682,"slug":6683,"type":15},{"name":6921,"slug":6922,"type":15},{"name":6936,"slug":6937,"type":15},"Documentation","documentation",{"name":6909,"slug":6902,"type":15},{"name":23,"slug":24,"type":15},"2026-05-16T06:07:47.821474",{"slug":6942,"name":6942,"fn":6943,"description":6944,"org":6945,"tags":6946,"stars":6829,"repoUrl":6830,"updatedAt":6952},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6947,6948,6949,6950,6951],{"name":6682,"slug":6683,"type":15},{"name":6909,"slug":6902,"type":15},{"name":23,"slug":24,"type":15},{"name":6747,"slug":6748,"type":15},{"name":6827,"slug":6828,"type":15},"2026-05-16T06:07:40.583615",{"slug":6954,"name":6954,"fn":6955,"description":6956,"org":6957,"tags":6958,"stars":6829,"repoUrl":6830,"updatedAt":6967},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6959,6962,6963,6966],{"name":6960,"slug":6961,"type":15},"Animation","animation",{"name":6862,"slug":6863,"type":15},{"name":6964,"slug":6965,"type":15},"Creative","creative",{"name":6682,"slug":6683,"type":15},"2026-05-02T05:31:48.48485",{"slug":6969,"name":6969,"fn":6970,"description":6971,"org":6972,"tags":6973,"stars":6829,"repoUrl":6830,"updatedAt":6983},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6974,6975,6976,6979,6982],{"name":6964,"slug":6965,"type":15},{"name":6682,"slug":6683,"type":15},{"name":6977,"slug":6978,"type":15},"Image Generation","image-generation",{"name":6980,"slug":6981,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]