docs: Sortable.Handle docs with example

packages/docs/docs/grid/examples/handle.mdx

@@ -0,0 +1,79 @@
+---
+sidebar_position: 6
+description: ''
+---
+
+# Custom Handle
+
+## Description
+
+The **Custom Handle** example demonstrates how to use a custom item drag handle.
+
+## Usage
+
+### Source Code
+
+```tsx
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { useCallback } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { SortableGridRenderItem } from 'react-native-sortables';
+import Sortable from 'react-native-sortables';
+
+const DATA = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);
+
+export default function PlaygroundExample() {
+  const renderItem = useCallback<SortableGridRenderItem<string>>(
+    ({ item }) => (
+      <View style={styles.card}>
+        <Text style={styles.text}>{item}</Text>
+        {/* Wraps the handle component (an icon in this case) */}
+        <Sortable.Handle>
+          <FontAwesomeIcon color='white' icon={faGripVertical} />
+        </Sortable.Handle>
+      </View>
+    ),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <Sortable.Grid
+        activeItemScale={1.05}
+        columns={1}
+        data={DATA}
+        overDrag='vertical'
+        renderItem={renderItem}
+        rowGap={10}
+        customHandle // must be set to use a custom handle
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    backgroundColor: '#36877F',
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 24
+  },
+  container: {
+    padding: 16
+  },
+  text: {
+    color: 'white',
+    flex: 1,
+    fontWeight: 'bold'
+  }
+});
+```
+
+## Result
+
+import handleVideo from '@site/static/video/grid-custom-handle.mp4';
+
+<video autoPlay loop muted width='300px' src={handleVideo} />

packages/docs/docs/helper-components/handle.mdx

@@ -0,0 +1,60 @@
+---
+sidebar_position: 1
+description: 'Component that allows to drag an item by a specific area'
+---
+
+# Handle
+
+## Overview
+
+The **Handle** component allows you to drag an item by a specific area (part of the item) instead of the whole item.
+
+## Usage
+
+:::info
+
+For the complete usage example, refer to the [Handle](/grid/examples/handle) example.
+
+:::
+
+Use this component within a sortable component's child (item) component.
+
+```tsx
+import Sortable from 'react-native-sortables';
+
+// ... other components
+<Sortable.Handle>
+  {/* ... other components */}
+  <HandleComponent />
+  {/* ... other components */}
+</Sortable.Handle>;
+// ... other components
+```
+
+:::important
+
+To use a custom handle component, you **must** set the `customHandle` prop on the sortable component.
+
+:::
+
+## Props
+
+### mode
+
+Determines the reordering behavior of the item.
+
+| type                                        | default       | required |
+| ------------------------------------------- | ------------- | -------- |
+| `'draggable' \| 'fixed' \| 'non-draggable'` | `'draggable'` | NO       |
+
+- `'draggable'` - the item **can be dragged** and **moves** when other items are reordered.
+- `'non-draggable'` - the item **cannot be dragged** but **moves** when other items are reordered.
+- `'fixed'` - the item **cannot be dragged** and **does not move** when other items are reordered.
+
+### children
+
+The handle component (can be anything, e.g. an icon, image, etc.).
+
+| type        | default | required |
+| ----------- | ------- | -------- |
+| `ReactNode` | NO      | NO       |

packages/docs/docs/helper-components/layer.mdx

@@ -1,6 +1,6 @@
 ---
-sidebar_position: 1
-description: ''
+sidebar_position: 3
+description: 'Component managing zIndex when an item is being dragged'
 ---
 
 # Layer
@@ -31,19 +31,15 @@ The **Sortable Layer** component should be used only when necessary, i.e. if you
 ```tsx
 import Sortable from 'react-native-sortables';
 
-function MyComponent() {
-  return (
-    // ... other components
-    <Sortable.Layer>
-      {/* ... other components */}
-      <Sortable.Grid // or Sortable.Flex
-      // ... sortable grid props
-      />
-      {/* ... other components */}
-    </Sortable.Layer>
-    // ... other components
-  );
-}
+// ... other components
+<Sortable.Layer>
+  {/* ... other components */}
+  <Sortable.Grid // or Sortable.Flex
+  // ... sortable grid props
+  />
+  {/* ... other components */}
+</Sortable.Layer>;
+// ... other components
 ```
 
 ## Props

packages/docs/docs/helper-components/touchables.mdx

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 2
-description: ''
+description: 'Components that work well with sortable component gesture detectors'
 ---
 
 # Touchables
@@ -24,45 +24,25 @@ Use these components when you need to add **interactive elements** (buttons, lin
 
 ## Usage
 
-Use these components withing a sortable component's child (item) component.
+:::info
 
-```tsx
-import Sortable from 'react-native-sortables';
+For the complete usage example, refer to the [Touchables](/grid/examples/touchables) example.
 
-function Item({ item }: { item: string }) {
-  return (
-    // ... other components
-    <Sortable.Pressable
-      onPress={() => {
-        console.log('pressed');
-      }}>
-      {/* ... other components */}
-    </Sortable.Pressable>
-    // ... other components
-  );
-}
-```
+:::
 
-And, for example, if you use the **Sortable Grid** component:
+Use these components withing a sortable component's child (item) component.
 
 ```tsx
-import { useCallback } from 'react';
 import Sortable from 'react-native-sortables';
-import type { SortableGridRenderItem } from 'react-native-sortables';
-
-export default function Grid() {
-  const renderItem = useCallback<SortableGridRenderItem<string>>(
-    ({ item }) => <Item item={item} />,
-    []
-  );
-
-  return (
-    <Sortable.Grid
-      renderItem={renderItem}
-      // ... other props
-    />
-  );
-}
+
+// ... other components
+<Sortable.Pressable
+  onPress={() => {
+    console.log('pressed');
+  }}>
+  {/* ... other components */}
+</Sortable.Pressable>;
+// ... other components
 ```
 
 ## Props