Live editing of React Native in browser

Try it out

react-native-live-code

react-native-live-code is an lightweighted React Native editor with live preview. it is ideal for quick UI component prototyping or educational purposes. The live editor supports TypeScript.

Installation

npm install react-native-live-code

Simple Setup

react-native-live-code offers two UI components: RNLiveCodeRenderer and RNLiveCodeEditor which can be positioned separately in any layouts. Additionally, RNLiveCodeProvider is required as a container for these components to communicate update of live editing.

...
    <div className="App-container">
      <RNLiveCodeProvider defaultCode={defaultCode}>
        <RNLiveCodeRenderer />
        <RNLiveCodeEditor />
      </RNLiveCodeProvider>
    </div>
...

RNLiveCodeEditor Component

RNLiveCodeEditor is backed by CodeMirror for code highlighting and other lightweight IDE features.

Prop	Description	Default
width	Width of the editor view. Default value if not set.	'600px'
height	Width of the editor view. Default value if not set.	'549px'
theme	Be used to define a theme (e.g., @codemirror/theme-one-dark).	okaidia
onCodeChange	A callback when editing occurs.	undefined
showTranspiled	true to displayed the transpiled JavaScript instead of JSX (not editable)	undefined

RNLiveCodeRenderer Component

RNLiveCodeRenderer is where the evaluation (of live code) occurs. It also renders the evaluated component on the simulated viewport.

Prop	Description	Default
width	Width of the simulated viewport. Default value if not set.	'285px'
height	Width of the simulated viewport. Default value if not set.	'549px'
loopDetector	Whether to enable the endless loop detector (the exported component only).	undefined

RNLiveCodeProvider

RNLiveCodeProvider needs to be positioned as the container of both RNLiveCodeEditor and RNLiveCodeRenderer to facilitate the inter-component communication and to maintain the global states of react-native-live-code.

Prop	Description	Default
defaultCode	The initial code that is placed in editor and is rendered renderer.	''

License

This project is licenced under the MIT License.