docs: suggested changes

software-mansion · Jul 16, 2024 · cb7f80c · cb7f80c
1 parent 0afef9d
commit cb7f80c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/packages/docs-reanimated/docs/utilities/getRelativeCoords.mdx b/packages/docs-reanimated/docs/utilities/getRelativeCoords.mdx
@@ -17,7 +17,11 @@ const Comp = () => {
 
   const gestureHandler = useAnimatedGestureHandler({
     onEnd: (event) => {
-      getRelativeCoords(animatedRef, event.absoluteX, event.absoluteY);
+      const coords = getRelativeCoords(
+        animatedRef,
+        event.absoluteX,
+        event.absoluteY
+      );
     },
   });
 
@@ -53,7 +57,7 @@ interface ComponentCoords {
 
 #### `animatedRef`
 
-[Animated ref](/docs/core/useAnimatedRef#returns) connected to the ScrollView (or other scrollable) component you'd want to scroll on. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component.
+The product of [`useAnimatedRef`](/docs/core/useAnimatedRef) is Reanimated's extension of a standard React ref (delivers the view tag on the UI thread). This ref should be passed as a prop to the view relative to which we want to know coordinates.
 
 #### `absoluteX`
 

diff --git a/packages/docs-reanimated/src/examples/RelativeCoords.tsx b/packages/docs-reanimated/src/examples/RelativeCoords.tsx
@@ -9,15 +9,13 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 const RelativeCoords = () => {
   const animatedRef = useAnimatedRef();
   const [coords, setCoords] = useState({ x: 0, y: 0 });
-  const [boxCoords, setBoxCoords] = useState({ x: 0, y: 0 });
 
   const tapGesture = Gesture.Tap().onEnd((event) => {
     const relativeCoords = getRelativeCoords(
       animatedRef,
       event.absoluteX,
       event.absoluteY
     );
-    setBoxCoords({ x: event.x, y: event.y });
     if (relativeCoords) {
       setCoords(relativeCoords);
     }
@@ -30,11 +28,6 @@ const RelativeCoords = () => {
         x={coords.x.toFixed()} y=
         {coords.y.toFixed()}
       </Text>
-      <Text style={styles.coordsData}>Coordinates inside box:</Text>
-      <Text style={[styles.coordsData, styles.coords]}>
-        x={boxCoords.x.toFixed()} y=
-        {boxCoords.y.toFixed()}
-      </Text>
       <GestureDetector gesture={tapGesture}>
         <Animated.View ref={animatedRef} style={styles.innerView}>
           <Text style={styles.text}>Tap anywhere inside.</Text>