[docs] Update docs

packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx

@@ -0,0 +1,95 @@
+import { StyleSheet } from 'react-native';
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+  usePanGesture,
+  usePinchGesture,
+  useRotationGesture,
+  useSimultaneousGestures,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+export default function App() {
+  const offset = useSharedValue({ x: 0, y: 0 });
+  const start = useSharedValue({ x: 0, y: 0 });
+
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const rotation = useSharedValue(0);
+  const savedRotation = useSharedValue(0);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: offset.value.x },
+        { translateY: offset.value.y },
+        { scale: scale.value },
+        { rotateZ: `${rotation.value}rad` },
+      ],
+    };
+  });
+
+  const dragGesture = usePanGesture({
+    averageTouches: true,
+    onUpdate: (e) => {
+      offset.value = {
+        x: e.translationX + start.value.x,
+        y: e.translationY + start.value.y,
+      };
+    },
+    onDeactivate: () => {
+      start.value = {
+        x: offset.value.x,
+        y: offset.value.y,
+      };
+    },
+  });
+
+  const zoomGesture = usePinchGesture({
+    onUpdate: (e) => {
+      scale.value = savedScale.value * e.scale;
+    },
+    onDeactivate: () => {
+      savedScale.value = scale.value;
+    },
+  });
+
+  const rotationGesture = useRotationGesture({
+    onUpdate: (e) => {
+      rotation.value = savedRotation.value + e.rotation;
+    },
+    onDeactivate: () => {
+      savedRotation.value = rotation.value;
+    },
+  });
+
+  const composedGesture = useSimultaneousGestures(
+    dragGesture,
+    zoomGesture,
+    rotationGesture
+  );
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={composedGesture}>
+        <Animated.View style={[styles.box, animatedStyles]} />
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue',
+  },
+});

packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx

@@ -7,12 +7,12 @@ sidebar_position: 5
 
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
-Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the `onUpdate` callback. The event mapping of `Animated.event` depends on the `useNativeDriver` property.
+Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) callback. The event mapping of `Animated.event` depends on the [`useNativeDriver`](https://reactnative.dev/docs/animated#using-the-native-driver) property.
 
 When using Animated API, remember to set `useAnimated` property to `true`.
 
 :::danger Mixing Reanimated and Animated
-It is not possible to mix `Reanimated` and `Animated` within any of the [gesture detectors](/docs/fundamentals/gesture-detectors).
+It is not possible to mix Reanimated and Animated within any of the [gesture detectors](/docs/fundamentals/gesture-detectors).
 :::
 
 <CollapsibleCode 

packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx

@@ -8,9 +8,9 @@ sidebar_position: 7
 import { GestureEventFlowChart, TouchEventFlowChart } from '@site/src/examples/CallbacksFlowCharts'
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
-At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system in certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).
+At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).
 
-When `Reanimated` is installed, all callbacks are automatically workletized. For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions#automatic-workletization-of-gesture-callbacks) section.
+When Reanimated is installed, all callbacks are automatically workletized. For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions#automatic-workletization-of-gesture-callbacks) section.
 
 ## Callbacks flow