react-native-nitro-vector

react-native-nitro-vector is a C++ vector path engine for React Native, powered by Nitro Modules.

Built from scratch — bezier math, boolean operations, path analysis, and SVG parsing — all running in C++ off the JS thread entirely.

Benchmark

Parsing 1,000 SVG paths on Android:

| Parser | Total | Per parse | | ------------------------- | ----- | --------- | | react-native-nitro-vector | 4.2ms | 4.2μs | | svg-path-parser (JS) | 443ms | 443μs |

104x faster than the popular JS alternative.

Installation

npm install react-native-nitro-vector

Requires Nitro Modules to be installed in your project.

This is not a renderer — it is a geometry computation engine used to prepare vector data for rendering systems.

Usage

import { vectorEngine } from 'react-native-nitro-vector'

// Parse an SVG path string
const path = vectorEngine.parseSvgPath(
  'M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z'
)

// Analyze it
console.log(path.toSvgString()) // normalized SVG string
console.log(path.getLength()) // arc length in coordinate units
console.log(path.getBounds()) // { x, y, width, height }
console.log(path.getArea()) // enclosed area
console.log(path.pointCount()) // number of anchor points

// Build a path manually
const manual = vectorEngine.createPath()
manual.moveTo({ x: 0, y: 0 })
manual.lineTo({ x: 100, y: 0 })
manual.curveTo({ x: 100, y: 50 }, { x: 50, y: 100 }, { x: 0, y: 100 })
manual.close()
console.log(manual.toSvgString())

API

VectorEngine

| Method | Returns | Description | | ----------------- | ------------ | -------------------------------------------- | | createPath() | HybridPath | Creates a new empty path | | parseSvgPath(d) | HybridPath | Parses an SVG path string into a path object |

HybridPath

Construction

| Method | Returns | Description | | -------------------------- | ------- | --------------------------------------- | | moveTo(point) | void | Starts a new subpath at the given point | | lineTo(point) | void | Adds a straight line to the given point | | curveTo(cp1, cp2, point) | void | Adds a cubic bezier curve | | close() | void | Closes the current subpath |

Analysis

| Method | Returns | Description | | --------------- | -------- | ----------------------------------------- | | toSvgString() | string | Serializes the path to an SVG path string | | getLength() | number | Total arc length of the path | | getBounds() | Rect | Axis-aligned bounding box | | getArea() | number | Enclosed area of the path | | pointCount() | number | Total number of anchor points |

What's Coming

The C++ engine underneath already supports these — JS bindings being added as projects need them:

• Boolean operations — union, subtract, intersect, XOR
• Path offsetting — stroke and offset paths
• Closest point — hit testing and snapping
• Arc length parameterization — equal spacing along curves
• Path simplification — Ramer-Douglas-Peucker
• Affine transforms — translate, rotate, scale, skew

How It Works

The engine is a pure C++ vector path library with no external dependencies. It implements:

• Cubic bezier evaluation, splitting, and flattening
• Arc length via 5-point Gaussian quadrature
• Newton-Raphson for arc length inversion
• Winding number algorithm for point-in-path testing
• SVG path parser supporting M, L, C, Q, A, T, S, Z and relative commands
• Boolean operations via segment labeling and assembly

Wrapped with Nitro Modules for type-safe, zero-boilerplate JSI bindings.

Source

• Nitro package: this repository
• C++ engine: originally developed at jsi-canvas, vendored into cpp/vector-engine

License

MIT