react-native-figma-shadow 0.1.0-alpha.1

package/cpp/figmashadow/Rasterizer.cpp

@@ -0,0 +1,276 @@
+#include "Rasterizer.h"
+
+#include <algorithm>
+#include <cmath>
+#include <cstdint>
+
+namespace figmashadow {
+
+namespace {
+
+constexpr float kSqrt2 = 1.41421356237f;
+constexpr float kInvSqrt2Pi = 0.39894228040f;
+constexpr int kMaxDimension = 8192;
+
+inline float clamp01(float v) { return v < 0.0f ? 0.0f : (v > 1.0f ? 1.0f : v); }
+inline float clampf(float v, float lo, float hi) {
+  return v < lo ? lo : (v > hi ? hi : v);
+}
+inline float gauss1d(float d, float sigma) {
+  return std::exp(-(d * d) / (2.0f * sigma * sigma)) * kInvSqrt2Pi / sigma;
+}
+
+struct Radii4 {
+  float tl, tr, br, bl;
+};
+
+// Signed distance to a rounded rectangle centred at the origin with half-extents
+// (hx, hy). Negative inside.
+float sdRoundRect(float x, float y, float hx, float hy, const Radii4& r) {
+  float rr = (x >= 0.0f) ? ((y >= 0.0f) ? r.br : r.tr) : ((y >= 0.0f) ? r.bl : r.tl);
+  rr = clampf(rr, 0.0f, std::min(hx, hy));
+  float qx = std::fabs(x) - (hx - rr);
+  float qy = std::fabs(y) - (hy - rr);
+  float ax = std::max(qx, 0.0f);
+  float ay = std::max(qy, 0.0f);
+  float outside = std::sqrt(ax * ax + ay * ay);
+  float inside = std::min(std::max(qx, qy), 0.0f);
+  return outside + inside - rr;
+}
+
+// Antialiased hard coverage of the rounded rectangle (used for clipping and for
+// the element knock-out).
+float hardCoverage(float x, float y, float hx, float hy, const Radii4& r, float aa) {
+  float sd = sdRoundRect(x, y, hx, hy, r);
+  return clamp01(0.5f - sd / std::max(aa, 1e-4f));
+}
+
+// Exact Gaussian convolution of a sharp-cornered rectangle: the 2D integral is
+// separable into a product of error functions.
+float rectCoverage(float x, float y, float hx, float hy, float sigma) {
+  float s2 = kSqrt2 * sigma;
+  float gx = 0.5f * (std::erf((hx - x) / s2) + std::erf((hx + x) / s2));
+  float gy = 0.5f * (std::erf((hy - y) / s2) + std::erf((hy + y) / s2));
+  return clamp01(gx * gy);
+}
+
+// Half-width of the shape, measured from the vertical centre line, at signed
+// vertical coordinate `t`. `rNeg` is the corner radius used for t <= 0, `rPos`
+// for t > 0.
+float sideExtent(float t, float hx, float hy, float rNeg, float rPos) {
+  float r = (t <= 0.0f) ? rNeg : rPos;
+  r = clampf(r, 0.0f, std::min(hx, hy));
+  float at = std::fabs(t);
+  if (at >= hy) return 0.0f;
+  float straight = hy - r;
+  if (at <= straight) return hx;
+  float dy = at - straight;
+  return (hx - r) + std::sqrt(std::max(0.0f, r * r - dy * dy));
+}
+
+// Exact-ish Gaussian convolution of a rounded rectangle via bounded vertical
+// quadrature. Slower; used only when `highQuality` is requested.
+float quadratureCoverage(float x, float y, float hx, float hy, const Radii4& r,
+                         float sigma) {
+  float s2 = kSqrt2 * sigma;
+  float R = 3.5f * sigma;
+  int n = static_cast<int>(std::ceil(9.5f * sigma / 0.75f));
+  n = std::min(std::max(n, 16), 160);
+  float step = (2.0f * R) / n;
+  float lo = y - R;
+  float acc = 0.0f;
+  float wsum = 0.0f;
+  for (int i = 0; i < n; ++i) {
+    float t = lo + (i + 0.5f) * step;
+    float w = gauss1d(y - t, sigma);
+    float re = sideExtent(t, hx, hy, r.tr, r.br);
+    float le = sideExtent(t, hx, hy, r.tl, r.bl);
+    float horiz = 0.0f;
+    if (re > 0.0f || le > 0.0f) {
+      horiz = clamp01(0.5f * (std::erf((re - x) / s2) + std::erf((le + x) / s2)));
+    }
+    acc += w * horiz;
+    wsum += w;
+  }
+  return (wsum > 1e-6f) ? clamp01(acc / wsum) : 0.0f;
+}
+
+// Gaussian convolution of a rounded rectangle. Fast path: exact for sharp
+// corners, an SDF/error-function approximation for rounded corners (visually
+// indistinguishable for shadows and, crucially, identical on every platform).
+float blurredCoverage(float x, float y, float hx, float hy, const Radii4& r,
+                      float sigma, float aa, bool highQuality) {
+  if (hx <= 0.0f || hy <= 0.0f) return 0.0f;
+  if (sigma < 0.6f) return hardCoverage(x, y, hx, hy, r, std::max(aa, 0.75f));
+  if (r.tl == 0.0f && r.tr == 0.0f && r.br == 0.0f && r.bl == 0.0f) {
+    return rectCoverage(x, y, hx, hy, sigma);
+  }
+  if (highQuality) return quadratureCoverage(x, y, hx, hy, r, sigma);
+  float sd = sdRoundRect(x, y, hx, hy, r);
+  return clamp01(0.5f * (1.0f + std::erf(-sd / (kSqrt2 * sigma))));
+}
+
+Radii4 spreadRadii(const CornerRadii& r, float spread, float hx, float hy) {
+  auto grow = [&](float v) {
+    float out = (v > 0.0f) ? std::max(0.0f, v + spread) : 0.0f;
+    return clampf(out, 0.0f, std::min(hx, hy));
+  };
+  return {grow(r.topLeft), grow(r.topRight), grow(r.bottomRight), grow(r.bottomLeft)};
+}
+
+Radii4 shrinkRadii(const CornerRadii& r, float spread, float hx, float hy) {
+  auto shrink = [&](float v) {
+    float out = (v > 0.0f) ? std::max(0.0f, v - spread) : 0.0f;
+    return clampf(out, 0.0f, std::min(std::max(hx, 0.0f), std::max(hy, 0.0f)));
+  };
+  return {shrink(r.topLeft), shrink(r.topRight), shrink(r.bottomRight), shrink(r.bottomLeft)};
+}
+
+// Premultiplied float RGBA accumulation buffer.
+struct FImage {
+  int w = 0;
+  int h = 0;
+  std::vector<float> px;  // w*h*4
+};
+
+inline void compositeOver(float* dst, float sr, float sg, float sb, float sa) {
+  float inv = 1.0f - sa;
+  dst[0] = sr + dst[0] * inv;
+  dst[1] = sg + dst[1] * inv;
+  dst[2] = sb + dst[2] * inv;
+  dst[3] = sa + dst[3] * inv;
+}
+
+}  // namespace
+
+Bitmap renderShadow(const RenderRequest& req) {
+  Bitmap result;
+
+  const float logicalW = req.bleed.left + req.contentWidth + req.bleed.right;
+  const float logicalH = req.bleed.top + req.contentHeight + req.bleed.bottom;
+  if (logicalW <= 0.0f || logicalH <= 0.0f || req.layers.empty()) return result;
+
+  const float scale = std::max(req.scale, 0.1f);
+  int outW = std::min(kMaxDimension,
+                      std::max(1, static_cast<int>(std::lround(logicalW * scale))));
+  int outH = std::min(kMaxDimension,
+                      std::max(1, static_cast<int>(std::lround(logicalH * scale))));
+
+  // Drop to a lower internal resolution for pathologically large surfaces; the
+  // factor is derived purely from the inputs, so both platforms pick the same
+  // one.
+  double outPx = static_cast<double>(outW) * outH;
+  float internalScale = scale;
+  if (outPx > kMaxRenderPixels) {
+    internalScale = scale * static_cast<float>(std::sqrt(kMaxRenderPixels / outPx));
+  }
+  int rw = std::max(1, static_cast<int>(std::lround(logicalW * internalScale)));
+  int rh = std::max(1, static_cast<int>(std::lround(logicalH * internalScale)));
+  const float aa = 1.0f / internalScale;
+
+  FImage acc;
+  acc.w = rw;
+  acc.h = rh;
+  acc.px.assign(static_cast<size_t>(rw) * rh * 4, 0.0f);
+
+  const float hx = req.contentWidth * 0.5f;
+  const float hy = req.contentHeight * 0.5f;
+  const float ecx = req.bleed.left + hx;
+  const float ecy = req.bleed.top + hy;
+  const Radii4 elementRadii{req.radii.topLeft, req.radii.topRight,
+                            req.radii.bottomRight, req.radii.bottomLeft};
+
+  // Paint order: the first layer in the list ends up on top, so composite from
+  // the last layer to the first.
+  for (auto it = req.layers.rbegin(); it != req.layers.rend(); ++it) {
+    const ShadowLayer& layer = *it;
+    if (layer.color.a <= 0.0f) continue;
+    const float sigma = layer.blur * 0.5f;
+
+    if (!layer.inset) {
+      const float shx = hx + layer.spread;
+      const float shy = hy + layer.spread;
+      if (shx <= 0.0f || shy <= 0.0f) continue;
+      const Radii4 sr = spreadRadii(req.radii, layer.spread, shx, shy);
+      const float cxr = ecx + layer.offsetX;
+      const float cyr = ecy + layer.offsetY;
+
+      for (int py = 0; py < rh; ++py) {
+        const float ly = (py + 0.5f) / internalScale;
+        float* row = acc.px.data() + static_cast<size_t>(py) * rw * 4;
+        for (int px = 0; px < rw; ++px) {
+          const float lx = (px + 0.5f) / internalScale;
+          float cov = blurredCoverage(lx - cxr, ly - cyr, shx, shy, sr, sigma, aa,
+                                      req.highQuality);
+          if (cov <= 0.001f) continue;
+          float knock = hardCoverage(lx - ecx, ly - ecy, hx, hy, elementRadii, aa);
+          float a = layer.color.a * cov * (1.0f - knock);
+          if (a <= 0.001f) continue;
+          compositeOver(row + px * 4, layer.color.r * a, layer.color.g * a,
+                        layer.color.b * a, a);
+        }
+      }
+    } else {
+      const float ihx = hx - layer.spread;
+      const float ihy = hy - layer.spread;
+      const Radii4 ir = shrinkRadii(req.radii, layer.spread, ihx, ihy);
+      const float cxr = ecx + layer.offsetX;
+      const float cyr = ecy + layer.offsetY;
+      const bool collapsed = ihx <= 0.0f || ihy <= 0.0f;
+
+      for (int py = 0; py < rh; ++py) {
+        const float ly = (py + 0.5f) / internalScale;
+        float* row = acc.px.data() + static_cast<size_t>(py) * rw * 4;
+        for (int px = 0; px < rw; ++px) {
+          const float lx = (px + 0.5f) / internalScale;
+          float inside = hardCoverage(lx - ecx, ly - ecy, hx, hy, elementRadii, aa);
+          if (inside <= 0.001f) continue;
+          float innerCov =
+              collapsed ? 0.0f
+                        : blurredCoverage(lx - cxr, ly - cyr, ihx, ihy, ir, sigma,
+                                          aa, req.highQuality);
+          float a = layer.color.a * (1.0f - innerCov) * inside;
+          if (a <= 0.001f) continue;
+          compositeOver(row + px * 4, layer.color.r * a, layer.color.g * a,
+                        layer.color.b * a, a);
+        }
+      }
+    }
+  }
+
+  // Resample (identity when rw==outW && rh==outH) and pack to premultiplied
+  // RGBA8888.
+  result.width = outW;
+  result.height = outH;
+  result.pixels.assign(static_cast<size_t>(outW) * outH * 4, 0);
+  for (int oy = 0; oy < outH; ++oy) {
+    float fy = (oy + 0.5f) * rh / outH - 0.5f;
+    int y0 = static_cast<int>(std::floor(fy));
+    float wy = fy - y0;
+    int y0c = std::min(std::max(y0, 0), rh - 1);
+    int y1c = std::min(std::max(y0 + 1, 0), rh - 1);
+    for (int ox = 0; ox < outW; ++ox) {
+      float fx = (ox + 0.5f) * rw / outW - 0.5f;
+      int x0 = static_cast<int>(std::floor(fx));
+      float wx = fx - x0;
+      int x0c = std::min(std::max(x0, 0), rw - 1);
+      int x1c = std::min(std::max(x0 + 1, 0), rw - 1);
+
+      const float* p00 = acc.px.data() + (static_cast<size_t>(y0c) * rw + x0c) * 4;
+      const float* p10 = acc.px.data() + (static_cast<size_t>(y0c) * rw + x1c) * 4;
+      const float* p01 = acc.px.data() + (static_cast<size_t>(y1c) * rw + x0c) * 4;
+      const float* p11 = acc.px.data() + (static_cast<size_t>(y1c) * rw + x1c) * 4;
+
+      uint8_t* out = result.pixels.data() + (static_cast<size_t>(oy) * outW + ox) * 4;
+      for (int c = 0; c < 4; ++c) {
+        float top = p00[c] * (1.0f - wx) + p10[c] * wx;
+        float bot = p01[c] * (1.0f - wx) + p11[c] * wx;
+        float v = top * (1.0f - wy) + bot * wy;
+        out[c] = static_cast<uint8_t>(std::lround(clamp01(v) * 255.0f));
+      }
+    }
+  }
+  return result;
+}
+
+}  // namespace figmashadow

package/cpp/figmashadow/Rasterizer.h

@@ -0,0 +1,21 @@
+#pragma once
+
+#include "Types.h"
+
+namespace figmashadow {
+
+// Renders every layer of a box-shadow into a single premultiplied RGBA8888
+// bitmap sized to (content + bleed) * scale device pixels.
+//
+// The math is identical on every platform: an analytic Gaussian convolution of a
+// rounded rectangle (exact error-function form for the sharp-cornered case, a
+// bounded vertical quadrature for rounded corners). No platform 2D library is
+// involved, so iOS and Android produce the same bytes.
+Bitmap renderShadow(const RenderRequest& req);
+
+// Largest render buffer, in device pixels, before the rasterizer transparently
+// drops to a lower internal resolution (the result is still returned at full
+// size via nearest sizing metadata on the caller side — here we simply cap).
+constexpr double kMaxRenderPixels = 4.0e6;
+
+}  // namespace figmashadow

package/cpp/figmashadow/Types.h

@@ -0,0 +1,66 @@
+#pragma once
+
+#include <cstdint>
+#include <vector>
+
+namespace figmashadow {
+
+// Straight (non-premultiplied) RGBA, components in [0, 1].
+struct Color {
+  float r = 0.0f;
+  float g = 0.0f;
+  float b = 0.0f;
+  float a = 0.0f;
+};
+
+// A single CSS `box-shadow` layer.
+struct ShadowLayer {
+  float offsetX = 0.0f;  // logical px
+  float offsetY = 0.0f;  // logical px
+  float blur = 0.0f;     // CSS blur radius, logical px, always >= 0
+  float spread = 0.0f;   // logical px, may be negative
+  Color color;
+  bool inset = false;
+};
+
+// Per-corner border radii, logical px.
+struct CornerRadii {
+  float topLeft = 0.0f;
+  float topRight = 0.0f;
+  float bottomRight = 0.0f;
+  float bottomLeft = 0.0f;
+};
+
+// Extra space, in logical px, that the shadow bleeds past each edge of the
+// element box. Computed on the JS side and passed in verbatim so the native
+// view size and the rasterized buffer size always agree.
+struct Bleed {
+  float left = 0.0f;
+  float top = 0.0f;
+  float right = 0.0f;
+  float bottom = 0.0f;
+};
+
+// RGBA8888, premultiplied alpha, row-major, tightly packed (stride = width * 4).
+struct Bitmap {
+  int width = 0;
+  int height = 0;
+  std::vector<uint8_t> pixels;
+
+  bool empty() const {
+    return width <= 0 || height <= 0 ||
+           pixels.size() != static_cast<size_t>(width) * height * 4;
+  }
+};
+
+struct RenderRequest {
+  float contentWidth = 0.0f;   // logical px, the element box
+  float contentHeight = 0.0f;  // logical px
+  CornerRadii radii;
+  Bleed bleed;
+  float scale = 1.0f;  // device pixel ratio
+  bool highQuality = false;  // use the slower exact rounded-corner quadrature
+  std::vector<ShadowLayer> layers;
+};
+
+}  // namespace figmashadow

package/docs/ARCHITECTURE.md

@@ -0,0 +1,67 @@
+# Architecture
+
+## The parity guarantee
+
+Every pixel of every shadow is produced by one function — `figmashadow::renderShadow`
+in [`cpp/figmashadow/Rasterizer.cpp`](../cpp/figmashadow/Rasterizer.cpp) — compiled
+once from the same source into both the iOS pod and the Android `.so`. Neither
+platform runs any blur code of its own (`CALayer.shadowRadius`, `elevation`,
+`RenderEffect`, SVG `feGaussianBlur`, …), so there is nothing to diverge.
+
+The math is an analytic Gaussian convolution of a rounded rectangle:
+
+- **Sharp corners** (all radii 0): the 2D integral is separable into a product
+  of error functions — exact and cheap.
+- **Rounded corners** (fast path, default): an SDF/error-function approximation.
+  Visually indistinguishable for shadows; ~1 `erf` per pixel.
+- **Rounded corners** (`highQuality`): a bounded vertical quadrature of the
+  horizontal error-function term. Slower, closer to a reference `box-shadow`.
+
+All three are pure `float`/`double` arithmetic — deterministic under IEEE-754,
+so the same inputs give the same bytes on every device.
+
+## Data flow
+
+```
+<Shadow shadow="0 4px 20px rgba(0,0,0,.15)" borderRadius={16}>
+        │
+        │  src/parseShadow.ts  — JS parses only enough to size the bleed
+        │  src/index.tsx       — reserves the bleed with negative margins
+        ▼
+FigmaShadowView  (Fabric native component, codegen spec in
+                  src/FigmaShadowViewNativeComponent.ts)
+        │  props: shadow string, content size, radii, bleed, pixelRatio
+        ▼
+figmashadow::render(...)          cpp/figmashadow/FigmaShadow.cpp
+        │  parse (Parser.cpp) → rasterize (Rasterizer.cpp) → LRU memoize
+        ▼
+premultiplied RGBA8888 bitmap, (content + bleed) * scale device px
+        │
+   ┌────┴─────────────────────────────┐
+   ▼                                  ▼
+iOS: CGImage → CALayer.contents     Android: Bitmap → Canvas.drawBitmap
+     (ios/FigmaShadowView.mm)             (android/.../FigmaShadowView.kt)
+```
+
+Rasterization runs on a background thread on both platforms; the memo cache
+(keyed on the quantised request) makes every repeat — e.g. every row of a list —
+effectively free.
+
+## Layout model
+
+`<Shadow>` renders an outer `View` (your layout box) wrapping the native view.
+The native view's border-box is `content + 2 × bleed`; equal **negative margins**
+pull its frame back so siblings lay out as if only the children were there, and
+equal **padding** pushes the children into the centre region. The shadow paints
+into the bleed band, which is inside the native view's own bounds — so nothing
+depends on `overflow` except an ancestor that sets `overflow: hidden`, which
+clips the shadow exactly as CSS would.
+
+## What is not done yet
+
+- No runnable example app in this repo (planned).
+- `drop-shadow` that follows arbitrary content alpha (text, transparent PNGs) —
+  only shape shadows derived from `borderRadius`.
+- No animated/interpolatable shadow props.
+- The `backgroundColor` fill uses one corner radius for all four when per-corner
+  radii differ (the shadow itself is always exact).

package/ios/FigmaShadowView.h

@@ -0,0 +1,9 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface FigmaShadowView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/FigmaShadowView.mm

@@ -0,0 +1,207 @@
+#import "FigmaShadowView.h"
+
+#import <react/renderer/components/RNFigmaShadowSpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNFigmaShadowSpec/EventEmitters.h>
+#import <react/renderer/components/RNFigmaShadowSpec/Props.h>
+#import <react/renderer/components/RNFigmaShadowSpec/RCTComponentViewHelpers.h>
+
+#import "Color.h"
+#import "FigmaShadow.h"
+
+using namespace facebook::react;
+
+@interface FigmaShadowView () <RCTFigmaShadowViewViewProtocol>
+@end
+
+@implementation FigmaShadowView {
+  CALayer *_shadowLayer;
+  CALayer *_fillLayer;
+
+  std::string _shadow;
+  std::string _backgroundColor;
+  float _radiusTL;
+  float _radiusTR;
+  float _radiusBR;
+  float _radiusBL;
+  float _bleedLeft;
+  float _bleedTop;
+  float _bleedRight;
+  float _bleedBottom;
+  float _pixelRatio;
+  bool _highQuality;
+  uint64_t _renderGeneration;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<FigmaShadowViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const FigmaShadowViewProps>();
+    _props = defaultProps;
+    _pixelRatio = (float)[UIScreen mainScreen].scale;
+
+    _fillLayer = [CALayer layer];
+    _shadowLayer = [CALayer layer];
+    for (CALayer *layer in @[ _fillLayer, _shadowLayer ]) {
+      layer.actions = @{
+        @"contents" : [NSNull null],
+        @"position" : [NSNull null],
+        @"bounds" : [NSNull null],
+        @"backgroundColor" : [NSNull null],
+      };
+    }
+    // Fill sits under content; shadow (which includes inset darkening) over the
+    // fill but under content.
+    [self.layer insertSublayer:_fillLayer atIndex:0];
+    [self.layer insertSublayer:_shadowLayer atIndex:1];
+  }
+  return self;
+}
+
+#pragma mark - Props
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<FigmaShadowViewProps const>(props);
+
+  _shadow = newProps.shadow;
+  _backgroundColor = newProps.fillColor;
+  _radiusTL = newProps.borderTopLeftRadius;
+  _radiusTR = newProps.borderTopRightRadius;
+  _radiusBR = newProps.borderBottomRightRadius;
+  _radiusBL = newProps.borderBottomLeftRadius;
+  _bleedLeft = newProps.bleedLeft;
+  _bleedTop = newProps.bleedTop;
+  _bleedRight = newProps.bleedRight;
+  _bleedBottom = newProps.bleedBottom;
+  _highQuality = newProps.highQuality;
+  if (newProps.pixelRatio > 0) {
+    _pixelRatio = newProps.pixelRatio;
+  }
+
+  [super updateProps:props oldProps:oldProps];
+  [self setNeedsShadowRender];
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+  [self setNeedsShadowRender];
+}
+
+#pragma mark - Rendering
+
+- (void)setNeedsShadowRender
+{
+  // Coalesce prop + layout updates that arrive in the same commit.
+  [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(renderShadow) object:nil];
+  [self performSelector:@selector(renderShadow) withObject:nil afterDelay:0];
+}
+
++ (dispatch_queue_t)renderQueue
+{
+  static dispatch_queue_t queue;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    queue = dispatch_queue_create("com.figmashadow.raster", DISPATCH_QUEUE_SERIAL);
+  });
+  return queue;
+}
+
+- (void)renderShadow
+{
+  const CGRect bounds = self.bounds;
+  const CGFloat viewW = CGRectGetWidth(bounds);
+  const CGFloat viewH = CGRectGetHeight(bounds);
+  if (viewW <= 0 || viewH <= 0) {
+    return;
+  }
+
+  const float contentW = (float)viewW - _bleedLeft - _bleedRight;
+  const float contentH = (float)viewH - _bleedTop - _bleedBottom;
+  if (contentW <= 0 || contentH <= 0) {
+    _shadowLayer.contents = nil;
+    _fillLayer.backgroundColor = nil;
+    return;
+  }
+
+  // --- background fill (cheap; stays on the main thread) ---
+  const CGRect contentRect = CGRectMake(_bleedLeft, _bleedTop, contentW, contentH);
+  figmashadow::Color fill;
+  const bool hasFill =
+      !_backgroundColor.empty() && figmashadow::parseColor(_backgroundColor, fill);
+  _fillLayer.frame = contentRect;
+  if (hasFill && fill.a > 0) {
+    _fillLayer.backgroundColor =
+        [UIColor colorWithRed:fill.r green:fill.g blue:fill.b alpha:fill.a].CGColor;
+    // Uniform-radius fast path; differing per-corner radii degrade to the
+    // top-left value for the fill only (the shadow itself is always exact).
+    _fillLayer.cornerRadius = _radiusTL;
+  } else {
+    _fillLayer.backgroundColor = nil;
+  }
+
+  // --- shadow raster (off the main thread; the cache makes repeats instant) ---
+  const uint64_t generation = ++_renderGeneration;
+  const std::string shadow = _shadow;
+  const float radiusTL = _radiusTL, radiusTR = _radiusTR, radiusBR = _radiusBR, radiusBL = _radiusBL;
+  const float bleedLeft = _bleedLeft, bleedTop = _bleedTop, bleedRight = _bleedRight, bleedBottom = _bleedBottom;
+  const float pixelRatio = _pixelRatio;
+  const bool highQuality = _highQuality;
+
+  __weak FigmaShadowView *weakSelf = self;
+  dispatch_async([FigmaShadowView renderQueue], ^{
+    figmashadow::Bitmap bmp = figmashadow::render(
+        contentW, contentH, radiusTL, radiusTR, radiusBR, radiusBL, shadow,
+        bleedLeft, bleedTop, bleedRight, bleedBottom, pixelRatio, highQuality);
+
+    CGImageRef image = bmp.empty() ? nullptr : [FigmaShadowView makeImageFromBitmap:bmp];
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+      FigmaShadowView *strongSelf = weakSelf;
+      if (strongSelf == nil || generation != strongSelf->_renderGeneration) {
+        if (image) CGImageRelease(image);
+        return;
+      }
+      strongSelf->_shadowLayer.frame = strongSelf.bounds;
+      strongSelf->_shadowLayer.contentsScale = 1.0;
+      strongSelf->_shadowLayer.contentsGravity = kCAGravityResize;
+      strongSelf->_shadowLayer.contents = (__bridge_transfer id)image;
+    });
+  });
+}
+
++ (CGImageRef)makeImageFromBitmap:(const figmashadow::Bitmap &)bmp CF_RETURNS_RETAINED
+{
+  const size_t bytesPerRow = (size_t)bmp.width * 4;
+  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+  CGContextRef ctx = CGBitmapContextCreate(
+      (void *)bmp.pixels.data(), bmp.width, bmp.height, 8, bytesPerRow, colorSpace,
+      kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
+  CGImageRef image = CGBitmapContextCreateImage(ctx);
+  CGContextRelease(ctx);
+  CGColorSpaceRelease(colorSpace);
+  return image;
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  _shadowLayer.contents = nil;
+  _fillLayer.contents = nil;
+  _fillLayer.backgroundColor = nil;
+  _shadow.clear();
+  _backgroundColor.clear();
+}
+
+@end
+
+Class<RCTComponentViewProtocol> FigmaShadowViewCls(void)
+{
+  return FigmaShadowView.class;
+}

package/lib/commonjs/FigmaShadowViewNativeComponent.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = (0, _codegenNativeComponent.default)('FigmaShadowView');
+//# sourceMappingURL=FigmaShadowViewNativeComponent.js.map

package/lib/commonjs/FigmaShadowViewNativeComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","default","_default","exports","codegenNativeComponent"],"sourceRoot":"../../src","sources":["FigmaShadowViewNativeComponent.ts"],"mappings":";;;;;;AAEA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GA2B9E,IAAAG,+BAAsB,EAAc,iBAAiB,CAAC","ignoreList":[]}