React Native (TSX)

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).

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "react-native"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "react-native"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "react-native"
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "react-native"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "react-native"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "react-native"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "react-native"
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="react-native"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Usage

For usage and examples, see documentation for JSX.

Language Info

Name

react-native-tsx

Extension

.react-native.tsx

Editor

script

Compiler

TypeScript compiler and React Native for Web

Version

react-native-web: v0.21.2

Code Formatting

Using Prettier.

Custom Settings

Custom settings added to the property react-native-tsx are passed to the TypeScript compiler as compiler options while compiling TSX. In addition, the option disableAutoRender can be set to true to disable auto-rendering.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings

{
  "react-native-tsx": {
    "disableAutoRender": true
  }
}

Starter Template

https://livecodes.io/?template=react-native (uses JSX)

Links

• React Native
• React Native for Web
• React
• JSX
• TypeScript