React Native

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

TypeScript is also supported in React Native (TSX) and is documented here.

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}></LiveCodes>);
}

Vue

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

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

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "template": "react-native"
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Usage

For usage and examples, see documentation for JSX.

Language Info

Name

react-native

Extension

.react-native.jsx

Editor

script

Compiler

TypeScript compiler and React Native for Web

Code Formatting

Using Prettier.

Custom Settings

Custom settings added to the property react-native are passed to the TypeScript compiler as compiler options while compiling JSX. 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": {
    "disableAutoRender": true
  }
}

Starter Template

https://livecodes.io/?template=react-native

Links

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