diff --git a/package.json b/package.json index e713717..410ef68 100644 --- a/package.json +++ b/package.json @@ -182,8 +182,5 @@ "create-react-native-library": { "type": "library", "version": "0.41.0" - }, - "dependencies": { - "react-native-anchor-point": "^1.0.6" } } diff --git a/src/index.tsx b/src/index.tsx index 880c7f7..5b65839 100644 --- a/src/index.tsx +++ b/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; diff --git a/src/withAnchorPoint.ts b/src/withAnchorPoint.ts new file mode 100644 index 0000000..a997d17 --- /dev/null +++ b/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 }; +}; diff --git a/yarn.lock b/yarn.lock index a9e43af..9be4587 100644 --- a/yarn.lock +++ b/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