universal-rendering.md

Universal Rendering

The react-sketchapp components have been architected to provide the same metaphors, layout system & interfaces as react-native, so there is less switching cost between platforms. However, it is also possible to render the same code across multiple platforms. We call this Universal Rendering.

The react-primitives project provides consistent primitive interfaces across platforms, and is the simplest way to achieve Universal Rendering.

Setup

React Primitives works out-of-the-box with react-dom & react-native, and react-sketchapp (when using skpm).

Install react-primitives and its peer dependencies

npm install --save react-primitives react react-dom react-native react-sketchapp

Creating your components

Import base primitives from react-primitives rather than react-sketchapp / react-native — e.g.

/**
 * components/Row.js
 * Define your component using platform-independent primitives
 */
import React from 'react';
- import { View, Text, StyleSheet } from 'react-sketchapp';
+ import { View, Text, StyleSheet } from 'react-primitives';

const Row = props =>
  <View>
    <Text>{ props.title }</Text>
    <Text>{ props.description }</Text>
  </View>

export default Row;

Importing existing components

If you have a large existing React Native component library, you might enjoy using a codemod to automatically convert react-native imports to react-primitives — a proof-of-concept codemod is provided on ASTExplorer.

Rendering

Each platform will require an entry point with its respective render / registration call - e.g:

/**
  * dom-entry.js
  * Standard ReactDOM setup for the browser
  */
import React from 'react';
import { render } from 'react-dom';
import Row from './components/Row';

render(<Row title='Foo' subtitle='Bar' />, document.getElementById('root'));

/**
 * native-entry.js
 * Standard ReactNative setup
 */
import React from 'react';
import { AppRegistry } from 'react-native';
import Row from './components/Row';

AppRegistry.registerComponent('Row', () => Row);

/**
 * sketch-entry.js
 * same setup as other examples
 */
import React from 'react';
import { render } from 'react-sketchapp';
import Row from './components/Row';

export default (context) => {
  render(<Row title='Foo' subtitle='Bar' />, context.document.currentPage());
}

React Primitives only provides components that make sense on every platform, so Sketch-specific concepts like TextStyles and <Artboard /> should be imported from the main react-sketchapp package. You can mix-and-match them as necessary - e.g.

/**
 * sketch-entry.js
 * same setup as other examples
 */
import React from 'react';
import { Artboard, render } from 'react-sketchapp';
import Row from './components/Row'; // built with react-primitives

export default (context) => {
  render(<Artboard><Row title='Foo' subtitle='Bar' /></Artboard>, context.document.currentPage());
}