diff --git a/src/ActivePoint.tsx b/src/ActivePoint.tsx
index 9a487e0..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: 0, y: 0});
+    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: 0,
-                            y: 0,
-                        };
+                        activePointPositionX.value = -radius;
+                        activePointPositionY.value = -radius;
                     }
                 }
 
@@ -182,13 +183,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;
                 }
             }
         },
@@ -197,22 +196,18 @@ 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},
         );
 
@@ -236,7 +231,8 @@ const ActivePoint = ({
             {(activePointComponent || activePointComponentWithSharedValue) && (
                 <ActivePointComponentWrapper
                     activePointSharedValue={activePointSV}
-                    activePointPosition={activePointPosition}
+                    activePointPositionX={activePointPositionX}
+                    activePointPositionY={activePointPositionY}
                     pointOpacity={pointOpacity}
                     width={width}
                     activePointComponent={activePointComponent}
diff --git a/src/ActivePointComponentWrapper.tsx b/src/ActivePointComponentWrapper.tsx
index 7a54df6..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,
@@ -19,14 +19,16 @@ import {
 } from './types';
 
 const ActivePointComponentWrapper = ({
-    activePointPosition,
+    activePointPositionX,
+    activePointPositionY,
     pointOpacity,
     width,
     activePointSharedValue,
     activePointComponentWithSharedValue,
     activePointComponent,
 }: {
-    activePointPosition: SharedValue<{x: number; y: number}>;
+    activePointPositionX: SharedValue<number>;
+    activePointPositionY: SharedValue<number>;
     pointOpacity: SharedValue<number>;
     width: number;
     activePointSharedValue: DataPointSharedValue;
@@ -34,14 +36,25 @@ const ActivePointComponentWrapper = ({
     activePointComponentWithSharedValue?: ActivePointComponentSharedValue;
 }) => {
     const SPACE_BETWEEN_COMPONENT_AND_LINE = 15;
+    const wrapperRef = React.useRef<View>(null);
     const activeComponentWidthSV = useSharedValue<number>(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 = activePointPosition.value.x;
+        const xPosition = activePointPositionX.value;
 
         if (I18nManager.isRTL) {
             if (
@@ -68,16 +81,24 @@ const ActivePointComponentWrapper = ({
             );
         }
         return xPosition + SPACE_BETWEEN_COMPONENT_AND_LINE;
-    }, [activePointPosition, activeComponentWidthSV]);
+    }, [activePointPositionX, activePointPositionY, activeComponentWidthSV]);
 
     const viewAnimatedStyle = useAnimatedStyle(() => {
         return {
             flexDirection: 'row',
             transform: [
                 {
-                    translateX: withTiming(componentPositionX.value, {
-                        duration: 100,
-                    }),
+                    translateX: withTiming(
+                        componentPositionX.value,
+                        {
+                            duration: 100,
+                        },
+                        finished => {
+                            if (finished) {
+                                runOnJS(calculateWidth)();
+                            }
+                        },
+                    ),
                 },
             ],
             opacity: pointOpacity.value,
@@ -105,12 +126,7 @@ const ActivePointComponentWrapper = ({
                 ...viewAnimatedStyle,
             }}
         >
-            <View
-                onLayout={event => {
-                    const {width: componentWidth} = event.nativeEvent.layout;
-                    activeComponentWidthSV.value = componentWidth;
-                }}
-            >
+            <View ref={wrapperRef}>
                 {activePointComponentWithSharedValue !== undefined &&
                     activePointComponentWithSharedValue !== undefined &&
                     activePointComponentWithSharedValue(activePointSharedValue)}