feat: support web (#11) (#13)

package.json

@@ -182,8 +182,5 @@
   "create-react-native-library": {
     "type": "library",
     "version": "0.41.0"
-  },
-  "dependencies": {
-    "react-native-anchor-point": "^1.0.6"
   }
 }

src/index.tsx

@@ -11,8 +11,8 @@ import {
   type ViewStyle,
   Image,
 } from 'react-native';
-import { withAnchorPoint } from 'react-native-anchor-point';
 import { createArrowShape, getAnchorPoint } from './functions';
+import { withAnchorPoint } from './withAnchorPoint';
 
 // DEFAULT VALUES
 const SIDE_ARROW_INSET = 12;

src/withAnchorPoint.ts

@@ -0,0 +1,69 @@
+// source from react-native-anchor-point
+// I extracted the code included in the node module because I assumed it was not included in the integrated build.
+import type { TransformsStyle } from 'react-native';
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+const isValidSize = (size: Size): boolean => {
+  return size && size.width > 0 && size.height > 0;
+};
+
+const defaultAnchorPoint = { x: 0.5, y: 0.5 };
+
+export const withAnchorPoint = (
+  transform: TransformsStyle,
+  anchorPoint: Point,
+  size: Size
+) => {
+  if (!isValidSize(size)) {
+    return transform;
+  }
+
+  let injectedTransform = transform.transform;
+  if (!injectedTransform) {
+    return transform;
+  }
+
+  if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
+    const shiftTranslateX = [];
+
+    // shift before rotation
+    shiftTranslateX.push({
+      translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
+    });
+    // @ts-ignore
+    injectedTransform = [...shiftTranslateX, ...injectedTransform];
+    // shift after rotation
+    // @ts-ignore
+    injectedTransform.push({
+      translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
+    });
+  }
+
+  if (!Array.isArray(injectedTransform)) {
+    return { transform: injectedTransform };
+  }
+
+  if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
+    let shiftTranslateY = [];
+    // shift before rotation
+    shiftTranslateY.push({
+      translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
+    });
+    injectedTransform = [...shiftTranslateY, ...injectedTransform];
+    // shift after rotation
+    injectedTransform.push({
+      translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
+    });
+  }
+
+  return { transform: injectedTransform };
+};

yarn.lock

@@ -12497,13 +12497,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-anchor-point@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "react-native-anchor-point@npm:1.0.6"
-  checksum: 2f69eb5f7d4404c613dcdedbe2ad29073a8a48ebc21906384bb191cc3f0a4b1659b82708564576c33a83d84ad414b1ca0704ac37ef118866f1af8918ba0a10f1
-  languageName: node
-  linkType: hard
-
 "react-native-builder-bob@npm:^0.30.0":
   version: 0.30.0
   resolution: "react-native-builder-bob@npm:0.30.0"
@@ -12571,7 +12564,6 @@ __metadata:
     prettier: ^3.0.3
     react: 18.2.0
     react-native: 0.74.5
-    react-native-anchor-point: ^1.0.6
     react-native-builder-bob: ^0.30.0
     release-it: ^15.0.0
     typescript: ^5.2.2