@pompadour/react-native-skia 1.4.0

package/src/dom/types/Shaders.ts

@@ -0,0 +1,86 @@
+import type {
+  Color,
+  FilterMode,
+  MipmapMode,
+  SkImage,
+  SkRect,
+  SkRuntimeEffect,
+  TileMode,
+  Uniforms,
+  Vector,
+} from "../../skia/types";
+
+import type {
+  SkEnum,
+  TransformProps,
+  ChildrenProps,
+  RectCtor,
+  Fit,
+} from "./Common";
+
+export interface ShaderProps extends TransformProps, ChildrenProps {
+  source: SkRuntimeEffect;
+  uniforms: Uniforms;
+}
+
+export interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
+  tx: SkEnum<typeof TileMode>;
+  ty: SkEnum<typeof TileMode>;
+  fm: SkEnum<typeof FilterMode>;
+  mm: SkEnum<typeof MipmapMode>;
+  fit: Fit;
+  rect?: SkRect;
+  image: SkImage | null;
+}
+
+export interface ColorProps {
+  color: Color;
+}
+
+export interface TurbulenceProps {
+  freqX: number;
+  freqY: number;
+  octaves: number;
+  seed: number;
+  tileWidth: number;
+  tileHeight: number;
+}
+
+export interface FractalNoiseProps {
+  freqX: number;
+  freqY: number;
+  octaves: number;
+  seed: number;
+  tileWidth: number;
+  tileHeight: number;
+}
+
+export interface GradientProps extends TransformProps {
+  colors: Color[];
+  positions?: number[];
+  mode?: SkEnum<typeof TileMode>;
+  flags?: number;
+}
+
+export interface LinearGradientProps extends GradientProps {
+  start: Vector;
+  end: Vector;
+}
+
+export interface RadialGradientProps extends GradientProps {
+  c: Vector;
+  r: number;
+}
+
+export interface SweepGradientProps extends GradientProps {
+  c: Vector;
+  start?: number;
+  end?: number;
+}
+
+export interface TwoPointConicalGradientProps extends GradientProps {
+  start: Vector;
+  startR: number;
+  end: Vector;
+  endR: number;
+}

package/src/dom/types/SkDOM.ts

@@ -0,0 +1,184 @@
+import type { ChildrenProps, GroupProps, PaintProps } from "./Common";
+import type {
+  BlendImageFilterProps,
+  BlurImageFilterProps,
+  DropShadowImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+  DisplacementMapImageFilterProps,
+  MorphologyImageFilterProps,
+  BlendProps,
+} from "./ImageFilters";
+import type { DeclarationNode, RenderNode } from "./Node";
+import type {
+  BlendColorFilterProps,
+  MatrixColorFilterProps,
+  LerpColorFilterProps,
+} from "./ColorFilters";
+import type {
+  ImageProps,
+  CircleProps,
+  PathProps,
+  LineProps,
+  OvalProps,
+  PatchProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  VerticesProps,
+  TextProps,
+  DiffRectProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  PictureProps,
+  ImageSVGProps,
+  DrawingNodeProps,
+  BoxProps,
+  BoxShadowProps,
+  AtlasProps,
+} from "./Drawings";
+import type { BlurMaskFilterProps } from "./MaskFilters";
+import type {
+  FractalNoiseProps,
+  SweepGradientProps,
+  ImageShaderProps,
+  LinearGradientProps,
+  ShaderProps,
+  TurbulenceProps,
+  TwoPointConicalGradientProps,
+  RadialGradientProps,
+  ColorProps,
+} from "./Shaders";
+import type {
+  CornerPathEffectProps,
+  DashPathEffectProps,
+  DiscretePathEffectProps,
+  Line2DPathEffectProps,
+  Path1DPathEffectProps,
+  Path2DPathEffectProps,
+} from "./PathEffects";
+import type { ParagraphProps } from "./Paragraph";
+
+type ImageFilterNode<P> = DeclarationNode<P>;
+
+type PathEffectNode<P> = DeclarationNode<P>;
+type NullablePathEffectNode<P> = DeclarationNode<P>;
+
+type DrawingNode<P extends GroupProps> = RenderNode<P>;
+
+export interface SkDOM {
+  Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;
+  Group(props?: GroupProps): RenderNode<GroupProps>;
+  Paint(props: PaintProps): DeclarationNode<PaintProps>;
+
+  // Drawings
+  Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;
+  Image(props: ImageProps): DrawingNode<ImageProps>;
+  Circle(props: CircleProps): DrawingNode<CircleProps>;
+  Path(props: PathProps): DrawingNode<PathProps>;
+  Line(props: LineProps): DrawingNode<LineProps>;
+  Oval(props: OvalProps): DrawingNode<OvalProps>;
+  Patch(props: PatchProps): DrawingNode<PatchProps>;
+  Points(props: PointsProps): DrawingNode<PointsProps>;
+  Rect(props: RectProps): DrawingNode<RectProps>;
+  RRect(props: RoundedRectProps): DrawingNode<RoundedRectProps>;
+  Vertices(props: VerticesProps): DrawingNode<VerticesProps>;
+  Text(props: TextProps): DrawingNode<TextProps>;
+  TextPath(props: TextPathProps): DrawingNode<TextPathProps>;
+  TextBlob(props: TextBlobProps): DrawingNode<TextBlobProps>;
+  Glyphs(props: GlyphsProps): DrawingNode<GlyphsProps>;
+  DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;
+  Picture(props: PictureProps): DrawingNode<PictureProps>;
+  ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;
+  Atlas(props: AtlasProps): DrawingNode<AtlasProps>;
+
+  // BlurMaskFilters
+  BlurMaskFilter(
+    props: BlurMaskFilterProps
+  ): DeclarationNode<BlurMaskFilterProps>;
+
+  // ImageFilters
+  BlendImageFilter(
+    props: BlendImageFilterProps
+  ): ImageFilterNode<BlendImageFilterProps>;
+  BlurImageFilter(
+    props: BlurImageFilterProps
+  ): ImageFilterNode<BlurImageFilterProps>;
+  OffsetImageFilter(
+    props: OffsetImageFilterProps
+  ): ImageFilterNode<OffsetImageFilterProps>;
+  DropShadowImageFilter(
+    props: DropShadowImageFilterProps
+  ): ImageFilterNode<DropShadowImageFilterProps>;
+  MorphologyImageFilter(
+    props: MorphologyImageFilterProps
+  ): ImageFilterNode<MorphologyImageFilterProps>;
+  DisplacementMapImageFilter(
+    props: DisplacementMapImageFilterProps
+  ): ImageFilterNode<DisplacementMapImageFilterProps>;
+  RuntimeShaderImageFilter(
+    props: RuntimeShaderImageFilterProps
+  ): ImageFilterNode<RuntimeShaderImageFilterProps>;
+
+  // ColorFilters
+  MatrixColorFilter(
+    props: MatrixColorFilterProps
+  ): DeclarationNode<MatrixColorFilterProps>;
+  BlendColorFilter(
+    props: BlendColorFilterProps
+  ): DeclarationNode<BlendColorFilterProps>;
+  LumaColorFilter(): DeclarationNode<null>;
+  LinearToSRGBGammaColorFilter(): DeclarationNode<null>;
+  SRGBToLinearGammaColorFilter(): DeclarationNode<null>;
+  LerpColorFilter(
+    props: LerpColorFilterProps
+  ): DeclarationNode<LerpColorFilterProps>;
+
+  // Shaders
+  Shader(props: ShaderProps): DeclarationNode<ShaderProps>;
+  ImageShader(props: ImageShaderProps): DeclarationNode<ImageShaderProps>;
+  ColorShader(props: ColorProps): DeclarationNode<ColorProps>;
+  Turbulence(props: TurbulenceProps): DeclarationNode<TurbulenceProps>;
+  FractalNoise(props: FractalNoiseProps): DeclarationNode<FractalNoiseProps>;
+  LinearGradient(
+    props: LinearGradientProps
+  ): DeclarationNode<LinearGradientProps>;
+  RadialGradient(
+    props: RadialGradientProps
+  ): DeclarationNode<RadialGradientProps>;
+  SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps>;
+  TwoPointConicalGradient(
+    props: TwoPointConicalGradientProps
+  ): DeclarationNode<TwoPointConicalGradientProps>;
+
+  // Path Effects
+  CornerPathEffect(
+    props: CornerPathEffectProps
+  ): NullablePathEffectNode<CornerPathEffectProps>;
+  DiscretePathEffect(
+    props: DiscretePathEffectProps
+  ): PathEffectNode<DiscretePathEffectProps>;
+  DashPathEffect(
+    props: DashPathEffectProps
+  ): PathEffectNode<DashPathEffectProps>;
+  Path1DPathEffect(
+    props: Path1DPathEffectProps
+  ): NullablePathEffectNode<Path1DPathEffectProps>;
+  Path2DPathEffect(
+    props: Path2DPathEffectProps
+  ): NullablePathEffectNode<Path2DPathEffectProps>;
+  SumPathEffect(): NullablePathEffectNode<null>;
+  Line2DPathEffect(
+    props: Line2DPathEffectProps
+  ): NullablePathEffectNode<Line2DPathEffectProps>;
+
+  // Mixed
+  Blend(props: BlendProps): DeclarationNode<BlendProps>;
+  BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;
+  Box(props: BoxProps): RenderNode<BoxProps>;
+  BoxShadow(props: BoxShadowProps): DeclarationNode<BoxShadowProps>;
+
+  // Paragraph
+  Paragraph(props: ParagraphProps): RenderNode<ParagraphProps>;
+}

package/src/dom/types/index.ts

@@ -0,0 +1,13 @@
+export * from "./DrawingContext";
+export * from "./DeclarationContext";
+export * from "./Node";
+export * from "./NodeType";
+export * from "./SkDOM";
+export * from "./Common";
+export * from "./Drawings";
+export * from "./ImageFilters";
+export * from "./ColorFilters";
+export * from "./MaskFilters";
+export * from "./PathEffects";
+export * from "./Shaders";
+export * from "./Paragraph";

package/src/external/ModuleProxy.ts

@@ -0,0 +1,30 @@
+// https://github.com/mrousavy/react-native-vision-camera/blob/main/package/src/dependencies/ModuleProxy.ts
+type ImportType = ReturnType<typeof require>;
+
+/**
+ * Create a lazily-imported module proxy.
+ * This is useful for lazily requiring optional dependencies.
+ */
+export const createModuleProxy = <TModule>(
+  getModule: () => ImportType
+): TModule => {
+  const holder: { module: TModule | undefined } = { module: undefined };
+
+  const proxy = new Proxy(holder, {
+    get: (target, property) => {
+      if (target.module == null) {
+        // lazy initialize module via require()
+        // caller needs to make sure the require() call is wrapped in a try/catch
+        target.module = getModule() as TModule;
+      }
+      return target.module[property as keyof typeof holder.module];
+    },
+  });
+  return proxy as unknown as TModule;
+};
+
+export class OptionalDependencyNotInstalledError extends Error {
+  constructor(name: string) {
+    super(`${name} is not installed!`);
+  }
+}

package/src/external/index.ts

@@ -0,0 +1 @@
+export * from "./reanimated";

package/src/external/reanimated/ReanimatedProxy.ts

@@ -0,0 +1,18 @@
+import type * as ReanimatedT from "react-native-reanimated";
+
+import {
+  OptionalDependencyNotInstalledError,
+  createModuleProxy,
+} from "../ModuleProxy";
+type TReanimated = typeof ReanimatedT;
+
+const Reanimated = createModuleProxy<TReanimated>(() => {
+  try {
+    return require("react-native-reanimated");
+  } catch (e) {
+    throw new OptionalDependencyNotInstalledError("react-native-reanimated");
+  }
+});
+
+// eslint-disable-next-line import/no-default-export
+export default Reanimated;

package/src/external/reanimated/buffers.ts

@@ -0,0 +1,58 @@
+import { useEffect, useMemo } from "react";
+import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
+
+import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
+import { Skia } from "../../skia";
+
+import { notifyChange } from "./interpolators";
+import Rea from "./ReanimatedProxy";
+
+type Modifier<T> = (input: T, index: number) => void;
+
+const useBufferValue = <T>(size: number, bufferInitializer: () => T) => {
+  return useMemo(
+    () => Rea.makeMutable(new Array(size).fill(0).map(bufferInitializer)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [size]
+  );
+};
+
+const useBuffer = <T>(
+  size: number,
+  bufferInitializer: () => T,
+  modifier: Modifier<T>
+) => {
+  const values = useBufferValue(size, bufferInitializer);
+  const mod = modifier as WorkletFunction;
+  const deps = [size, ...Object.values(mod.__closure ?? {})];
+  const mapperId = Rea.startMapper(() => {
+    "worklet";
+    values.value.forEach((val, index) => {
+      modifier(val, index);
+    });
+    notifyChange(values);
+  }, deps);
+
+  useEffect(() => {
+    return () => {
+      Rea.stopMapper(mapperId);
+    };
+  }, [mapperId]);
+
+  return values;
+};
+
+export const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>
+  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
+
+// Usage for RSXform Buffer
+export const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>
+  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
+
+// Usage for Point Buffer
+export const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>
+  useBuffer(size, () => Skia.Point(0, 0), modifier);
+
+// Usage for Color Buffer
+export const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>
+  useBuffer(size, () => Skia.Color("black"), modifier);

package/src/external/reanimated/index.ts

@@ -0,0 +1,7 @@
+export * from "./useAnimatedImageValue";
+export * from "./useDerivedValueOnJS";
+export * from "./renderHelpers";
+export * from "./interpolators";
+export * from "./textures";
+export * from "./buffers";
+export * from "./useVideo";

package/src/external/reanimated/interpolators.ts

@@ -0,0 +1,124 @@
+import type {
+  ExtrapolationType,
+  FrameInfo,
+  SharedValue,
+} from "react-native-reanimated";
+import { useCallback, useMemo } from "react";
+
+import type { SkPath, SkPoint } from "../../skia/types";
+import { interpolatePaths, interpolateVector } from "../../animation";
+import { Skia } from "../../skia";
+import { isOnMainThread } from "../../renderer/Offscreen";
+
+import Rea from "./ReanimatedProxy";
+
+export const notifyChange = (value: SharedValue<unknown>) => {
+  "worklet";
+  if (isOnMainThread()) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (value as any)._value = value.value;
+  }
+};
+
+export const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {
+  const pathInit = useMemo(() => Skia.Path.Make(), []);
+  const path = Rea.useSharedValue(pathInit);
+  Rea.useDerivedValue(() => {
+    path.value.reset();
+    if (init !== undefined) {
+      path.value.addPath(init);
+    }
+    cb(path.value);
+    notifyChange(path);
+  });
+  return path;
+};
+
+export const useClock = () => {
+  const clock = Rea.useSharedValue(0);
+  const callback = useCallback(
+    (info: FrameInfo) => {
+      "worklet";
+      clock.value = info.timeSinceFirstFrame;
+    },
+    [clock]
+  );
+  Rea.useFrameCallback(callback);
+  return clock;
+};
+
+/**
+ * @worklet
+ */
+type Interpolator<T> = (
+  value: number,
+  input: number[],
+  output: T[],
+  options: ExtrapolationType,
+  result: T
+) => T;
+
+const useInterpolator = <T>(
+  factory: () => T,
+  value: SharedValue<number>,
+  interpolator: Interpolator<T>,
+  input: number[],
+  output: T[],
+  options?: ExtrapolationType
+) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = Rea.useSharedValue(init);
+  Rea.useAnimatedReaction(
+    () => value.value,
+    (val) => {
+      result.value = interpolator(val, input, output, options, result.value);
+      notifyChange(result);
+    },
+    [input, output, options]
+  );
+  return result;
+};
+
+export const usePathInterpolation = (
+  value: SharedValue<number>,
+  input: number[],
+  outputRange: SkPath[],
+  options?: ExtrapolationType
+) => {
+  // Check if all paths in outputRange are interpolable
+  const allPathsInterpolable = outputRange
+    .slice(1)
+    .every((path) => outputRange[0].isInterpolatable(path));
+  if (!allPathsInterpolable) {
+    // Handle the case where not all paths are interpolable
+    // For example, throw an error or return early
+    throw new Error(
+      `Not all paths in the output range are interpolable.
+See: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`
+    );
+  }
+  return useInterpolator(
+    () => Skia.Path.Make(),
+    value,
+    interpolatePaths,
+    input,
+    outputRange,
+    options
+  );
+};
+
+export const useVectorInterpolation = (
+  value: SharedValue<number>,
+  input: number[],
+  outputRange: SkPoint[],
+  options?: ExtrapolationType
+) =>
+  useInterpolator(
+    () => Skia.Point(0, 0),
+    value,
+    interpolateVector,
+    input,
+    outputRange,
+    options
+  );

package/src/external/reanimated/renderHelpers.ts

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Container } from "../../renderer/Container";
+import type { AnimatedProps } from "../../renderer/processors";
+import type { Node } from "../../dom/types";
+
+import Rea from "./ReanimatedProxy";
+
+let HAS_REANIMATED = false;
+let HAS_REANIMATED_3 = false;
+try {
+  require("react-native-reanimated");
+  HAS_REANIMATED = true;
+  const reanimatedVersion =
+    require("react-native-reanimated/package.json").version;
+  if (
+    reanimatedVersion &&
+    (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))
+  ) {
+    HAS_REANIMATED_3 = true;
+  }
+} catch (e) {
+  HAS_REANIMATED = false;
+}
+
+const _bindings = new WeakMap<Node<unknown>, unknown>();
+
+export const unbindReanimatedNode = (node: Node<unknown>) => {
+  if (!HAS_REANIMATED) {
+    return;
+  }
+  const previousMapperId = _bindings.get(node);
+  if (previousMapperId !== undefined) {
+    Rea.stopMapper(previousMapperId as number);
+  }
+};
+
+export function extractReanimatedProps(props: AnimatedProps<any>) {
+  if (!HAS_REANIMATED) {
+    return [props, {}];
+  }
+  const reanimatedProps = {} as AnimatedProps<any>;
+  const otherProps = {} as AnimatedProps<any>;
+  for (const propName in props) {
+    if (propName === "children") {
+      continue;
+    }
+    const propValue = props[propName];
+    if (Rea.isSharedValue(propValue)) {
+      reanimatedProps[propName] = propValue;
+      otherProps[propName] = propValue.value;
+    } else {
+      otherProps[propName] = propValue;
+    }
+  }
+  return [otherProps, reanimatedProps];
+}
+
+function bindReanimatedProps2(
+  container: Container,
+  node: Node<any>,
+  reanimatedProps: AnimatedProps<any>
+) {
+  const sharedValues = Object.values(reanimatedProps);
+  const previousMapperId = _bindings.get(node);
+  if (previousMapperId !== undefined) {
+    Rea.stopMapper(previousMapperId as number);
+  }
+  if (sharedValues.length > 0) {
+    const viewId = container.getNativeId();
+    const { SkiaViewApi } = global;
+    const updateProps = () => {
+      for (const propName in reanimatedProps) {
+        node && node.setProp(propName, reanimatedProps[propName].value);
+      }
+      // On React Native we use the SkiaViewApi to redraw because it can
+      // run on the worklet thread (container.redraw can't)
+      // if SkiaViewApi is undefined, we are on web and container.redraw()
+      // can safely be invoked
+      if (SkiaViewApi) {
+        SkiaViewApi.requestRedraw(viewId);
+      } else {
+        container.redraw();
+      }
+    };
+    const mapperId = Rea.startMapper(() => {
+      "worklet";
+      Rea.runOnJS(updateProps)();
+    }, sharedValues);
+    _bindings.set(node, mapperId);
+  }
+}
+
+export function bindReanimatedProps(
+  container: Container,
+  node: Node<any>,
+  reanimatedProps: AnimatedProps<any>
+) {
+  if (HAS_REANIMATED && !HAS_REANIMATED_3) {
+    return bindReanimatedProps2(container, node, reanimatedProps);
+  }
+  if (!HAS_REANIMATED) {
+    return;
+  }
+  const sharedValues = Object.values(reanimatedProps);
+  const previousMapperId = _bindings.get(node);
+  if (previousMapperId !== undefined) {
+    Rea.stopMapper(previousMapperId as number);
+  }
+  if (sharedValues.length > 0) {
+    const viewId = container.getNativeId();
+    const { SkiaViewApi } = global;
+    const mapperId = Rea.startMapper(() => {
+      "worklet";
+      if (node) {
+        for (const propName in reanimatedProps) {
+          node.setProp(propName, reanimatedProps[propName].value);
+        }
+      }
+      // On React Native we use the SkiaViewApi to redraw because it can
+      // run on the worklet thread (container.redraw can't)
+      // if SkiaViewApi is undefined, we are on web and container.redraw()
+      // can safely be invoked
+      if (SkiaViewApi) {
+        SkiaViewApi.requestRedraw(viewId);
+      } else {
+        container.redraw();
+      }
+    }, sharedValues);
+    _bindings.set(node, mapperId);
+  }
+}