docs: Rewrite getRelativeCoords documentation page

packages/docs-reanimated/docs/utilities/getRelativeCoords.mdx

@@ -4,25 +4,68 @@ sidebar_position: 4
 
 # getRelativeCoords
 
-import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
+`getRelativeCoords` determines the location on the screen, relative to the given view.
 
-<DocsCompatibilityInfo />
+## Reference
 
-Determines the location on the screen, relative to the given view. It might be useful when there are only absolute coordinates available and you need coordinates relative to the parent.
+```tsx
+import { getRelativeCoords } from 'react-native-reanimated';
+
+const Comp = () => {
+  const animatedRef = useAnimatedRef();
+  // ...
+
+  const gestureHandler = useAnimatedGestureHandler({
+    onEnd: (event) => {
+      const coords = getRelativeCoords(
+        animatedRef,
+        event.absoluteX,
+        event.absoluteY
+      );
+    },
+  });
+
+  return (
+    <View ref={aref}>
+      <PanGestureHandler onGestureEvent={gestureHandler}>
+        <Animated.View style={[styles.box]} />
+      </PanGestureHandler>
+    </View>
+  );
+};
+```
+
+<details>
+<summary>Type definitions</summary>
+
+```typescript
+function getRelativeCoords(
+  animatedRef: AnimatedRef<Component>,
+  absoluteX: number,
+  absoluteY: number
+): ComponentCoords | null;
+
+interface ComponentCoords {
+  x: number;
+  y: number;
+}
+```
+
+</details>
 
 ### Arguments
 
-#### animatedRef
+#### `animatedRef`
 
 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.
 
-#### x
+#### `absoluteX`
 
-Absolute `x` coordinate.
+Number which is an absolute `x` coordinate.
 
-#### y
+#### `absoluteY`
 
-Absolute `y` coordinate
+Number which is an absolute `y` coordinate.
 
 ### Returns
 
@@ -33,23 +76,17 @@ Object which contains relative coordinates
 
 ### Example
 
-```js
-const Comp = () => {
-  const aref = useAnimatedRef();
-  // ...
+import RelativeCoords from '@site/src/examples/RelativeCoords';
+import RelativeCoordsSrc from '!!raw-loader!@site/src/examples/RelativeCoords';
 
-  const gestureHandler = useAnimatedGestureHandler({
-    onEnd: (event) => {
-      getRelativeCoords(aref, event.absoluteX, event.absoluteY);
-    },
-  });
+<InteractiveExample src={RelativeCoordsSrc} component={RelativeCoords} />
 
-  return (
-    <View ref={aref}>
-      <PanGestureHandler onGestureEvent={gestureHandler}>
-        <Animated.View style={[styles.box]} />
-      </PanGestureHandler>
-    </View>
-  );
-};
-```
+## Platform compatibility
+
+<div className="platform-compatibility">
+
+| Android | iOS | Web |
+| ------- | --- | --- |
+| ✅      | ✅  | ✅  |
+
+</div>

packages/docs-reanimated/src/examples/RelativeCoords.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedRef,
+  getRelativeCoords,
+} from 'react-native-reanimated';
+import { useColorScheme } from '@mui/material';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+const RelativeCoords = () => {
+  const animatedRef = useAnimatedRef();
+  const { colorScheme } = useColorScheme();
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+
+  const tapGesture = Gesture.Tap().onEnd((event) => {
+    const relativeCoords = getRelativeCoords(
+      animatedRef,
+      event.absoluteX,
+      event.absoluteY
+    );
+    if (relativeCoords) {
+      setCoords(relativeCoords);
+    }
+  });
+
+  const textColor =
+    colorScheme === 'light' ? styles.darkText : styles.lightText;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.coordsData, textColor]}>
+        Relative coordinates to parent:
+      </Text>
+      <Text style={[styles.coordsData, styles.coords, textColor]}>
+        x={coords.x.toFixed()} y=
+        {coords.y.toFixed()}
+      </Text>
+      <GestureDetector gesture={tapGesture}>
+        <Animated.View ref={animatedRef} style={styles.innerView}>
+          <Text style={styles.text}>Tap anywhere inside.</Text>
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  innerView: {
+    width: 300,
+    height: 300,
+    backgroundColor: 'var(--swm-purple-light-80)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 40,
+    cursor: 'pointer',
+  },
+  coordsData: {
+    fontSize: 20,
+    fontFamily: 'Aeonik',
+    color: 'var(--swm-navy-light-100)',
+  },
+  coords: {
+    marginBottom: 16,
+    fontWeight: '500',
+  },
+  text: {
+    color: 'var(--swm-off-white)',
+    fontFamily: 'Aeonik',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  lightText: {
+    color: 'var(--swm-off-white)',
+  },
+  darkText: {
+    color: 'var(--swm-navy-light-100)',
+  },
+});
+
+export default RelativeCoords;