Skip to main content

🎨 MaskSegmentCanvas

React Native Interactive Mask Segmentation

OpenCV semantic segmentation + SkSL Shader coloring — a powerful interactive mask painting library for React Native 0.79+

🧠

OpenCV Segmentation

Semantic mask layout, baseboard patching, and region extraction powered by react-native-fast-opencv.

đŸ–Œī¸

Skia SkSL Shader

Single-pass full-screen shader blending original image + LAB low/high frequency texture color overlays.

👆

Rich Interaction

Bottom color bar, tap-to-paint, long-press preview, undo, compare with original, and draft recovery.

📐

Skia Dash Outlines

Dashed outline highlights for each semantic region with automatic carousel animation.

⚡

High Performance

~320–450ms to interactive on 1080p images. Independent of origin resolution with pipeline capping.

🌐

Remote & Local Images

Supports file:// absolute paths and http(s):// remote URLs with built-in download and decode.

Quick Start

npm install react-native-mask-segment-canvas

# Install peer dependencies
npm install @shopify/react-native-skia \
  react-native-reanimated \
  react-native-fast-opencv \
  react-native-fs buffer upng-js

# iOS
cd ios && pod install && cd ..