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

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "react-native-figma-shadow",
+  "version": "0.1.0-alpha.1",
+  "description": "Paste a CSS box-shadow from Figma and get a pixel-identical shadow on iOS and Android. New Architecture, zero peer dependencies.",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./src/index.tsx",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js",
+      "default": "./lib/commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "docs",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/.cxx",
+    "!cpp/test",
+    "!**/__tests__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "prepublishOnly": "npm run typecheck && npm test",
+    "cpp-test": "c++ -std=c++17 -O2 -Wall -Wextra -Icpp/figmashadow cpp/test/test_main.cpp cpp/figmashadow/*.cpp -o /tmp/fstest && /tmp/fstest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "fabric",
+    "new-architecture",
+    "shadow",
+    "box-shadow",
+    "elevation",
+    "figma",
+    "css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RaoMK/react-native-figma-shadow.git"
+  },
+  "author": "RaoMK <mowglijuddi@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/RaoMK/react-native-figma-shadow/issues"
+  },
+  "homepage": "https://github.com/RaoMK/react-native-figma-shadow#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "tag": "alpha"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "0.76.0",
+    "@react-native/eslint-config": "0.76.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.44",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "react": "18.3.1",
+    "react-native": "0.76.0",
+    "react-native-builder-bob": "^0.30.2",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.76.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "RNFigmaShadowSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.figmashadow"
+    }
+  }
+}

package/react-native-figma-shadow.podspec

@@ -0,0 +1,25 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-figma-shadow"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "13.4" }
+  s.source       = { :git => "https://github.com/RaoMK/react-native-figma-shadow.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,cpp}", "cpp/figmashadow/**/*.{h,cpp}"
+  s.private_header_files = "cpp/figmashadow/**/*.h"
+
+  s.pod_target_xcconfig = {
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/cpp/figmashadow\" \"$(PODS_TARGET_SRCROOT)/cpp\""
+  }
+
+  install_modules_dependencies(s)
+end

package/react-native.config.js

@@ -0,0 +1,19 @@
+/**
+ * The shadow raster lives in a standalone `.so` that this package builds itself
+ * (see android/build.gradle + android/CMakeLists.txt) and loads with
+ * `System.loadLibrary`, so we deliberately do NOT set `cmakeListsPath` here —
+ * that would make the host app try to build the same sources a second time.
+ *
+ * The Fabric component descriptor is generated from `codegenConfig` in
+ * package.json by the host app's build.
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        componentDescriptors: ['FigmaShadowViewComponentDescriptor'],
+      },
+      ios: {},
+    },
+  },
+};

package/src/FigmaShadowViewNativeComponent.ts

@@ -0,0 +1,30 @@
+import type { ViewProps } from 'react-native';
+import type { Float, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  /** A CSS `box-shadow` value, exactly as copied from Figma / a stylesheet. */
+  shadow?: string;
+
+  /** Optional fill painted inside the content box, below inset shadows. */
+  fillColor?: string;
+
+  borderTopLeftRadius?: WithDefault<Float, 0>;
+  borderTopRightRadius?: WithDefault<Float, 0>;
+  borderBottomRightRadius?: WithDefault<Float, 0>;
+  borderBottomLeftRadius?: WithDefault<Float, 0>;
+
+  /** Bleed insets (device-independent px) computed on the JS side. */
+  bleedLeft?: WithDefault<Float, 0>;
+  bleedTop?: WithDefault<Float, 0>;
+  bleedRight?: WithDefault<Float, 0>;
+  bleedBottom?: WithDefault<Float, 0>;
+
+  /** `PixelRatio.get()` — passed so the raster matches the screen density. */
+  pixelRatio?: WithDefault<Float, 1>;
+
+  /** Use the slower, exact rounded-corner quadrature. */
+  highQuality?: WithDefault<boolean, false>;
+}
+
+export default codegenNativeComponent<NativeProps>('FigmaShadowView');

package/src/index.tsx

@@ -0,0 +1,134 @@
+import React, { useMemo } from 'react';
+import {
+  PixelRatio,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import FigmaShadowView from './FigmaShadowViewNativeComponent';
+import { computeBleed, parseBoxShadow, type EdgeInsets } from './parseShadow';
+
+export type { EdgeInsets, ParsedShadowLayer } from './parseShadow';
+export { parseBoxShadow, computeBleed } from './parseShadow';
+
+export interface ShadowProps extends Omit<ViewProps, 'style'> {
+  /**
+   * A CSS `box-shadow` value — the exact string Figma's "Copy as CSS" produces,
+   * or what you already use on the web. Supports multiple comma-separated
+   * shadows, `inset`, spread, and any CSS color. Renders identically on iOS and
+   * Android.
+   */
+  shadow?: string;
+
+  /** Uniform corner radius for the shadow shape. Match your child's radius. */
+  borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomRightRadius?: number;
+  borderBottomLeftRadius?: number;
+
+  /**
+   * Fill painted inside the content box, below any inset shadow and below the
+   * children. Use this (instead of a background on the child) when you want an
+   * inset shadow to sit above the fill, like CSS.
+   */
+  backgroundColor?: string;
+
+  /** Opt into the slower, exact rounded-corner convolution. */
+  highQuality?: boolean;
+
+  /** Applied to the outer layout box. */
+  style?: StyleProp<ViewStyle>;
+
+  children?: React.ReactNode;
+}
+
+function resolveRadii(props: ShadowProps) {
+  const base = props.borderRadius ?? 0;
+  return {
+    tl: props.borderTopLeftRadius ?? base,
+    tr: props.borderTopRightRadius ?? base,
+    br: props.borderBottomRightRadius ?? base,
+    bl: props.borderBottomLeftRadius ?? base,
+  };
+}
+
+/**
+ * Wraps its children and paints a pixel-consistent CSS-style shadow behind them
+ * on both platforms.
+ *
+ * Layout is neutral: the shadow bleeds into space the component reserves with
+ * negative margins, so siblings are laid out as if only the children were there.
+ */
+export function Shadow(props: ShadowProps) {
+  const {
+    shadow = '',
+    backgroundColor,
+    highQuality = false,
+    style,
+    children,
+    // Pulled out so they are not spread onto the native view (which only takes
+    // per-corner radii); `backgroundColor` is forwarded below as `fillColor` to
+    // avoid colliding with RN's built-in view prop.
+    borderRadius: _borderRadius,
+    borderTopLeftRadius: _btl,
+    borderTopRightRadius: _btr,
+    borderBottomRightRadius: _bbr,
+    borderBottomLeftRadius: _bbl,
+    ...rest
+  } = props;
+
+  const layers = useMemo(() => parseBoxShadow(shadow), [shadow]);
+  const bleed: EdgeInsets = useMemo(() => computeBleed(layers), [layers]);
+  const radii = resolveRadii(props);
+
+  const geometry: ViewStyle = {
+    marginLeft: -bleed.left,
+    marginTop: -bleed.top,
+    marginRight: -bleed.right,
+    marginBottom: -bleed.bottom,
+    paddingLeft: bleed.left,
+    paddingTop: bleed.top,
+    paddingRight: bleed.right,
+    paddingBottom: bleed.bottom,
+  };
+
+  return (
+    <View style={[styles.outer, style]}>
+      <FigmaShadowView
+        {...rest}
+        shadow={shadow}
+        fillColor={backgroundColor}
+        highQuality={highQuality}
+        borderTopLeftRadius={radii.tl}
+        borderTopRightRadius={radii.tr}
+        borderBottomRightRadius={radii.br}
+        borderBottomLeftRadius={radii.bl}
+        bleedLeft={bleed.left}
+        bleedTop={bleed.top}
+        bleedRight={bleed.right}
+        bleedBottom={bleed.bottom}
+        pixelRatio={PixelRatio.get()}
+        style={[styles.native, geometry]}
+      >
+        {children}
+      </FigmaShadowView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    // The shadow bleeds past this layout box; an ancestor with `overflow:
+    // hidden` will clip it, exactly as it would in CSS.
+    overflow: 'visible',
+  },
+  native: {
+    overflow: 'visible',
+  },
+});
+
+export default Shadow;

package/src/parseShadow.ts

@@ -0,0 +1,134 @@
+/**
+ * A minimal `box-shadow` parser used on the JS side purely to compute how far
+ * the shadow bleeds past the element box. The authoritative parse (colors,
+ * rendering) happens in the shared C++ core; this only needs geometry.
+ */
+
+export interface ParsedShadowLayer {
+  offsetX: number;
+  offsetY: number;
+  blur: number;
+  spread: number;
+  inset: boolean;
+}
+
+export interface EdgeInsets {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+// A Gaussian with sigma = blur / 2; 3 sigma (= 1.5 * blur) captures 99.7% of it.
+const BLUR_EXTENT_FACTOR = 1.5;
+
+function splitTopLevel(input: string, delimiter: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of input) {
+    if (ch === '(') {depth++;}
+    else if (ch === ')') {depth = Math.max(0, depth - 1);}
+
+    if (ch === delimiter && depth === 0) {
+      out.push(current);
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  out.push(current);
+  return out;
+}
+
+function tokenize(layer: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of layer) {
+    if (ch === '(') {depth++;}
+    else if (ch === ')') {depth = Math.max(0, depth - 1);}
+
+    if (/\s/.test(ch) && depth === 0) {
+      if (current) {
+        out.push(current);
+        current = '';
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) {out.push(current);}
+  return out;
+}
+
+function parseLength(token: string): number | null {
+  const match = /^(-?\d*\.?\d+)(px|dp|dip|pt)?$/i.exec(token.trim());
+  if (!match) {return null;}
+  return parseFloat(match[1]);
+}
+
+export function parseBoxShadow(input: string | undefined | null): ParsedShadowLayer[] {
+  if (!input) {return [];}
+  let s = input.trim();
+
+  const colon = s.indexOf(':');
+  if (colon !== -1) {
+    const head = s.slice(0, colon).trim().toLowerCase();
+    if (head === 'box-shadow' || head === 'boxshadow') {s = s.slice(colon + 1).trim();}
+  }
+  if (s.endsWith(';')) {s = s.slice(0, -1).trim();}
+  if (!s || s.toLowerCase() === 'none') {return [];}
+
+  const layers: ParsedShadowLayer[] = [];
+  for (const part of splitTopLevel(s, ',')) {
+    const trimmed = part.trim();
+    if (!trimmed) {continue;}
+
+    let inset = false;
+    const lengths: number[] = [];
+    for (const token of tokenize(trimmed)) {
+      if (token.toLowerCase() === 'inset') {
+        inset = true;
+        continue;
+      }
+      const len = parseLength(token);
+      if (len !== null) {lengths.push(len);}
+      // anything else (a color) is irrelevant to bleed
+    }
+    if (lengths.length < 2) {continue;}
+
+    layers.push({
+      offsetX: lengths[0],
+      offsetY: lengths[1],
+      blur: Math.max(0, lengths[2] ?? 0),
+      spread: lengths[3] ?? 0,
+      inset,
+    });
+  }
+  return layers;
+}
+
+export function computeBleed(layers: ParsedShadowLayer[]): EdgeInsets {
+  const bleed: EdgeInsets = { left: 0, top: 0, right: 0, bottom: 0 };
+
+  for (const layer of layers) {
+    if (layer.inset) {continue;}
+    const extent = layer.blur * BLUR_EXTENT_FACTOR + Math.max(0, layer.spread);
+    bleed.right = Math.max(bleed.right, extent + Math.max(0, layer.offsetX));
+    bleed.left = Math.max(bleed.left, extent + Math.max(0, -layer.offsetX));
+    bleed.bottom = Math.max(bleed.bottom, extent + Math.max(0, layer.offsetY));
+    bleed.top = Math.max(bleed.top, extent + Math.max(0, -layer.offsetY));
+  }
+
+  return {
+    left: Math.ceil(bleed.left),
+    top: Math.ceil(bleed.top),
+    right: Math.ceil(bleed.right),
+    bottom: Math.ceil(bleed.bottom),
+  };
+}
+
+export function hasVisibleShadow(layers: ParsedShadowLayer[]): boolean {
+  return layers.length > 0;
+}