react-nitro-renderer 0.0.0-stage → 0.0.1-alpha.7

package/src/StylePropSetters.ts

@@ -0,0 +1,145 @@
+import type { StyleProps } from "./components/View";
+import type { View } from "./specs/View.nitro";
+import type { StrictMap } from "./types/StrictMap";
+import { groupPropSetter, type PropSetter } from "./PropSetter";
+import { arePropArraysEqual } from "./utils/arePropArraysEqual";
+
+type StylePropSetter = PropSetter<View, StyleProps>;
+
+const StrictMap: StrictMap<keyof StyleProps, StylePropSetter> = Map;
+
+const emptyStyleProps: StyleProps = {};
+
+const translationPropSetter = groupPropSetter<View, StyleProps>(
+  ["translateX", "translateY", "translateZ"],
+  (view, props) => {
+    const translateX = props.translateX ?? 0;
+    const translateY = props.translateY ?? 0;
+    const translateZ = props.translateZ ?? 0;
+    view.setTranslation(translateX, translateY, translateZ);
+  },
+);
+
+const scalePropSetter = groupPropSetter<View, StyleProps>(
+  ["scale", "scaleX", "scaleY", "scaleZ"],
+  (view, props) => {
+    const scale = props.scale ?? 1;
+    const scaleX = props.scaleX ?? scale;
+    const scaleY = props.scaleY ?? scale;
+    const scaleZ = props.scaleZ ?? scale;
+    view.setScale(scaleX, scaleY, scaleZ);
+  },
+);
+
+export const DEFAULTS = {
+  opacity: 1,
+  cornerRadius: 0,
+  cornerCurve: "circular",
+} as const;
+
+export const stylePropSetters = new StrictMap([
+  [
+    "backgroundColor",
+    (view, props) => {
+      const backgroundColor = props.backgroundColor;
+      if (backgroundColor == null) {
+        // TODO: Allow clearing backgroundColor when the prop is removed.
+        return;
+      }
+      view.setBackgroundColor(backgroundColor);
+    },
+  ],
+  [
+    "opacity",
+    (view, props) => {
+      view.opacity = props.opacity ?? DEFAULTS.opacity;
+    },
+  ],
+  [
+    "borderColor",
+    (view, props) => {
+      view.setBorderColor(props.borderColor);
+    },
+  ],
+  [
+    "cornerRadius",
+    (view, props) => {
+      view.cornerRadius = props.cornerRadius ?? DEFAULTS.cornerRadius;
+    },
+  ],
+  [
+    "maskedCorners",
+    (view, props) => {
+      view.maskedCorners = props.maskedCorners ?? [
+        "topLeft",
+        "topRight",
+        "bottomLeft",
+        "bottomRight",
+      ];
+    },
+  ],
+  [
+    "cornerCurve",
+    (view, props) => {
+      view.cornerCurve = props.cornerCurve ?? DEFAULTS.cornerCurve;
+    },
+  ],
+  ["translateX", translationPropSetter],
+  ["translateY", translationPropSetter],
+  ["translateZ", translationPropSetter],
+  ["scale", scalePropSetter],
+  ["scaleX", scalePropSetter],
+  ["scaleY", scalePropSetter],
+  ["scaleZ", scalePropSetter],
+]);
+
+export function applyStyleProps(
+  view: View,
+  props: StyleProps | undefined,
+  previousProps?: StyleProps,
+): void {
+  if (props === previousProps) {
+    return;
+  }
+  const nextProps = props ?? emptyStyleProps;
+  let key: keyof StyleProps;
+  // A performance benchmark showed that Hermes favored scanning present keys
+  // over Object.keys() allocations or checking every supported prop.
+  for (key in nextProps) {
+    const value = nextProps[key];
+    const previousValue = previousProps?.[key];
+    if (value === previousValue) {
+      continue;
+    }
+    const isArray = Array.isArray(value);
+    const wasArray = Array.isArray(previousValue);
+    if (isArray && wasArray) {
+      const sameArray = arePropArraysEqual(value, previousValue);
+      if (sameArray) {
+        continue;
+      }
+    }
+    const setter = stylePropSetters.get(key);
+    if (setter === undefined) {
+      continue;
+    }
+    setter(view, nextProps, key, previousProps);
+  }
+
+  // Apply removed style prop values next:
+  if (previousProps == null) {
+    return;
+  }
+  for (key in previousProps) {
+    if (key in nextProps || previousProps[key] === undefined) {
+      continue;
+    }
+    const setter = stylePropSetters.get(key);
+    if (setter === undefined) {
+      continue;
+    }
+    // we always pass the full style object
+    // in this case the prop exists on the previousProps but not in nextProps, so the read here will be "undefined"
+    setter(view, nextProps, key, previousProps);
+  }
+}

package/src/ViewPropSetters.ts

@@ -0,0 +1,33 @@
+import { applyYogaProps } from "./YogaPropSetters";
+import { applyStyleProps } from "./StylePropSetters";
+import type { StyleProps } from "./components/View";
+import type { GestureRecognizer } from "./specs/Gestures/GestureRecognizer.nitro";
+import type { YogaStyleProps } from "./types/YogaStyleProps";
+import type { View } from "./specs/View.nitro";
+
+export type ViewProps = {
+  layout?: YogaStyleProps;
+  style?: StyleProps;
+
+  // Gestures:
+  gestureRecognizers?: (view: View) => GestureRecognizer[];
+  isUserInteractionEnabled?: boolean
+}
+
+export const viewPropsSetters: {
+  [propName in keyof ViewProps]: (
+    view: View,
+    value: ViewProps[propName],
+    previousValue?: ViewProps[propName],
+  ) => void
+} = {
+  layout: applyYogaProps,
+  style: applyStyleProps,
+  gestureRecognizers: (view, value) => {
+    const gestureRecognizers = value?.(view)
+    view.setGestureRecognizers(gestureRecognizers)
+  },
+  isUserInteractionEnabled: (view: View, value?: boolean) => {
+    view.isUserInteractionEnabled = value ?? true
+  },
+};

package/src/ViewRegistry.ts

@@ -0,0 +1,47 @@
+import type { ComponentType, RefAttributes } from "react";
+import type { ReconcilerElementType } from "./types/ReactNitroReconcilerHostConfig";
+import type { ViewDefinitionMap, ViewPropsMap } from "./types/ViewPropsUpdater";
+
+type ViewFactoryMap = {
+  [Type in ReconcilerElementType]: (
+    props: ViewPropsMap[Type],
+  ) => ViewDefinitionMap[Type]["view"];
+};
+
+type ViewPropSetterMap = {
+  [Type in ReconcilerElementType]: {
+    [PropName in keyof ViewPropsMap[Type]]: (
+      view: ViewDefinitionMap[Type]["view"],
+      propValue: ViewPropsMap[Type][PropName],
+      previousPropValue?: ViewPropsMap[Type][PropName],
+    ) => void;
+  };
+};
+
+export const viewRegistry: {
+  factories: Partial<ViewFactoryMap>;
+  propSetters: {
+    [Type in ReconcilerElementType]?: Partial<ViewPropSetterMap[Type]>;
+  };
+} = {
+  factories: {},
+  propSetters: {},
+};
+
+type HostComponent<Type extends ReconcilerElementType> = ComponentType<
+  ViewPropsMap[Type] & RefAttributes<ViewDefinitionMap[Type]["view"]>
+>;
+
+export function registerView<Type extends ReconcilerElementType>(
+  type: Type,
+  factory: ViewFactoryMap[NoInfer<Type>],
+  propSetters?: Partial<ViewPropSetterMap[NoInfer<Type>]>,
+): HostComponent<Type> {
+  viewRegistry.factories[type] = factory;
+  if (propSetters != null) {
+    viewRegistry.propSetters[type] = propSetters;
+  }
+
+  // the react-reconciler actually takes a plain string for host components, so this type quirk is expected
+  return type as unknown as HostComponent<Type>;
+}

package/src/YogaPropSetters.ts

@@ -0,0 +1,347 @@
+import type {
+  YGAlign,
+  YGFlexDirection,
+  YGJustify,
+  YGNodeRef,
+  YGOverflow,
+  YGPositionType,
+} from "react-nitro-yoga";
+import type { View } from "./specs/View.nitro";
+import type { StrictMap } from "./types/StrictMap";
+import type { YogaStyleProps } from "./types/YogaStyleProps";
+import { getViewYogaNode } from "./getViewYogaNode";
+
+// Map lookups are faster than object/Record lookups in Hermes for these values.
+const positionMap = new Map<YogaStyleProps["position"], YGPositionType>([
+  ["static", yoga.YGPositionTypeStatic],
+  ["relative", yoga.YGPositionTypeRelative],
+  ["absolute", yoga.YGPositionTypeAbsolute],
+]);
+
+const flexDirectionMap = new Map<
+  YogaStyleProps["flexDirection"],
+  YGFlexDirection
+>([
+  ["column", yoga.YGFlexDirectionColumn],
+  ["column-reverse", yoga.YGFlexDirectionColumnReverse],
+  ["row", yoga.YGFlexDirectionRow],
+  ["row-reverse", yoga.YGFlexDirectionRowReverse],
+]);
+
+const alignItemsMap = new Map<YogaStyleProps["alignItems"], YGAlign>([
+  ["flex-start", yoga.YGAlignFlexStart],
+  ["center", yoga.YGAlignCenter],
+  ["flex-end", yoga.YGAlignFlexEnd],
+  ["stretch", yoga.YGAlignStretch],
+  ["baseline", yoga.YGAlignBaseline],
+]);
+
+// Only alignSelf supports inheriting the parent's alignItems through "auto".
+const alignSelfMap = new Map<YogaStyleProps["alignSelf"], YGAlign>([
+  ["auto", yoga.YGAlignAuto],
+  ...alignItemsMap,
+]);
+
+const justifyContentMap = new Map<YogaStyleProps["justifyContent"], YGJustify>([
+  ["flex-start", yoga.YGJustifyFlexStart],
+  ["center", yoga.YGJustifyCenter],
+  ["flex-end", yoga.YGJustifyFlexEnd],
+  ["space-between", yoga.YGJustifySpaceBetween],
+  ["space-around", yoga.YGJustifySpaceAround],
+  ["space-evenly", yoga.YGJustifySpaceEvenly],
+]);
+
+const overflowMap = new Map<YogaStyleProps["overflow"], YGOverflow>([
+  ["visible", yoga.YGOverflowVisible],
+  ["hidden", yoga.YGOverflowHidden],
+  ["scroll", yoga.YGOverflowScroll],
+]);
+
+type YogaPropSetter = (yogaNode: YGNodeRef, props: YogaStyleProps, view: View) => void;
+
+// Map is used as its faster than using plain object {}!
+const StrictMap: StrictMap<keyof YogaStyleProps, YogaPropSetter> = Map;
+
+const emptyYogaProps: YogaStyleProps = {};
+
+// Yoga's C API uses NaN to unset scalar and edge values.
+const yogaUndefined = Number.NaN;
+
+export const yogaPropSetters = new StrictMap([
+  [
+    "position",
+    (yogaNode, props) => {
+      const position = positionMap.get(props.position) ?? yoga.YGPositionTypeRelative;
+      yoga.YGNodeStyleSetPositionType(yogaNode, position);
+    },
+  ],
+  [
+    "top",
+    (yogaNode, props) => {
+      const top = props.top ?? yogaUndefined;
+      yoga.YGNodeStyleSetPosition(yogaNode, yoga.YGEdgeTop, top);
+    },
+  ],
+  [
+    "right",
+    (yogaNode, props) => {
+      const right = props.right ?? yogaUndefined;
+      yoga.YGNodeStyleSetPosition(yogaNode, yoga.YGEdgeRight, right);
+    },
+  ],
+  [
+    "bottom",
+    (yogaNode, props) => {
+      const bottom = props.bottom ?? yogaUndefined;
+      yoga.YGNodeStyleSetPosition(yogaNode, yoga.YGEdgeBottom, bottom);
+    },
+  ],
+  [
+    "left",
+    (yogaNode, props) => {
+      const left = props.left ?? yogaUndefined;
+      yoga.YGNodeStyleSetPosition(yogaNode, yoga.YGEdgeLeft, left);
+    },
+  ],
+  [
+    "flex",
+    (yogaNode, props) => {
+      const flex = props.flex ?? yogaUndefined;
+      yoga.YGNodeStyleSetFlex(yogaNode, flex);
+    },
+  ],
+  [
+    "flexDirection",
+    (yogaNode, props) => {
+      const flexDirection =
+        flexDirectionMap.get(props.flexDirection) ?? yoga.YGFlexDirectionColumn;
+      yoga.YGNodeStyleSetFlexDirection(yogaNode, flexDirection);
+    },
+  ],
+  [
+    "flexShrink",
+    (yogaNode, props) => {
+      const flexShrink = props.flexShrink ?? yogaUndefined;
+      yoga.YGNodeStyleSetFlexShrink(yogaNode, flexShrink);
+    },
+  ],
+  [
+    "flexGrow",
+    (yogaNode, props) => {
+      const flexGrow = props.flexGrow ?? yogaUndefined;
+      yoga.YGNodeStyleSetFlexGrow(yogaNode, flexGrow);
+    },
+  ],
+  [
+    "justifyContent",
+    (yogaNode, props) => {
+      const justifyContent =
+        justifyContentMap.get(props.justifyContent) ?? yoga.YGJustifyFlexStart;
+      yoga.YGNodeStyleSetJustifyContent(yogaNode, justifyContent);
+    },
+  ],
+  [
+    "alignItems",
+    (yogaNode, props) => {
+      const alignItems = alignItemsMap.get(props.alignItems) ?? yoga.YGAlignStretch;
+      yoga.YGNodeStyleSetAlignItems(yogaNode, alignItems);
+    },
+  ],
+  [
+    "alignSelf",
+    (yogaNode, props) => {
+      const alignSelf = alignSelfMap.get(props.alignSelf) ?? yoga.YGAlignAuto;
+      yoga.YGNodeStyleSetAlignSelf(yogaNode, alignSelf);
+    },
+  ],
+  [
+    "width",
+    (yogaNode, props) => {
+      const width = props.width;
+      if (width === undefined) {
+        yoga.YGNodeStyleSetWidthAuto(yogaNode);
+      } else {
+        yoga.YGNodeStyleSetWidth(yogaNode, width);
+      }
+    },
+  ],
+  [
+    "height",
+    (yogaNode, props) => {
+      const height = props.height;
+      if (height === undefined) {
+        yoga.YGNodeStyleSetHeightAuto(yogaNode);
+      } else {
+        yoga.YGNodeStyleSetHeight(yogaNode, height);
+      }
+    },
+  ],
+  [
+    "margin",
+    (yogaNode, props) => {
+      const margin = props.margin ?? yogaUndefined;
+      if (margin === "auto") {
+        yoga.YGNodeStyleSetMarginAuto(yogaNode, yoga.YGEdgeAll);
+      } else {
+        yoga.YGNodeStyleSetMargin(yogaNode, yoga.YGEdgeAll, margin);
+      }
+    },
+  ],
+  [
+    "marginTop",
+    (yogaNode, props) => {
+      const marginTop = props.marginTop ?? yogaUndefined;
+      if (marginTop === "auto") {
+        yoga.YGNodeStyleSetMarginAuto(yogaNode, yoga.YGEdgeTop);
+      } else {
+        yoga.YGNodeStyleSetMargin(yogaNode, yoga.YGEdgeTop, marginTop);
+      }
+    },
+  ],
+  [
+    "marginBottom",
+    (yogaNode, props) => {
+      const marginBottom = props.marginBottom ?? yogaUndefined;
+      if (marginBottom === "auto") {
+        yoga.YGNodeStyleSetMarginAuto(yogaNode, yoga.YGEdgeBottom);
+      } else {
+        yoga.YGNodeStyleSetMargin(yogaNode, yoga.YGEdgeBottom, marginBottom);
+      }
+    },
+  ],
+  [
+    "marginLeft",
+    (yogaNode, props) => {
+      const marginLeft = props.marginLeft ?? yogaUndefined;
+      if (marginLeft === "auto") {
+        yoga.YGNodeStyleSetMarginAuto(yogaNode, yoga.YGEdgeLeft);
+      } else {
+        yoga.YGNodeStyleSetMargin(yogaNode, yoga.YGEdgeLeft, marginLeft);
+      }
+    },
+  ],
+  [
+    "marginRight",
+    (yogaNode, props) => {
+      const marginRight = props.marginRight ?? yogaUndefined;
+      if (marginRight === "auto") {
+        yoga.YGNodeStyleSetMarginAuto(yogaNode, yoga.YGEdgeRight);
+      } else {
+        yoga.YGNodeStyleSetMargin(yogaNode, yoga.YGEdgeRight, marginRight);
+      }
+    },
+  ],
+  [
+    "padding",
+    (yogaNode, props) => {
+      const padding = props.padding ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeAll, padding);
+    },
+  ],
+  [
+    "paddingTop",
+    (yogaNode, props) => {
+      const paddingTop = props.paddingTop ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeTop, paddingTop);
+    },
+  ],
+  [
+    "paddingBottom",
+    (yogaNode, props) => {
+      const paddingBottom = props.paddingBottom ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeBottom, paddingBottom);
+    },
+  ],
+  [
+    "paddingLeft",
+    (yogaNode, props) => {
+      const paddingLeft = props.paddingLeft ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeLeft, paddingLeft);
+    },
+  ],
+  [
+    "paddingRight",
+    (yogaNode, props) => {
+      const paddingRight = props.paddingRight ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeRight, paddingRight);
+    },
+  ],
+  [
+    "paddingHorizontal",
+    (yogaNode, props) => {
+      const paddingHorizontal = props.paddingHorizontal ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeHorizontal, paddingHorizontal);
+    },
+  ],
+  [
+    "paddingVertical",
+    (yogaNode, props) => {
+      const paddingVertical = props.paddingVertical ?? yogaUndefined;
+      yoga.YGNodeStyleSetPadding(yogaNode, yoga.YGEdgeVertical, paddingVertical);
+    },
+  ],
+  [
+    "overflow",
+    (yogaNode, props) => {
+      const overflow = overflowMap.get(props.overflow) ?? yoga.YGOverflowVisible;
+      yoga.YGNodeStyleSetOverflow(yogaNode, overflow);
+    },
+  ],
+  [
+    'borderWidth',
+    (yogaNode, props, view) => {
+      const borderWidth = props.borderWidth;
+      const yogaBorderWidth = borderWidth ?? yogaUndefined;
+      yoga.YGNodeStyleSetBorder(yogaNode, yoga.YGEdgeAll, yogaBorderWidth);
+      view.borderWidth = borderWidth;
+    },
+  ],
+]);
+
+export function applyYogaProps(
+  view: View,
+  props: YogaStyleProps | undefined,
+  previousProps?: YogaStyleProps,
+): void {
+  if (props === previousProps) {
+    return;
+  }
+  const nextProps = props ?? emptyYogaProps;
+
+  let yogaNode: YGNodeRef | undefined;
+  let key: keyof YogaStyleProps;
+  // A performance benchmark showed that Hermes favored scanning present keys
+  // over Object.keys() allocations or checking every supported prop.
+  for (key in nextProps) {
+    const value = nextProps[key];
+    const previousValue = previousProps?.[key];
+    if (value === previousValue) {
+      continue;
+    }
+    const setter = yogaPropSetters.get(key);
+    if (setter === undefined) {
+      continue;
+    }
+    if (yogaNode === undefined) {
+      yogaNode = getViewYogaNode(view);
+    }
+    setter(yogaNode, nextProps, view);
+  }
+
+  if (previousProps == null) {
+    return;
+  }
+  for (key in previousProps) {
+    if (key in nextProps || previousProps[key] === undefined) {
+      continue;
+    }
+    const setter = yogaPropSetters.get(key);
+    if (setter === undefined) {
+      continue;
+    }
+    if (yogaNode === undefined) {
+      yogaNode = getViewYogaNode(view);
+    }
+    setter(yogaNode, nextProps, view);
+  }
+}

package/src/components/ScrollView.tsx

@@ -0,0 +1,30 @@
+import type { YogaStyleProps } from "../types/YogaStyleProps";
+import { ScrollView as ScrollViewHybrid } from "../hybrids";
+import { viewPropsSetters } from "../ViewPropSetters";
+import { registerView } from "../ViewRegistry";
+import type { ViewProps } from "./View";
+
+export interface ScrollViewProps extends ViewProps {}
+
+const ScrollViewHostComponent = registerView(
+  "ScrollView",
+  () => new ScrollViewHybrid(),
+  { ...viewPropsSetters },
+);
+
+const defaultLayout: YogaStyleProps = {
+  // w/o this the scroll view view would equal content size, which would prevent it from scrolling
+  flex: 1,
+  overflow: "hidden",
+};
+export function ScrollView({layout, ...props}: ScrollViewProps) {
+  return (
+    <ScrollViewHostComponent
+      layout={{
+        ...defaultLayout,
+        ...layout,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/ScrollViewContent.tsx

@@ -0,0 +1,12 @@
+import { ScrollViewContent as ScrollViewContentHybrid } from "../hybrids";
+import { viewPropsSetters } from "../ViewPropSetters";
+import { registerView } from "../ViewRegistry";
+import type { ViewProps } from "./View";
+
+export interface ScrollViewContentProps extends ViewProps {}
+
+export const ScrollViewContent = registerView(
+  "ScrollViewContent",
+  () => new ScrollViewContentHybrid(),
+  viewPropsSetters,
+);

package/src/components/Text.tsx

@@ -0,0 +1,34 @@
+import { Label } from "../hybrids";
+import { registerView } from "../ViewRegistry";
+import { viewPropsSetters } from "../ViewPropSetters";
+import type { ViewProps } from "./View";
+
+export type TextProps = Omit<ViewProps, "children"> &
+  Pick<Label, "text"> & {
+    children?: string | string[];
+  };
+
+export const Text = registerView(
+  "Text",
+  () => new Label(),
+  {
+    ...viewPropsSetters,
+    text: (view, newText) => {
+      view.text = newText;
+    },
+    children: (view, childrenAsText) => {
+      let text = childrenAsText;
+      if (Array.isArray(text)) {
+        text = text.join('');
+      }
+      view.text = text;
+    },
+    gestureRecognizers(view, propValue) {
+      const enableInteractions = propValue !== undefined && propValue != null
+      // UILabel has gesture recognizers but its user interaction must be enabled explicitly
+      view.isUserInteractionEnabled = enableInteractions
+      // super:
+      viewPropsSetters.gestureRecognizers?.(view, propValue)
+    },
+  },
+);

package/src/components/View.ts

@@ -0,0 +1,33 @@
+import { Application } from "../hybrids";
+import { registerView } from "../ViewRegistry";
+import { viewPropsSetters, type ViewProps as ViewPropsFromViewPropSetters } from "../ViewPropSetters";
+import type { PropsWithChildren } from "react";
+import type { View as ViewSpec } from "../specs/View.nitro";
+
+export { type ViewSpec }
+
+export type TranslationStyleProps = {
+  translateX?: number;
+  translateY?: number;
+  translateZ?: number;
+};
+
+export type ScaleStyleProps = {
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  scaleZ?: number;
+};
+
+export type StyleProps = Pick<ViewSpec, "backgroundColor" | "borderColor"> &
+  Partial<Pick<ViewSpec, "opacity" | "cornerRadius" | "maskedCorners" | "cornerCurve">> &
+  TranslationStyleProps &
+  ScaleStyleProps;
+
+export type ViewProps = PropsWithChildren<ViewPropsFromViewPropSetters>;
+
+export const View = registerView(
+  "View",
+  () => Application.createView(),
+  viewPropsSetters,
+);

package/src/contexts/RootContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+import type { ViewController } from '../specs/ViewController.nitro'
+
+/** The view controller hosting the current React rendering root. */
+export const RootContext = createContext<ViewController | undefined>(undefined)

package/src/getViewYogaNode.ts

@@ -0,0 +1,9 @@
+import type { YGNodeRef } from "react-nitro-yoga";
+import type { View } from "./specs/View.nitro";
+
+export function getViewYogaNode(view: View) {
+  // TODO: We can't use the JSIConverter yet with swift,
+  // so the yoga node is passed to us as a pointer address as number.
+  // But actually tht YGNodeRef type we use with shermes yoga is also just a pointer.
+  return view.yogaNodePtr as unknown as YGNodeRef;
+}