software-mansion · patrycjakalinska · Mar 10, 2026 · Mar 11, 2026 · Mar 11, 2026 · Mar 11, 2026
diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx
@@ -7,8 +7,6 @@ sidebar_label: Buttons
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
-import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
-
 <GifGallery>
   <img src={useBaseUrl('gifs/samplebutton.gif')} width="280" />
 </GifGallery>
@@ -39,19 +37,19 @@ exclusive?: boolean;
 
 Defines if more than one button could be pressed simultaneously. By default set to `true`.
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### rippleColor
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 rippleColor?: number | ColorValue | null;
 ```
 
 Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### rippleRadius
-</HeaderWithBadges>
+</Badges>
 
 
 ```ts
@@ -60,29 +58,29 @@ rippleRadius?: number | null;
 
 Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### borderless
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 borderless?: boolean;
 ```
 
 If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### foreground
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 foreground?: boolean;
 ```
 
 Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### touchSoundDisabled
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 touchSoundDisabled?: boolean;
@@ -140,9 +138,9 @@ underlayColor?: string;
 
 Background color that will be dimmed when button is in active state.
 
-<HeaderWithBadges platforms={['iOS']}>
+<Badges platforms={['ios']}>
 ### activeOpacity
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 activeOpacity?: number;
@@ -154,9 +152,9 @@ Opacity applied to the underlay when button is in active state.
 
 This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:
 
-<HeaderWithBadges platforms={['iOS']}>
+<Badges platforms={['ios']}>
 ### activeOpacity
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 activeOpacity?: number;

diff --git a/packages/docs-gesture-handler/docs/components/pressable.mdx b/packages/docs-gesture-handler/docs/components/pressable.mdx
@@ -7,8 +7,6 @@ sidebar_label: Pressable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
-import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
-
 :::info
 This component is a drop-in replacement for the `Pressable` component.
 :::
@@ -89,39 +87,39 @@ cancelable?: null | boolean;
 
 Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
 
-<HeaderWithBadges platforms={['android', 'web']}>
+<Badges platforms={['android', 'web']}>
 ### onHoverIn
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 onHoverIn?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer is hovering over the element.
 
-<HeaderWithBadges platforms={['android', 'web']}>
+<Badges platforms={['android', 'web']}>
 ### onHoverOut
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 onHoverOut?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer stops hovering over the element.
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### delayHoverIn
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 delayHoverIn?: number | null;
 ```
 
 Duration to wait after hover in before calling `onHoverIn`.
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### delayHoverOut
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 delayHoverOut?: number | null;
@@ -145,9 +143,9 @@ disabled?: null | boolean;
 
 Whether the `Pressable` behavior is disabled.
 
-<HeaderWithBadges platforms={['android', 'iOS']}>
+<Badges platforms={['android', 'ios']}>
 ### hitSlop
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 hitSlop?: null | Insets | number;
@@ -157,9 +155,9 @@ Additional distance outside of the view in which a press is detected and [`onPre
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-<HeaderWithBadges platforms={['android', 'iOS']}>
+<Badges platforms={['android', 'ios']}>
 ### pressRetentionOffset
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 pressRetentionOffset?: null | Insets | number;
@@ -170,19 +168,19 @@ press before [`onPressOut`](#onpressout) is triggered.
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### android_disableSound
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 android_disableSound?: null | boolean;
 ```
 
 If `true`, doesn't play system sound on touch.
 
-<HeaderWithBadges platforms={['android']}>
+<Badges platforms={['android']}>
 ### android_ripple
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 android_ripple?: null | PressableAndroidRippleConfig;

diff --git a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
@@ -6,8 +6,6 @@ sidebar_label: Reanimated Drawer Layout
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
-
 import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx';
 
 :::info
@@ -221,9 +219,9 @@ export enum DrawerState {
 
 A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
 
-<HeaderWithBadges platforms={['iOS']}>
+<Badges platforms={['ios']}>
 ### enableTrackpadTwoFingerGesture
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
@@ -242,29 +240,29 @@ Either a component rendered in the content view or a function. If `children` is
 
 <MouseButtonProp />
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### enableContextMenu
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 enableContextMenu: boolean;
 ```
 
 Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified.
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### userSelect
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 userSelect: 'none' | 'auto' | 'text';
 ```
 
 This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### activeCursor
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 activeCursor: ActiveCursor;

diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
@@ -7,8 +7,6 @@ sidebar_label: Reanimated Swipeable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery'
 
-import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
-
 :::info
 This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 :::
@@ -242,9 +240,9 @@ blocksExternalGesture?: AnyGesture | AnyGesture[];
 
 Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)).
 
-<HeaderWithBadges platforms={['iOS']}>
+<Badges platforms={['ios']}>
 ### enableTrackpadTwoFingerGesture
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;

diff --git a/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx
@@ -5,8 +5,6 @@ sidebar_label: Integration with Animated
 sidebar_position: 9
 ---
 
-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`](/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`.

diff --git a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx
@@ -6,7 +6,6 @@ sidebar_position: 6
 ---
 
 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 under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).
 

diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx
@@ -5,8 +5,6 @@ sidebar_label: Gesture composition & interactions
 sidebar_position: 5
 ---
 
-import CollapsibleCode from '@site/src/components/CollapsibleCode';
-
 import Competing from '!!raw-loader!.//\_examples/hooks/Competing';
 import Simultaneous from '!!raw-loader!.//\_examples/hooks/Simultaneous';
 import Exclusive from '!!raw-loader!.//\_examples/hooks/Exclusive';

diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx
@@ -5,9 +5,6 @@ sidebar_label: Gesture detectors
 sidebar_position: 4
 ---
 
-import CollapsibleCode from '@site/src/components/CollapsibleCode';
-import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
-
 ## Gesture Detector
 
 The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook-based API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section.
@@ -190,29 +187,29 @@ gesture: SingleGesture | ComposedGesture;
 
 A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition).
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### userSelect
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 userSelect: 'none' | 'auto' | 'text';
 ```
 
 This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### touchAction
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 touchAction: TouchAction;
 ```
 
 This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.
 
-<HeaderWithBadges platforms={['web']}>
+<Badges platforms={['web']}>
 ### enableContextMenu
-</HeaderWithBadges>
+</Badges>
 
 ```ts
 enableContextMenu: boolean;

diff --git a/packages/docs-gesture-handler/docs/fundamentals/introduction.md b/packages/docs-gesture-handler/docs/fundamentals/introduction.md
@@ -3,7 +3,7 @@ id: introduction
 title: Introduction
 sidebar_label: Introduction
 sidebar_position: 1
-slug: /
+slug: /fundamentals/introduction
 ---
 
 Gesture Handler provides a declarative API exposing the native platform's touch and gesture system to React Native. It's designed to be a replacement of React Native's built in touch system called [Gesture Responder System](http://reactnative.dev/docs/gesture-responder-system). Using native touch handling allows to address the performance limitations of React Native's Gesture Responder System. It also provides more control over the platform's native components that can handle gestures on their own. If you want to learn more, we recommend [this talk](https://www.youtube.com/watch?v=V8maYc4R2G0) by [Krzysztof Magiera](https://twitter.com/kzzzf) in which he explains issues with the responder system.

diff --git a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx
@@ -5,8 +5,6 @@ sidebar_label: Integration with Reanimated
 sidebar_position: 8
 ---
 
-import CollapsibleCode from '@site/src/components/CollapsibleCode';
-
 [`GestureDetector`](/docs/fundamentals/gesture-detectors) will decide whether to use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to process provided gestures based on their configuration. If any of the callbacks is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) and Reanimated is not explicitly [turned off](#disabling-reanimated), tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread.
 
 ## Automatic [workletization](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#to-workletize) of gesture callbacks

diff --git a/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx b/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx
@@ -5,8 +5,6 @@ sidebar_label: State manager
 sidebar_position: 7
 ---
 
-import CollapsibleCode from '@site/src/components/CollapsibleCode';
-
 RNGH3 allows to manually control [gestures lifecycle](/docs/under-the-hood/state) by using [`GestureStateManager`](#gesturestatemanager).
 
 ## State management
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,6 @@ sidebar_position: 6 @@
     ---
     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 under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).
@@ Expand Down @@