"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7371"],{4947:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>o,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/react-native-tsx","title":"React Native (TSX)","description":"React Native is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using React Native for Web (an accessible implementation of React Native\'s Components and APIs that is interoperable with React DOM).","source":"@site/docs/languages/react-native-tsx.mdx","sourceDirName":"languages","slug":"/languages/react-native-tsx","permalink":"/docs/languages/react-native-tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/react-native-tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"R","permalink":"/docs/languages/r"},"next":{"title":"React Native","permalink":"/docs/languages/react-native"}}'),i=s("5893"),r=s("65"),a=s("3365");let o={},l="React Native (TSX)",c={},d=[{value:"Demo",id:"demo",level:2},{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"react-native-tsx",children:"React Native (TSX)"})}),"\n","\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://reactnative.dev/",children:"React Native"})," is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using ",(0,i.jsx)(t.a,{href:"https://necolas.github.io/react-native-web/",children:"React Native for Web"})," (an accessible implementation of React Native's Components and APIs that is interoperable with React DOM)."]}),"\n",(0,i.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,i.jsx)(a.Z,{template:"react-native",height:"400px"}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["For usage and examples, see documentation for ",(0,i.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"react-native-tsx"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".react-native.tsx"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"})," and ",(0,i.jsx)(t.a,{href:"https://necolas.github.io/react-native-web/",children:"React Native for Web"})]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"react-native-tsx"})," are passed to the TypeScript compiler as ",(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#compilerOptions",children:"compiler options"})," while compiling TSX.\nIn addition, the option ",(0,i.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,i.jsx)(t.code,{children:"true"})," to disable ",(0,i.jsx)(t.a,{href:"./jsx#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n  "react-native-tsx": {\n    "disableAutoRender": true\n  }\n}\n'})}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=react-native",children:"https://livecodes.io/?template=react-native"})," (uses JSX)"]}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://reactnative.dev/",children:"React Native"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://necolas.github.io/react-native-web/",children:"React Native for Web"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),a=s("8294");function o(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[o,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,g]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:o,config:c,...v}=e;if(i(s||""),l(n||{}),d(r),h&&m===JSON.stringify(v)){if(p===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,a.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:o,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),g=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,a]=(0,r.useState)(e.ts),[o,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),x="3.7rem",[j,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(x),C=(0,r.useRef)(null),R=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),a(e(i,"ts")),l(e(o,"jsx")),f(e(m,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?x:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!j),R()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:g.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"jsx",children:o})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:a,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=`
import { createPlayground } from 'livecodes';

const options = ${h(c)};
createPlayground('#container', options);

`.trimStart(),p=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${h(c)};
createPlayground('#container', options);

`.trimStart(),g=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${h(c)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),f=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${h(c)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,v=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${h(c)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:a}=t,o=n||"headless"===a,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)R(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",o?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),a=r||document.createElement("iframe");a.classList.add(n),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===i?"eager":"lazy"),o?R(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),a.onload=()=>{e(a)},a.src=d.href,r||l.appendChild(a)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await y();let i=N();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function R(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let N=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return x("exec",[e,...s])},destroy:()=>v.settled?x("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:a,import:o,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return a}});var n=s(7294);let i={},r=n.createContext(i);function a(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);