From 579dbd6ec55c1e1cba30a2942b070cdbef6f05a4 Mon Sep 17 00:00:00 2001 From: Wadah Esam Date: Tue, 11 Mar 2025 01:01:45 +0300 Subject: [PATCH 1/4] fix: android new arch issue --- src/ActivePoint.tsx | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/ActivePoint.tsx b/src/ActivePoint.tsx index 9a487e0..a18fddc 100644 --- a/src/ActivePoint.tsx +++ b/src/ActivePoint.tsx @@ -73,7 +73,7 @@ const ActivePoint = ({ }); const pointOpacity = useSharedValue(0); const lineOpacitySV = useSharedValue(0); - const activePointPosition = useSharedValue({x: 0, y: 0}); + const activePointPosition = useSharedValue({x: -radius, y: -radius}); const forceRerender = useForceReRender(); // forcing a re-render after x ms to fix sharedValues not causing a rerender. @@ -143,8 +143,8 @@ const ActivePoint = ({ }; } else { activePointPosition.value = { - x: 0, - y: 0, + x: -radius, + y: -radius, }; } } @@ -182,13 +182,11 @@ const ActivePoint = ({ } if (current.activeTouch === true) { - pointOpacity.value = withTiming(1, {duration: 200}); - lineOpacitySV.value = withTiming(verticalLineOpacity, { - duration: 200, - }); + pointOpacity.value = 1; + lineOpacitySV.value = verticalLineOpacity; } else { - pointOpacity.value = withTiming(0, {duration: 200}); - lineOpacitySV.value = withTiming(0, {duration: 200}); + pointOpacity.value = 0; + lineOpacitySV.value = 0; } } }, @@ -203,7 +201,7 @@ const ActivePoint = ({ cy: withTiming(activePointPosition.value.y, { duration: animateTransition ? 200 : 0, }), - opacity: pointOpacity.value, + opacity: withTiming(pointOpacity.value, {duration: 200}), }; }); @@ -218,7 +216,7 @@ const ActivePoint = ({ return { d: `M ${verticalLineActivePosition.value} ${height} v ${-height}`, - opacity: lineOpacitySV.value, + opacity: withTiming(lineOpacitySV.value, {duration: 200}), }; }); From 91d78da00f893d07799b47eb990b0344229789fe Mon Sep 17 00:00:00 2001 From: Wadah Esam Date: Tue, 11 Mar 2025 01:17:25 +0300 Subject: [PATCH 2/4] chore: remove animation until they fix android stuff --- src/ActivePoint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ActivePoint.tsx b/src/ActivePoint.tsx index a18fddc..c3ea339 100644 --- a/src/ActivePoint.tsx +++ b/src/ActivePoint.tsx @@ -201,7 +201,7 @@ const ActivePoint = ({ cy: withTiming(activePointPosition.value.y, { duration: animateTransition ? 200 : 0, }), - opacity: withTiming(pointOpacity.value, {duration: 200}), + opacity: pointOpacity.value, }; }); From 270c4f30fe6f87e229511354cd0a30f89e038186 Mon Sep 17 00:00:00 2001 From: Wadah Esam Date: Tue, 11 Mar 2025 02:02:16 +0300 Subject: [PATCH 3/4] fix: do it the right way --- src/ActivePoint.tsx | 38 ++++++++++++++--------------- src/ActivePointComponentWrapper.tsx | 10 +++++--- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/ActivePoint.tsx b/src/ActivePoint.tsx index c3ea339..c247cd7 100644 --- a/src/ActivePoint.tsx +++ b/src/ActivePoint.tsx @@ -73,7 +73,8 @@ const ActivePoint = ({ }); const pointOpacity = useSharedValue(0); const lineOpacitySV = useSharedValue(0); - const activePointPosition = useSharedValue({x: -radius, y: -radius}); + const activePointPositionX = useSharedValue(-radius); + const activePointPositionY = useSharedValue(-radius); const forceRerender = useForceReRender(); // forcing a re-render after x ms to fix sharedValues not causing a rerender. @@ -130,22 +131,22 @@ const ActivePoint = ({ // active point position if ( current.activeIndex !== previous?.activeIndex || - currentIndexData?.y !== activePointPosition?.value.y + currentIndexData?.y !== activePointPositionY?.value ) { const point = positions.value[activeIndex.value]; const y = point?.y; const x = point?.x; if (x !== undefined && y !== undefined) { - activePointPosition.value = { - x, - y, - }; + activePointPositionX.value = withTiming(x, { + duration: animateTransition ? 200 : 0, + }); + activePointPositionY.value = withTiming(y, { + duration: animateTransition ? 200 : 0, + }); } else { - activePointPosition.value = { - x: -radius, - y: -radius, - }; + activePointPositionX.value = -radius; + activePointPositionY.value = -radius; } } @@ -195,28 +196,24 @@ const ActivePoint = ({ const activePointProps = useAnimatedProps(() => { return { - cx: withTiming(activePointPosition.value.x, { - duration: animateTransition ? 200 : 0, - }), - cy: withTiming(activePointPosition.value.y, { - duration: animateTransition ? 200 : 0, - }), + cx: activePointPositionX.value, + cy: activePointPositionY.value, opacity: pointOpacity.value, }; }); const verticalLineActivePosition = useSharedValue( - activePointPosition.value.x || 0, + activePointPositionX.value || 0, ); const horizontalLineProps = useAnimatedProps(() => { verticalLineActivePosition.value = withTiming( - activePointPosition.value.x || 0, + activePointPositionX.value || 0, {duration: animateTransition ? 200 : 0}, ); return { d: `M ${verticalLineActivePosition.value} ${height} v ${-height}`, - opacity: withTiming(lineOpacitySV.value, {duration: 200}), + opacity: lineOpacitySV.value, }; }); @@ -234,7 +231,8 @@ const ActivePoint = ({ {(activePointComponent || activePointComponentWithSharedValue) && ( ; + activePointPositionX: SharedValue; + activePointPositionY: SharedValue; pointOpacity: SharedValue; width: number; activePointSharedValue: DataPointSharedValue; @@ -41,7 +43,7 @@ const ActivePointComponentWrapper = ({ const forceRerender = useForceReRender(); const componentPositionX = useDerivedValue(() => { - const xPosition = activePointPosition.value.x; + const xPosition = activePointPositionX.value; if (I18nManager.isRTL) { if ( @@ -68,7 +70,7 @@ const ActivePointComponentWrapper = ({ ); } return xPosition + SPACE_BETWEEN_COMPONENT_AND_LINE; - }, [activePointPosition, activeComponentWidthSV]); + }, [activePointPositionX, activePointPositionY, activeComponentWidthSV]); const viewAnimatedStyle = useAnimatedStyle(() => { return { From d7ed82f372bc145f21092de5e5970f58c7a7a92e Mon Sep 17 00:00:00 2001 From: Wadah Esam Date: Mon, 17 Mar 2025 14:40:46 +0300 Subject: [PATCH 4/4] fix: new arch layout calculation --- src/ActivePointComponentWrapper.tsx | 34 ++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/src/ActivePointComponentWrapper.tsx b/src/ActivePointComponentWrapper.tsx index efd37c6..f0b00b9 100644 --- a/src/ActivePointComponentWrapper.tsx +++ b/src/ActivePointComponentWrapper.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useLayoutEffect, useState} from 'react'; import {I18nManager, View} from 'react-native'; import { runOnJS, @@ -36,12 +36,23 @@ const ActivePointComponentWrapper = ({ activePointComponentWithSharedValue?: ActivePointComponentSharedValue; }) => { const SPACE_BETWEEN_COMPONENT_AND_LINE = 15; + const wrapperRef = React.useRef(null); const activeComponentWidthSV = useSharedValue(100); const [activeDataPointLocal, setActiveDataPointLocal] = useState< undefined | DataPoint >(undefined); const forceRerender = useForceReRender(); + const calculateWidth = () => { + wrapperRef.current?.measureInWindow((_x, _y, width) => { + activeComponentWidthSV.value = width; + }); + }; + + useLayoutEffect(() => { + calculateWidth(); + }, [activePointComponent]); + const componentPositionX = useDerivedValue(() => { const xPosition = activePointPositionX.value; @@ -77,9 +88,17 @@ const ActivePointComponentWrapper = ({ flexDirection: 'row', transform: [ { - translateX: withTiming(componentPositionX.value, { - duration: 100, - }), + translateX: withTiming( + componentPositionX.value, + { + duration: 100, + }, + finished => { + if (finished) { + runOnJS(calculateWidth)(); + } + }, + ), }, ], opacity: pointOpacity.value, @@ -107,12 +126,7 @@ const ActivePointComponentWrapper = ({ ...viewAnimatedStyle, }} > - { - const {width: componentWidth} = event.nativeEvent.layout; - activeComponentWidthSV.value = componentWidth; - }} - > + {activePointComponentWithSharedValue !== undefined && activePointComponentWithSharedValue !== undefined && activePointComponentWithSharedValue(activePointSharedValue)}