react-native-skia-layout

Flexbox layouts for React Native Skia. Position and size Skia shapes, text, images, and SVGs using familiar flexbox props, powered by React Native's layout engine, Yoga.

Why?

React Native Skia provides powerful rendering primitives, but positioning multiple elements and manually computing x/y for every element gets painful quickly, especially with nested containers, wrapping rows, and absolute positioning.

This let's you write Skia components the same way you already write React Native components.

Installation

npm install react-native-skia-layout react-native-nitro-modules @shopify/react-native-skia

Expo

This library works with Expo development builds and EAS Build. It does not run in Expo Go.

Web is not supported — there is no JS/WASM fallback for the native layout engine.

Setup

1. Use a development build (expo-dev-client), not Expo Go.

2. Install with expo install so versions align with your SDK:

npx expo install expo-dev-client @shopify/react-native-skia react-native-nitro-modules react-native-skia-layout

3. Enable the New Architecture (required by Nitro Modules). On Expo SDK 53+ this is on by default; otherwise set it in app.json:

{
  "expo": {
    "newArchEnabled": true
  }
}

4. For older Expo SDKs below 54 set the iOS deployment target to 16.0+ (required for Nitro's C++ interop). Expo SDK 54+ already defaults to 16.4. Use expo-build-properties:

5. Generate native projects and run:

npx expo prebuild
npx expo run:ios    # or npx expo run:android

Or build a dev client with EAS Build.

After adding or updating this package, rebuild your development client (npx expo prebuild --clean if native linking fails).

Version alignment

Match your Expo SDK's React Native version to this library's peer range (react-native >= 0.76.0). Use npx expo install rather than npm install directly to avoid version mismatches.

Quick start

import {
  FlexCanvas,
  FlexLayout,
  LayoutCircle,
  LayoutRect,
} from 'react-native-skia-layout';

export function RowExample() {
  return (
    <FlexCanvas width={340} height={400} style={{ backgroundColor: 'coral' }}>
      <FlexLayout
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        gap={10}
        wrap="wrap"
      >
        <LayoutCircle r={10} color="red" />
        <LayoutCircle r={10} color="blue" />
        <LayoutRect width={40} height={40} color="green" />
      </FlexLayout>
    </FlexCanvas>
  );
}

How it works

1. FlexCanvas — A Skia Canvas with a root layout node. Pass explicit width and height to define the layout viewport.
2. FlexLayout — A flex container. Nests like a <View> with flexDirection, justifyContent, alignItems, etc.
3. Layout components — Skia primitives that participate in layout and render at their computed position.
4. debug - Draws a stroke around elements computed bounds. Good for visualising layout bounds.

Limitations

Animated props are not supported yet. Layout props (width, height, flex, gap, margin, etc.) must be plain JavaScript values, not Reanimated SharedValues or other Skia animated types. Changing layout currently triggers a React re-render and a full layout pass; driving layout from the UI thread per frame is not implemented.

API

Components

| Component | Description | |---|---| | FlexCanvas | Root canvas + layout root. Requires width and height. | | FlexLayout | Flex container for nesting children. | | LayoutRect | Sized rectangle | | LayoutRoundedRect | Rounded rectangle | | LayoutCircle | Circle (sized by r) | | LayoutOval | Ellipse (width × height) | | LayoutPath | SVG path string | | LayoutPoints | Polyline / point drawing | | LayoutImage | Skia Image | | LayoutSvg | Skia SVG | | LayoutText | Single-line text (measured via font.measureText) | | LayoutParagraph | Multi-line rich text via Skia Paragraph |

Each layout component accepts the underlying Skia props (color, path, font, etc.) plus layout props below.

Container props (FlexLayout)

| Prop | Type | Default | |---|---|---| | direction | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'row' | | flex | number | — | | flexGrow | number | — | | flexShrink | number | — | | flexBasis | number | — | | width / height | number | — | | gap | number | — | | wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | — | | justifyContent | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | — | | alignContent | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly' | — | | alignItems | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | — | | padding | number | { top?, right?, bottom?, left? } | — | | margin | number | { top?, right?, bottom?, left? } | — | | position | 'relative' | 'absolute' | 'static' | — | | left / top / right / bottom | number | — | | debug | boolean | false | | debugColor | string | — |

Node props (layout primitives)

Shared across most Layout* components:

| Prop | Type | |---|---| | flex | number | | width / height | number | | margin | number | { top?, right?, bottom?, left? } | | padding | number | { top?, right?, bottom?, left? } (where supported) | | position | 'relative' | 'absolute' | 'static' | | left / top / right / bottom | number | | debug | boolean | | debugColor | string |

Debug mode

Pass debug to any FlexLayout or supported Layout* component to draw a stroke around its computed bounds. Good for visualising layout bounds:

<LayoutOval width={45} height={65} color="green" debug />

Examples

The example/ app demonstrates:

• Row layout with space-between and wrap
• Column layout with centered alignment
• Nested row/column containers
• Absolute positioning
• Text and paragraph layout

Run it from the repo root:

yarn example ios   # or android

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library