[docs] Add platform badges

packages/docs-gesture-handler/docs/components/pressable.mdx

@@ -7,133 +7,255 @@ sidebar_label: Pressable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
-<GifGallery>
-  <img src={useBaseUrl('gifs/pressable.gif')} width="70%" />
-</GifGallery>
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
 
 :::info
 This component is a drop-in replacement for the `Pressable` component.
 :::
 
-`Pressable` is a component that can detect various stages of tap, press, and hover interactions on any of its children.
+<GifGallery>
+  <img src={useBaseUrl('gifs/pressable.gif')} width="70%" />
+</GifGallery> 
 
-### Usage:
+`Pressable` is a component that can detect various stages of tap, press, and hover interactions on any of its children.
 
-To use `Pressable`, import it in the following way:
+To use `Pressable`, ensure that your app is wrapped in `GestureHandlerRootView` and import it as follows:
 
-```js
+```ts
 import { Pressable } from 'react-native-gesture-handler';
 ```
 
 ## Properties
 
-### `children`
+### children
+
+```ts
+children?:
+  | React.ReactNode
+  | ((state: PressableStateCallbackType) => React.ReactNode);
+```
+
+Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.
+
+### style
+
+```ts
+style?:
+  | StyleProp<ViewStyle>
+  | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+```
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+### onPress
+
+```ts
+onPress?: null | ((event: PressableEvent) => void);
+```
+
+Called after [`onPressOut`](#onpressout) when a single tap gesture is detected. Details about the event object can be found in the [PressableEvent](#pressableevent) section below.
+
+### onPressIn
+
+```ts
+onPressIn?: null | ((event: PressableEvent) => void);
+```
+
+Called before `onPress` when a touch is engaged. Details about the event object can be found in the [PressableEvent](#pressableevent) section below.
+
+### onPressOut
+
+```ts
+onPressOut?: null | ((event: PressableEvent) => void);
+```
+
+Called before `onPress` when a touch is released (before [`onPress`](#onpress)). Details about the event object can be found in the [PressableEvent](#pressableevent) section below.
 
-either children or a render function that receives a boolean reflecting whether
-the component is currently pressed.
+### onLongPress
 
-### `style`
+```ts
+onLongPress?: null | ((event: PressableEvent) => void);
+```
 
-either view styles or a function that receives a boolean reflecting whether
-the component is currently pressed and returns view styles.
+Called immediately after pointer has been down for at least [`delayLongPress`](#delaylongpress) milliseconds.
 
-### `onPress`
+After `onLongPress` has been called, [`onPressOut`](#onpressout) will be called as soon as the pointer is lifted and [`onPress`](#onpress) will not be called at all.
 
-called after `onPressOut` when a single tap gesture is detected.
+### cancelable
 
-### `onPressIn`
+```ts
+cancelable?: null | boolean;
+```
 
-called before `onPress` when a touch is engaged.
+Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
 
-### `onPressOut`
+<HeaderWithBadge platforms={['web']}>
+### onHoverIn
+</HeaderWithBadge>
 
-called before `onPress` when a touch is released.
+```ts
+onHoverIn?: null | ((event: PressableEvent) => void);
+```
 
-### `onLongPress`
+Called when pointer is hovering over the element.
 
-called immediately after pointer has been down for at least `delayLongPress` milliseconds (`500` ms by default).
+<HeaderWithBadge platforms={['web']}>
+### onHoverOut
+</HeaderWithBadge>
 
-After `onLongPress` has been called, `onPressOut` will be called as soon as the pointer is lifted and `onPress` will not be called at all.
+```ts
+onHoverOut?: null | ((event: PressableEvent) => void);
+```
 
-### `cancelable`
+Called when pointer stops hovering over the element.
 
-whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
+<HeaderWithBadge platforms={['web']}>
+### delayHoverIn
+</HeaderWithBadge>
 
-### `onHoverIn` (Web only)
+```ts
+delayHoverIn?: number | null;
+```
 
-called when pointer is hovering over the element.
+Duration to wait after hover in before calling `onHoverIn`.
 
-### `onHoverOut` (Web only)
+<HeaderWithBadge platforms={['web']}>
+### delayHoverOut
+</HeaderWithBadge>
 
-called when pointer stops hovering over the element.
+```ts
+delayHoverOut?: number | null;
+```
 
-### `delayHoverIn` (Web only)
+Duration to wait after hover out before calling `onHoverOut`.
 
-duration to wait after hover in before calling `onHoverIn`.
+### delayLongPress
 
-### `delayHoverOut` (Web only)
+```ts
+delayLongPress?: null | number;
+```
 
-duration to wait after hover out before calling `onHoverOut`.
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. Default value is `500` ms.
 
-### `delayLongPress`
+### disabled
 
-duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+```ts
+disabled?: null | boolean;
+```
 
-### `disabled`
+Whether the `Pressable` behavior is disabled.
 
-whether the `Pressable` behavior is disabled.
+<HeaderWithBadge platforms={['android', 'iOS']}>
+### hitSlop
+</HeaderWithBadge>
 
-### `hitSlop` (Android & iOS only)
+```ts
+hitSlop?: null | Insets | number;
+```
 
-additional distance outside of the view in which a press is detected and `onPressIn` is triggered.
+Additional distance outside of the view in which a press is detected and [`onPressIn`](#onpressin) is triggered.
 
-Accepts values of type `number` or [`Rect`](https://reactnative.dev/docs/rect)
+The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-### `pressRetentionOffset` (Android & iOS only)
+<HeaderWithBadge platforms={['android', 'iOS']}>
+### pressRetentionOffset
+</HeaderWithBadge>
 
-additional distance outside of the view (or `hitSlop` if present) in which a touch is considered a
-press before `onPressOut` is triggered.
+```ts
+pressRetentionOffset?: null | Insets | number;
+```
 
-Accepts values of type `number` or [`Rect`](https://reactnative.dev/docs/rect)
+Additional distance outside of the view (or [`hitSlop`](#hitslop) if present) in which a touch is considered a
+press before [`onPressOut`](#onpressout) is triggered.
 
-### `android_disableSound` (Android only)
+The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-if `true`, doesn't play system sound on touch.
+<HeaderWithBadge platforms={['android']}>
+### android_disableSound
+</HeaderWithBadge>
 
-### `android_ripple` (Android only)
+```ts
+android_disableSound?: null | boolean;
+```
 
-enables the Android ripple effect and configures its color, radius and other parameters.
+If `true`, doesn't play system sound on touch.
 
-Accepts values of type [`RippleConfig`](https://reactnative.dev/docs/pressable#rippleconfig)
+<HeaderWithBadge platforms={['android']}>
+### android_ripple
+</HeaderWithBadge>
 
-### `testOnly_pressed`
+```ts
+android_ripple?: null | PressableAndroidRippleConfig;
+```
 
-used only for documentation or testing (e.g. snapshot testing).
+Enables the Android [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) effect and configures its color, radius and other parameters.
 
-### `unstable_pressDelay`
+Accepts values of type [`RippleConfig`](https://reactnative.dev/docs/pressable#rippleconfig).
 
-duration (in milliseconds) to wait after press down before calling `onPressIn`.
+### testOnly_pressed
 
-### Example:
+```ts
+testOnly_pressed?: null | boolean;
+```
 
-See the full [pressable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/new_api/pressable/index.tsx) from `GestureHandler` example app.
+Used only for documentation or testing (e.g. snapshot testing).
 
-import GestureStateFlowExample from '@site/src/examples/GestureStateFlowExample';
+### unstable_pressDelay
 
-```js
+```ts
+unstable_pressDelay?: number | undefined;
+```
+
+Duration (in milliseconds) to wait after press down before calling [`onPressIn`](#onpressin).
+
+## PressableEvent
+
+All `Pressable` callbacks receive an event object as a parameter, which is of type `PressableEvent` and has the following structure:
+
+```ts
+export type PressableEvent = { nativeEvent: InnerPressableEvent };
+
+export type InnerPressableEvent = {
+  changedTouches: InnerPressableEvent[];
+  identifier: number;
+  locationX: number;
+  locationY: number;
+  pageX: number;
+  pageY: number;
+  target: number;
+  timestamp: number;
+  touches: InnerPressableEvent[];
+  force?: number;
+};
+```
+
+## Example
+
+See the full example in [Gesture Handler repository](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/legacy/v2_api/pressable/index.tsx).
+
+<CollapsibleCode 
+label="Show full example"
+expandedLabel="Hide full example"
+lineBounds={[5, 20]}
+src={`
 import { View, Text, StyleSheet } from 'react-native';
-import { Pressable } from 'react-native-gesture-handler';
+import {
+  GestureHandlerRootView,
+  Pressable,
+} from 'react-native-gesture-handler';
 
 export default function Example() {
   return (
-    <Pressable
-      style={({ pressed }) => (pressed ? styles.highlight : styles.pressable)}
-      hitSlop={20}
-      pressRetentionOffset={20}>
-      <View style={styles.textWrapper}>
-        <Text style={styles.text}>Pressable!</Text>
-      </View>
-    </Pressable>
+    <GestureHandlerRootView>
+      <Pressable
+        style={({ pressed }) => (pressed ? styles.highlight : styles.pressable)}
+        hitSlop={20}
+        pressRetentionOffset={20}>
+        <View style={styles.textWrapper}>
+          <Text style={styles.text}>Pressable!</Text>
+        </View>
+      </Pressable>
+    </GestureHandlerRootView>
   );
 }
 
@@ -159,4 +281,4 @@ const styles = StyleSheet.create({
     color: 'black',
   },
 });
-```
+`}/>