@shopify/react-native-skia 0.1.150 → 0.1.152

package/lib/typescript/src/animation/timing/runTiming.d.ts

@@ -13,4 +13,4 @@ import type { AnimationParams, TimingConfig, AnimationCallback } from "../types"
  * @returns an animation value that can be used to start/stop
  * the animation.
  */
-export declare const runTiming: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: TimingConfig | undefined, callback?: AnimationCallback | undefined) => SkiaAnimation;
+export declare const runTiming: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/typescript/src/animation/timing/useLoop.d.ts

@@ -5,4 +5,4 @@ import type { TimingConfig } from "../types";
  * @param config Timing configuration for easing and duration
  * @returns A value that can be used for further animations
  */
-export declare const useLoop: (config?: TimingConfig | undefined) => import("../..").SkiaValue<number>;
+export declare const useLoop: (config?: TimingConfig) => import("../..").SkiaValue<number>;

package/lib/typescript/src/animation/timing/useTiming.d.ts

@@ -7,4 +7,4 @@ import type { AnimationParams, TimingConfig, AnimationCallback } from "../types"
  * @param config
  * @returns A value that is animated
  */
-export declare const useTiming: (toOrParams: number | AnimationParams, config?: TimingConfig | undefined, callback?: AnimationCallback | undefined) => SkiaValue<number>;
+export declare const useTiming: (toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaValue<number>;

package/lib/typescript/src/mock/index.d.ts

@@ -5,7 +5,7 @@ import type * as ValueExports from "../values";
 import type * as AnimationExports from "../animation";
 import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
 export declare const Skia: SkiaApi;
-export declare const vec: (x?: number | undefined, y?: number | undefined) => {
+export declare const vec: (x?: number, y?: number) => {
     x: number;
     y: number;
 };

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -11,4 +11,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     children: ReactNode;
     onTouch?: TouchHandler;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;

package/lib/typescript/src/renderer/HostConfig.d.ts

@@ -4,7 +4,7 @@ import type { NodeType, Node } from "../dom/types";
 import type { Container } from "./Container";
 export declare const debug: (message?: any, ...optionalParams: any[]) => void;
 declare type Instance = Node<unknown>;
-declare type Props = any;
+declare type Props = object;
 declare type TextInstance = Node<unknown>;
 declare type SuspenseInstance = Instance;
 declare type HydratableInstance = Instance;

package/lib/typescript/src/renderer/components/Paint.d.ts

@@ -2,4 +2,4 @@ import React from "react";
 import type { DrawingNodeProps } from "../../dom/types";
 import type { PaintNode } from "../../dom/nodes/PaintNode";
 export declare const usePaintRef: () => React.RefObject<PaintNode>;
-export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps> & React.RefAttributes<PaintNode>>;
+export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps, never> & React.RefAttributes<PaintNode>>;

package/lib/typescript/src/renderer/components/backdrop/BackdropFilter.d.ts

@@ -4,4 +4,4 @@ import type { SkiaProps } from "../../processors/Animations/Animations";
 export interface BackdropFilterProps extends GroupProps {
     filter: ReactNode | ReactNode[];
 }
-export declare const BackdropFilter: ({ filter, children: groupChildren, ...props }: SkiaProps<BackdropFilterProps>) => JSX.Element;
+export declare const BackdropFilter: ({ filter, children, ...props }: SkiaProps<BackdropFilterProps, "filter">) => JSX.Element;

package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts

@@ -4,9 +4,9 @@ export declare const isSelector: <T, R>(value: unknown) => value is {
     selector: (v: T) => R;
     value: SkiaValue<T>;
 };
-export declare const isAnimated: <T>(props: AnimatedProps<T>) => boolean;
+export declare const isAnimated: <T>(props: AnimatedProps<T, never>) => boolean;
 export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
-export declare type AnimatedProps<T> = {
-    [K in keyof T]: AnimatedProp<T[K]>;
+export declare type AnimatedProps<T, O extends keyof T | never = never> = {
+    [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };
-export declare type SkiaProps<P = {}> = AnimatedProps<P>;
+export declare type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<P, O>;

package/lib/typescript/src/renderer/typeddash.d.ts

@@ -1,3 +1,3 @@
-export declare const mapKeys: <T>(obj: T) => (keyof T)[];
+export declare const mapKeys: <T extends object>(obj: T) => (keyof T)[];
 export declare const exhaustiveCheck: (a: never) => never;
-export declare const shallowEq: <P>(p1: P, p2: P) => boolean;
+export declare const shallowEq: <P extends object>(p1: P, p2: P) => boolean;

package/lib/typescript/src/skia/core/Font.d.ts

@@ -2,4 +2,4 @@ import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Font object
  * */
-export declare const useFont: (font: DataSourceParam, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkFont | null;
+export declare const useFont: (font: DataSourceParam, size?: number, onError?: ((err: Error) => void) | undefined) => import("../types").SkFont | null;

package/lib/typescript/src/skia/core/Vector.d.ts

@@ -1,6 +1,6 @@
 import type { Vector } from "../types";
-export declare const vec: (x?: number, y?: number | undefined) => import("../types").SkPoint;
-export declare const point: (x?: number, y?: number | undefined) => import("../types").SkPoint;
+export declare const vec: (x?: number, y?: number) => import("../types").SkPoint;
+export declare const point: (x?: number, y?: number) => import("../types").SkPoint;
 export declare const neg: (a: Vector) => import("../types").SkPoint;
 export declare const add: (a: Vector, b: Vector) => import("../types").SkPoint;
 export declare const sub: (a: Vector, b: Vector) => import("../types").SkPoint;

package/lib/typescript/src/skia/types/Shader/Shader.d.ts

@@ -8,4 +8,4 @@ export declare type Uniform = UniformValue | readonly UniformValue[];
 export interface Uniforms {
     [name: string]: Uniform;
 }
-export declare const processUniforms: (source: SkRuntimeEffect, uniforms: Uniforms, builder?: SkRuntimeShaderBuilder | undefined) => number[];
+export declare const processUniforms: (source: SkRuntimeEffect, uniforms: Uniforms, builder?: SkRuntimeShaderBuilder) => number[];

package/lib/typescript/src/skia/web/JsiSkVerticesFactory.d.ts

@@ -1,4 +1,4 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkPoint, VertexMode } from "../types";
+import type { SkColor, SkPoint, VertexMode } from "../types";
 import { JsiSkVertices } from "./JsiSkVertices";
-export declare const MakeVertices: (CanvasKit: CanvasKit, mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[] | null | undefined, colors?: Float32Array[] | undefined, indices?: number[] | null | undefined, isVolatile?: boolean | undefined) => JsiSkVertices;
+export declare const MakeVertices: (CanvasKit: CanvasKit, mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[] | null, colors?: SkColor[], indices?: number[] | null, isVolatile?: boolean) => JsiSkVertices;

package/lib/typescript/src/views/SkiaBaseWebView.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import type { PointerEvent } from "react";
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
+import { TouchType } from "./types";
+export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
+    constructor(props: TProps);
+    private _surface;
+    private _unsubscriptions;
+    private _touches;
+    private _canvas;
+    private _canvasRef;
+    private _mode;
+    private _redrawRequests;
+    private requestId;
+    protected width: number;
+    protected height: number;
+    private unsubscribeAll;
+    private onLayout;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
+    /**
+     * Override to render
+     */
+    protected abstract renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    private tick;
+    redraw(): void;
+    /**
+     * Updates the drawing mode for the skia view. This is the same
+     * as declaratively setting the mode property on the SkiaView.
+     * There are two drawing modes, "continuous" and "default",
+     * where the continuous mode will continuously redraw the view and
+     * the default mode will only redraw when any of the regular react
+     * properties are changed like size and margins.
+     * @param mode Drawing mode to use.
+     */
+    setDrawMode(mode: DrawMode): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(_values: SkiaValue<unknown>[]): void;
+    private handleTouchEvent;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
+    render(): JSX.Element;
+}

package/lib/typescript/src/views/SkiaPictureView.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { SkiaPictureViewProps } from "./types";
+export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaPictureViewProps): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    render(): JSX.Element;
+}

package/lib/typescript/src/views/SkiaPictureView.web.d.ts

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import type { SkiaPictureViewProps } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    protected renderInCanvas(canvas: SkCanvas): void;
+}

package/lib/typescript/src/views/SkiaView.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
-import type { SkiaViewProps } from "./types";
-export declare class SkiaView extends React.Component<SkiaViewProps> {
-    constructor(props: SkiaViewProps);
+import type { SkiaDrawViewProps } from "./types";
+export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
+    constructor(props: SkiaDrawViewProps);
     private _nativeId;
     get nativeId(): number;
-    componentDidUpdate(prevProps: SkiaViewProps): void;
+    componentDidUpdate(prevProps: SkiaDrawViewProps): void;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.

package/lib/typescript/src/views/SkiaView.web.d.ts

@@ -1,54 +1,7 @@
-import React from "react";
-import type { PointerEvent } from "react";
-import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
-import type { DrawMode, SkiaViewProps } from "./types";
-import { TouchType } from "./types";
-export declare class SkiaView extends React.Component<SkiaViewProps> {
-    constructor(props: SkiaViewProps);
-    private _surface;
-    private _unsubscriptions;
-    private _touches;
-    private _canvas;
-    private _canvasRef;
-    private _mode;
-    private _redrawRequests;
-    private width;
-    private height;
-    private requestId;
-    private unsubscribeAll;
-    private onLayout;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    private tick;
-    redraw(): void;
-    /**
-     * Updates the drawing mode for the skia view. This is the same
-     * as declaratively setting the mode property on the SkiaView.
-     * There are two drawing modes, "continuous" and "default",
-     * where the continuous mode will continuously redraw the view and
-     * the default mode will only redraw when any of the regular react
-     * properties are changed like size and margins.
-     * @param mode Drawing mode to use.
-     */
-    setDrawMode(mode: DrawMode): void;
-    /**
-     * Registers one or move values as a dependant value of the Skia View. The view will
-     * The view will redraw itself when any of the values change.
-     * @param values Values to register
-     */
-    registerValues(_values: SkiaValue<unknown>[]): void;
-    private handleTouchEvent;
-    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
-    render(): JSX.Element;
+import type { SkCanvas } from "../skia/types";
+import type { SkiaDrawViewProps, TouchInfo } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
+    constructor(props: SkiaDrawViewProps);
+    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
 }

package/lib/typescript/src/views/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./SkiaView";
+export * from "./SkiaPictureView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/lib/typescript/src/views/types.d.ts

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native";
-import type { SkCanvas, SkImage, SkRect } from "../skia/types";
+import type { SkCanvas, SkImage, SkPicture, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
@@ -51,7 +51,7 @@ export interface ISkiaViewApi {
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
-export interface SkiaViewProps extends ViewProps {
+export interface SkiaBaseViewProps extends ViewProps {
     /**
      * Sets the drawing mode for the skia view. There are two drawing
      * modes, "continuous" and "default", where the continuous mode will
@@ -65,6 +65,8 @@ export interface SkiaViewProps extends ViewProps {
      * average time it takes to render.
      */
     debug?: boolean;
+}
+export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**
      * Draw callback. Will be called whenever the view is invalidated and
      * needs to redraw. This is either caused by a change in a react
@@ -74,3 +76,6 @@ export interface SkiaViewProps extends ViewProps {
      */
     onDraw?: RNSkiaDrawCallback;
 }
+export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+    picture?: SkPicture;
+}

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -2,5 +2,5 @@ import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit
 declare global {
     var CanvasKit: CanvasKitType;
 }
-export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
-export declare const LoadSkia: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions) => Promise<void>;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.150",
+  "version": "0.1.152",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -76,8 +76,8 @@
   },
   "devDependencies": {
     "@types/jest": "^28.1.6",
-    "@types/react-native": "^0.65.0",
-    "@types/react-reconciler": "^0.26.4",
+    "@types/react-native": "0.66.2",
+    "@types/react-reconciler": "0.26.4",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
@@ -86,11 +86,11 @@
     "react-native": "0.66.2",
     "react-native-builder-bob": "^0.18.2",
     "ts-jest": "^28.0.7",
-    "typescript": "^4.6.4"
+    "typescript": "4.8.3"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.36.0",
-    "react-reconciler": "^0.26.2"
+    "canvaskit-wasm": "0.36.1",
+    "react-reconciler": "0.26.2"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/renderer/HostConfig.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /*global NodeJS*/
 import type { HostConfig } from "react-reconciler";
 
@@ -20,7 +19,7 @@ export const debug = (...args: Parameters<typeof console.log>) => {
 
 type Instance = Node<unknown>;
 
-type Props = any;
+type Props = object;
 type TextInstance = Node<unknown>;
 type SuspenseInstance = Instance;
 type HydratableInstance = Instance;
@@ -236,7 +235,7 @@ export const skHostConfig: SkiaHostConfig = {
 };
 
 const materialize = <P>(props: AnimatedProps<P>) => {
-  const result = { ...props };
+  const result = { ...props } as P;
   mapKeys(props).forEach((key) => {
     const prop = props[key];
     if (isValue(prop)) {
@@ -246,5 +245,5 @@ const materialize = <P>(props: AnimatedProps<P>) => {
     }
   });
 
-  return result as any;
+  return result;
 };

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -13,7 +13,7 @@ export const BackdropFilter = ({
   filter,
   children: groupChildren,
   ...props
-}: SkiaProps<BackdropFilterProps>) => {
+}: SkiaProps<BackdropFilterProps, "filter">) => {
   return (
     <Group {...props}>
       <skBackdropFilter>{filter}</skBackdropFilter>

package/src/renderer/processors/Animations/Animations.ts

@@ -46,11 +46,18 @@ export const isAnimated = <T>(props: AnimatedProps<T>) => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
 
-export type AnimatedProps<T> = {
-  [K in keyof T]: AnimatedProp<T[K]>;
+export type AnimatedProps<T, O extends keyof T | never = never> = {
+  [K in keyof T]: K extends "children"
+    ? T[K]
+    : K extends O
+    ? T[K]
+    : AnimatedProp<T[K]>;
 };
 
 // TODO: switch to AnimatedProps<GroupProps> and remove duplicate properties.
 // For instance matrix in color filter becomes colorMatrix
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type SkiaProps<P = {}> = AnimatedProps<P>;
+
+export type SkiaProps<
+  P = object,
+  O extends keyof P | never = never
+> = AnimatedProps<P, O>;

package/src/renderer/typeddash.ts

@@ -1,11 +1,12 @@
-export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];
+export const mapKeys = <T extends object>(obj: T) =>
+  Object.keys(obj) as (keyof T)[];
 
 export const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unexhaustive handling for ${a}`);
 };
 
 // Shallow eq on props (without children)
-export const shallowEq = <P>(p1: P, p2: P): boolean => {
+export const shallowEq = <P extends object>(p1: P, p2: P): boolean => {
   const keys1 = mapKeys(p1);
   const keys2 = mapKeys(p2);
   if (keys1.length !== keys2.length) {

package/src/values/web/RNSkComputedValue.ts

@@ -11,7 +11,12 @@ export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
       current: undefined,
     };
     dependencies.forEach((dep) => {
-      if ("__typename__" in dep && "addListener" in dep) {
+      if (
+        dep &&
+        typeof dep === "object" &&
+        "__typename__" in dep &&
+        "addListener" in dep
+      ) {
         unsubscribers.push(
           (dep as RNSkReadonlyValue<unknown>).addListener(() =>
             notifyUpdateRef.current?.()