diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
index df8ec20..55d8618 100644
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -1,9 +1,5 @@
 name: Deploy documentation to Github Pages
 on:
-  push:
-    branches:
-      - main
-
   workflow_dispatch:
 
 permissions:
diff --git a/README.md b/README.md
index c48cd95..1a55667 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+>[!Note]
+> Are you watching from NPM website? NPM's markdown renderer is pretty bad, better watch it on [github](https://github.com/Glazzes/react-native-zoom-toolkit).
+
 <div>
   <h1 align="center">React Native Zoom Toolkit</h1>
 </div>
@@ -6,7 +9,7 @@
   <h4 align="center">A set of utilities and components for common pinch to zoom feature requirements</h4>
 </div>
 
-| &nbsp;SnapbackZoom&nbsp; | ResumableZoom | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CropZoom&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
+| SnapbackZoom | ResumableZoom | CropZoom |
 |--------------|---------------|----------|
 |<video src="https://github.com/Glazzes/react-native-zoomable/assets/52082794/19f73880-96ee-4eb4-b68f-53191faf4027" width="100%" controls> | <video src="https://github.com/Glazzes/react-native-zoom-toolkit/assets/52082794/f07a8916-e115-4af5-ae6d-932fa86a5e53" width="100%" controls> | <video src="https://github.com/Glazzes/react-native-zoomable/assets/52082794/7253f7d5-42b0-4426-92ca-5b6772e10b5e" width="100%" controls> |
  
@@ -26,7 +29,7 @@ The idea behind this library is to provide a set of components and utilities for
 - **SnapBackZoom:** Zoom in and snap back, this component automatically snaps back to its original position once the gesture ends, making it ideal for previews.
 - **ResumableZoom**: Pick up where you left last time! This component remembers your previous interactions with it, just the same way it works in your Android/IOS OS integrated gallery application, making it ideal for detail screens and gallery screens.
 - **CropZoom:** An ideal, practical and unopinionated component for image and video cropping needs.
-- **Mirror:**: Mirror the current pinch gesture transformations to any other component you want.
+- **Mirror:** Mirror the current pinch gesture transformations to any other component you want.
 - **Expo Go Compatible**: This library has been written in typescript only with supported modules by the expo go app.
 
 ## Documentation
diff --git a/docs/docs/.vitepress/config.mts b/docs/docs/.vitepress/config.mts
index bcb4225..bd39c53 100644
--- a/docs/docs/.vitepress/config.mts
+++ b/docs/docs/.vitepress/config.mts
@@ -12,7 +12,7 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      {text: '1.0.0', items: [
+      {text: '1.0.1', items: [
         {text: 'Releases', link: 'https://github.com/Glazzes/react-native-zoom-toolkit/releases'},
         {text: 'Contributing', link: 'https://github.com/Glazzes/react-native-zoom-toolkit/blob/main/CONTRIBUTING.md'},
       ]}
diff --git a/docs/docs/components/cropzoom.md b/docs/docs/components/cropzoom.md
index 8a8fe6a..2793583 100644
--- a/docs/docs/components/cropzoom.md
+++ b/docs/docs/components/cropzoom.md
@@ -13,7 +13,7 @@ An ideal, practical and unopinionated component for image and video cropping nee
 - **Fixed size:** Enforce all resulting crops to be of a fixed size, ideal for profile pictures.
 
 This component comes with a handy algorithm to perform cropping operations for you, however you will need the help a of deidicated library for this task.
-- see [Use Crop Zoom with Expo Image Manipulator](../guides/cropzoomexpo)
+- see [Use Crop Zoom with Expo Image Manipulator](../guides/cropzoomexpo) guide.
 
 The next video footage is taken from the [Example app](https://github.com/Glazzes/react-native-zoom-toolkit/tree/main/example).
 
@@ -30,6 +30,7 @@ Its usage is pretty straight forward, just wrap a component of your choice with
 
 ::: tip Remember
 - This component uses `flex: 1` style property therefore it will attempt to take all available space, its minimum dimensions are the values provided to `cropSize` property.
+- The crop area is centered using `justifyContent` and `alignItems` center.
 - This component calculates the dimensions needed to meet the `resolution` property's aspect ratio, therefore your images and videos must use `{ flex: 1 }` style property so they cover the gesture detection area properly.
 :::
 
@@ -87,7 +88,7 @@ For an overlay mode example, see Example App's [CropZoom Skia Example](https://g
 |------|---------|----------|-----------------|
 | `CropMode` | `CropMode.MANAGED` | `No`   | see [CropMode](#cropmode-enum) |
 
-Selects which mode to use.
+Select which one of the two available modes to use.
 
 ### cropSize
 | Type | Required |
@@ -101,14 +102,14 @@ Size of the cropping area.
 |------|----------|
 | `{ width: number; height: number; }` | `Yes`    |
 
-Resolution of your image/video or how big whatever you are trying to crop really is.
+Resolution of your image, video or how big whatever you are trying to crop really is.
 
 ### debug
 | Type | Default | Required |
 |------|---------|----------|
 | `boolean` | `false` | `No`    |
 
-Highlights the cropping area with a red-ish color as well as the gesture detection area with a light green color, this property is meant to be used when `mode` property is set to `CropMode.OVERLAY` so you can align your underlying component with it properly.
+Highlights the cropping area with a red-ish color as well as the gesture detection area with a light green color, use it to align your `OverlayComponent` with the crop area properly.
 
 ::: tip Note
 In case you're color blind and/or have any trouble differentiating colors, please consider opening an issue suggesting a suitable pair of colors.
@@ -133,14 +134,14 @@ Maximum scale value allowed by the pinch gesture, negative values instruct the c
 |------|---------|----------|-----------------|
 | `PanMode` | `PanMode.FREE` | `No`    | see [PanMode](#panmode-enum) |
 
-Which one of the three available pan modes to use.
+Select which one of the three available pan modes to use.
 
 ### scaleMode
 | Type | Default | Required | Additional Info |
 |------|---------|----------|-----------------|
 | `ScaleMode` | `ScaleMode.BOUNCE` | `No`    | see [ScaleMode](#scalemode-enum) |
 
-Which one of the two available scale modes to use.
+Select which one of the two available scale modes to use.
 
 ### panWithPinch
 | Type | Default | Required |
@@ -154,7 +155,7 @@ Lets the user drag the component around as they pinch, it also provides a more a
 |------|---------|-----------------|
 | `function` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
 
-Callback triggered when a tap is made, receives a tap gesture event as its only argument.
+Callback triggered when the user taps the wrapped component once, receives a tap gesture event as its only argument.
 
 ### onPanStart
 | Type | Default | Additional Info |
@@ -189,9 +190,7 @@ Callback triggered as soon as the user lift their fingers off the screen after p
 |------|---------|----------|----------------|
 | `worklet function` | `undefined` | `No`    | see [worklets](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/) |
 
-Callback triggered as the user interacts with the component, it also means interacting through its [methods](#methods), receives an object of type [CropZoomState](#cropzoomstate) as its only argument.
-
-Ideal if you need to mirror the internal state of the component to some other component as it updates.
+Worklet callback triggered as the user interacts with the component, it also means interacting through its [methods](#methods), receives an object of type [CropZoomState](#cropzoomstate) as its only argument, ideal if you need to mirror the internal state of the component to some other component as it updates.
 
 
 ### OverlayComponent
@@ -201,7 +200,9 @@ Ideal if you need to mirror the internal state of the component to some other co
 
 A function that returns a React Component, such component will sit between your desired component to crop and the gesture detector, for instance you can pass an svg component with a "hole" in it.
 
-Previous condition: `mode` property is set to `CropMode.MANAGED` (default value).
+::: tip Condition
+`mode` property must be set to `CropMode.MANAGED` (default value).
+:::
 
 
 ## Methods
@@ -218,7 +219,8 @@ ref.current?.crop(200);
 ```
 
 ### crop
-Map all the transformations applied to your component into a simple and ready to use object specifying the context necessary for a crop operation, such object must be used along with a library capable of cropping images and/or videos, for instance [Expo Image Manipulator](https://docs.expo.dev/versions/latest/sdk/imagemanipulator/).
+Map all the transformations applied to your component into a simple and ready to use object specifying the context necessary for a crop operation, such object must be used along with a library capable of cropping images and/or videos, for instance Expo Image Manipulator, see [Use Crop Zoom with Expo Image Manipulator](../guides/cropzoomexpo) guide.
+
 - Arguments
 
 | Name | Type | Default | Description |
@@ -228,7 +230,7 @@ Map all the transformations applied to your component into a simple and ready to
 - Returns [CropContextResult](#cropcontextresult)
 
 ::: warning Beware
-All crops resulting from this method may be subject to one pixel margin of error, this is an intentional behavior in order to prevent some image cropping libraries from crashing your app.
+If you called this method with the `fixedWidth` argument, resulting crops may be subject to one pixel margin of error, this is an intentional behavior in order to prevent some image cropping libraries from crashing your app.
 :::
 
 ### rotate
diff --git a/docs/docs/components/resumablezoom.md b/docs/docs/components/resumablezoom.md
index 2673868..aa8fe70 100644
--- a/docs/docs/components/resumablezoom.md
+++ b/docs/docs/components/resumablezoom.md
@@ -86,21 +86,21 @@ Minimum scale value allowed by the pinch gesture, expects values greater than or
 
 Maximum scale value allowed by the pinch gesture, expects values bigger than or equals one.
 
-Alternatively you can pass a resolution object, for instance an HD image resolution `{ width: 1920, height: 1080 }`; this will instruct the component to calculate `maxScale` in such a way it's a value just before images and videos start getting pixelated.
+Alternatively you can pass the resolution of your image/video, for instance `{ width: 1920, height: 1080 }`; this will instruct the component to calculate `maxScale`  in such a way it's a value just before images and videos start getting pixelated.
 
 ### panMode
 | Type | Default | Additional Info |
 |------|---------|-----------------|
 | `PanMode` | `PanMode.CLAMP` | see [PanMode](#panmode-enum) |
 
-Which one of the three available pan modes to use.
+Select which one of the three available pan modes to use.
 
 ### scaleMode
 | Type | Default | Additional Info |
 |------|---------|-----------------|
 | `ScaleMode` | `ScaleMode.BOUNCE` | see [ScaleMode](#scalemode-enum) |
 
-Which one of the two available scale modes to use.
+Select which one of the two available scale modes to use.
 
 ### decay
 | Type | Default | Additional Info |
@@ -142,17 +142,17 @@ Lets the user drag the component around as they pinch, it also provides a more a
 |------|---------|-----------------|
 | `function` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
 
-Callback triggered when a tap is made, receives a tap gesture event as its only argument.
+Callback triggered when the user taps the wrapped component once, receives a tap gesture event as its only argument.
 
 ### onSwipeRight
 | Type | Default |
 |------|---------|
 | `function` | `undefined` |
 
-Callback triggered when a swipe to the right gesture has occurred.
+Callback triggered when the user swipes to the right.
 
 ::: tip Condition
-This callback is only triggered when your component is at its minimum scale and `panMode` property is set to `PanMode.CLAMP`
+This callback is only triggered when your component is at its minimum scale and `panMode` property is set to `PanMode.CLAMP` (default value).
 :::
 
 ### onSwipeLeft
@@ -160,10 +160,10 @@ This callback is only triggered when your component is at its minimum scale and
 |------|---------|
 | `function` | `undefined` |
 
-Callback triggered when a swipe to the left gesture has occurred.
+Callback triggered when the user swipes to the left.
 
 ::: tip Condition
-This callback is only triggered when your component is at its minimum scale and `panMode` property is set to `PanMode.CLAMP`
+This callback is only triggered when your component is at its minimum scale and `panMode` property is set to `PanMode.CLAMP` (default value).
 :::
 
 ### onPanStart
@@ -199,7 +199,7 @@ Callback triggered as soon as the user lifts their fingers off the screen after
 |------|---------|----------------|
 | `worklet function` | `undefined` | see [worklets](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/) |
 
-Callback triggered as the user interacts with the component, it also means interacting through its [methods](#methods), receives an object of type [ResumableZoomState](#resumablezoomstate) as its only argument.
+Worklet callback triggered as the user interacts with the component, it also means interacting through its [methods](#methods), receives an object of type [ResumableZoomState](#resumablezoomstate) as its only argument.
 
 Ideal if you need to mirror the internal state of the component to some other component as it updates.
 
@@ -208,10 +208,12 @@ Ideal if you need to mirror the internal state of the component to some other co
 |------|---------|----------------|
 | `worklet function` | `undefined` | see [worklets](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/) |
 
-Callback triggered when the component has been panned beyond the boundaries defined by its enclosing container, ideal property to mimic scroll behavior.
+Worklet callback triggered when the component has been panned beyond the boundaries defined by its enclosing container, receives as an argument how much the component has been panned beyond its enclosing container boundaries, positive values from the right and negative values from the left.
+
+Ideal to mimic scroll behavior.
 
 ::: tip Condition
-This callback is only triggered when the `panMode` property is set to `PanMode.CLAMP`.
+This callback is only triggered when the `panMode` property is set to `PanMode.CLAMP` (default value).
 :::
 
 ## Methods
diff --git a/docs/docs/components/snapbackzoom.md b/docs/docs/components/snapbackzoom.md
index e0c7c1f..398c5ea 100644
--- a/docs/docs/components/snapbackzoom.md
+++ b/docs/docs/components/snapbackzoom.md
@@ -93,14 +93,14 @@ Enables or disable gestures, when gestures are disabled your component can detec
 |------|---------|-----------------|
 | `function` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
 
-Callback triggered when a single tap is made, receives a tap gesture event as its only argument.
+Callback triggered when the user taps the wrapped component once, receives a tap gesture event as its only argument.
 
 ### onDoubleTap
 | Type | Default | Additional Info |
 |------|---------|-----------------|
 | `function` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
 
-Callback triggered when a double tap is made, receives a tap gesture event as its only argument.
+Callback triggered when the user taps the wrapped component twice, receives a tap gesture event as its only argument.
 
 ### onPinchStart
 | Type | Default | Additional Info |
@@ -121,8 +121,7 @@ Callback triggered as soon as the user lifts their fingers off the screen after
 |------|---------|-----------------|
 | `worklet function` | `undefined` | see [worklets](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/) |
 
-Callback triggered from the moment pinch gesture starts until the snap back animation finishes, 
-receives an object of type [SnapbackZoomState](#snapbackzoomstate) as its only argument.
+Worklet callback triggered from the moment pinch gesture starts until the snap back animation finishes, receives an object of type [SnapbackZoomState](#snapbackzoomstate) as its only argument.
 
 Ideal if you need to mirror the current state of the gesture to some other component.
 
@@ -169,7 +168,7 @@ At a scale of one your image is a tile of 200x200 pixel size, in other words a s
 | `width` | `number` | Inital width measurement of your component |
 | `height` | `number` | Inital height measurement of your component |
 | `resizedWidth` | `number \| undefined` | Current width measurement of your component, if `resizeConfig` property is `undefined`, this value will be `undefined` too |
-| `resizedWidth` | `number \| undefined` | Current height measurement of your component, if `resizeConfig` property is `undefined`, this value will be `undefined` too |
+| `resizedHeight` | `number \| undefined` | Current height measurement of your component, if `resizeConfig` property is `undefined`, this value will be `undefined` too |
 | `translateX` | `number` | Current translateX transformation value |
 | `translateY` | `number` | Current translateY transformation value |
 | `scale` | `number` | Current scale transformation value |
\ No newline at end of file
diff --git a/example/src/cropzoom/commons/CropModal.tsx b/example/src/cropzoom/commons/CropModal.tsx
index 3f02a15..f434c56 100644
--- a/example/src/cropzoom/commons/CropModal.tsx
+++ b/example/src/cropzoom/commons/CropModal.tsx
@@ -8,6 +8,9 @@ type CropModalProps = {
   setCrop: (uri: string | undefined) => void;
 };
 
+/*
+ * Just a modal that displays the crop result image.
+ */
 const CropModal: React.FC<CropModalProps> = ({ uri, setCrop }) => {
   const resetCrop = () => {
     setCrop(undefined);
diff --git a/example/src/cropzoom/commons/CropOverlay.tsx b/example/src/cropzoom/commons/CropOverlay.tsx
index 073b93e..a12b186 100644
--- a/example/src/cropzoom/commons/CropOverlay.tsx
+++ b/example/src/cropzoom/commons/CropOverlay.tsx
@@ -7,6 +7,10 @@ type CropOverlayProps = {
   cropSize: number;
 };
 
+/*
+ * Draws an SVG as big as the space cropzoom is ocuppying in the screen, this
+ * one also draws a "hole" in it as big as the crop size.
+ */
 const CropOverlay: React.FC<CropOverlayProps> = ({ cropSize }) => {
   const { width, height } = useWindowDimensions();
 
diff --git a/example/src/cropzoom/skia-example/EffectPreview.tsx b/example/src/cropzoom/skia-example/EffectPreview.tsx
index 7a0185b..135fbd6 100644
--- a/example/src/cropzoom/skia-example/EffectPreview.tsx
+++ b/example/src/cropzoom/skia-example/EffectPreview.tsx
@@ -22,6 +22,10 @@ type EffectPreviewProps = {
   matrix: number[];
 };
 
+/*
+ * Renders a preview image with the color matrix applied to it.
+ * On tap updates the color matrix of the full size image.
+ */
 const EffectPreview: React.FC<EffectPreviewProps> = ({
   index,
   activeIndex,
diff --git a/example/src/resumable/gallery/ListImage.tsx b/example/src/resumable/gallery/ListImage.tsx
index fcc40b4..98c7a99 100644
--- a/example/src/resumable/gallery/ListImage.tsx
+++ b/example/src/resumable/gallery/ListImage.tsx
@@ -13,8 +13,8 @@ import {
   type ResumableZoomType,
 } from 'react-native-zoom-toolkit';
 
-import { SCROLL_SIZE, TIMING_CONFIG, images } from './constants';
-import { snapPoint, subscribeToIndexChangeEvent } from './utils';
+import { SCROLL_SIZE, TIMING_CONFIG, images } from './utils/constants';
+import { snapPoint, subscribeToIndexChangeEvent } from './utils/utils';
 import type { PanGestureEvent } from '../../../../src/commons/types';
 
 type ListImageProps = {
@@ -77,7 +77,7 @@ const ListImage: React.FC<ListImageProps> = ({
     });
   };
 
-  // if no swipe gesture has been detected  determine whether to scroll to next or previous item.
+  // if no swipe gesture has been detected  determine whether to scroll to the next or previous item.
   // scrollOffset is updated at the end of every animation so next time we start "scrolling" again
   // it will start where we left.
   const onPanEnd = (e: PanGestureEvent) => {
diff --git a/example/src/resumable/gallery/ResumableGalleryExample.tsx b/example/src/resumable/gallery/ResumableGalleryExample.tsx
index 4fa7ef0..99a918b 100644
--- a/example/src/resumable/gallery/ResumableGalleryExample.tsx
+++ b/example/src/resumable/gallery/ResumableGalleryExample.tsx
@@ -17,9 +17,9 @@ import { StatusBar, setStatusBarHidden } from 'expo-status-bar';
 import ListImage from './ListImage';
 import Appbar from '../basic/Appbar';
 
-import { images } from './constants';
+import { images } from './utils/constants';
 import Constants from 'expo-constants';
-import ScrollPreview from './ScrollPreview';
+import ScrollPreview from './scroll/ScrollPreview';
 
 const barHeight = Constants.statusBarHeight;
 
diff --git a/example/src/resumable/gallery/PreviewImage.tsx b/example/src/resumable/gallery/scroll/PreviewImage.tsx
similarity index 75%
rename from example/src/resumable/gallery/PreviewImage.tsx
rename to example/src/resumable/gallery/scroll/PreviewImage.tsx
index e07114e..98c923c 100644
--- a/example/src/resumable/gallery/PreviewImage.tsx
+++ b/example/src/resumable/gallery/scroll/PreviewImage.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Pressable, StyleSheet } from 'react-native';
 import { Image } from 'expo-image';
-import { PREVIEW_SIZE } from './constants';
-import { theme } from '../../constants';
+import { PREVIEW_SIZE } from '../utils/constants';
+import { theme } from '../../../constants';
 
 type PreviewImageProps = {
   uri: string;
@@ -10,6 +10,10 @@ type PreviewImageProps = {
   scrollTo: (index: number) => void;
 };
 
+/*
+ * Small image preview drawn at the bottom of the screen.
+ * On tapped scroll the position of its bigger counterpart.
+ */
 const PreviewImage: React.FC<PreviewImageProps> = ({
   uri,
   index,
diff --git a/example/src/resumable/gallery/ScrollPreview.tsx b/example/src/resumable/gallery/scroll/ScrollPreview.tsx
similarity index 88%
rename from example/src/resumable/gallery/ScrollPreview.tsx
rename to example/src/resumable/gallery/scroll/ScrollPreview.tsx
index 9107e88..f8b731d 100644
--- a/example/src/resumable/gallery/ScrollPreview.tsx
+++ b/example/src/resumable/gallery/scroll/ScrollPreview.tsx
@@ -8,10 +8,10 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated';
 
-import { emitIndexChangeEvent } from './utils';
+import { emitIndexChangeEvent } from '../utils/utils';
 import PreviewImage from './PreviewImage';
-import { theme } from '../../constants';
-import { PREVIEW_SIZE, TIMING_CONFIG, images } from './constants';
+import { theme } from '../../../constants';
+import { PREVIEW_SIZE, TIMING_CONFIG, images } from '../utils/constants';
 
 type ScrollPreviewProps = {
   translateY: SharedValue<number>;
@@ -19,6 +19,10 @@ type ScrollPreviewProps = {
   scrollOffset: SharedValue<number>;
 };
 
+/*
+ * Scroll preview rendered at the bottom of the screen.
+ * This component position is updated by what happens on ListImage component.
+ */
 const ScrollPreview: React.FC<ScrollPreviewProps> = ({
   translateY,
   scrollX,
diff --git a/example/src/resumable/gallery/constants.ts b/example/src/resumable/gallery/utils/constants.ts
similarity index 100%
rename from example/src/resumable/gallery/constants.ts
rename to example/src/resumable/gallery/utils/constants.ts
diff --git a/example/src/resumable/gallery/utils.ts b/example/src/resumable/gallery/utils/utils.ts
similarity index 100%
rename from example/src/resumable/gallery/utils.ts
rename to example/src/resumable/gallery/utils/utils.ts
diff --git a/src/commons/types.ts b/src/commons/types.ts
index 2e3587d..2639154 100644
--- a/src/commons/types.ts
+++ b/src/commons/types.ts
@@ -29,27 +29,94 @@ export type SizeVector<T> = {
 
 export type BoundsFuction = (scale: number) => Vector<number>;
 
+/**
+ * @description Determine how your component must behave when it reaches the specified boundaries
+ * by its enclosing container.
+ */
 export enum PanMode {
+  /** @description Prevents the user from dragging the component out of the specified boundaries. */
   CLAMP = 'clamp',
+
+  /**
+   * @description Lets the user drag the component around freely, when the pan gesture ends
+   * the component will return to a position within the specified boundaries.
+   */
   FREE = 'free',
+
+  /**
+   * @description Lets the user drag the component around freely applying friction to the pan gesture
+   * up to a point where it's stopped completely, when the pan gesture ends the component will return
+   * to a position within the specified boundaries.
+   */
   FRICTION = 'friction',
 }
 
+/**
+ * @description Determine how your component must behave when the pinch gesture's scale value
+ * exceeds the specified boundaries by minScale and maxScale properties.
+ */
 export enum ScaleMode {
+  /**
+   * @description Prevents the user from exceeding the scale boundaries.
+   */
   CLAMP = 'clamp',
+
+  /**
+   * @description Lets the user scale above and below the scale boundary values, when the pinch
+   * gesture ends the scale value returns to minScale or maxScale respectively.
+   */
   BOUNCE = 'bounce',
 }
 
 export type CommonZoomProps = Partial<{
+  /**
+   * @description Increase (Android only) or decrease the gesture detection area around
+   * your component in all directions by a given amount in pixels, useful when dealing
+   * with small components.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gesture-handlers/common-gh/#hitslop
+   */
   hitSlop: HitSlop;
+
+  /**
+   * @description Custom React Native Reanimated's animation timing configuration.
+   * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming/#config-
+   */
   timingConfig: TimingConfig;
 }>;
 
 export type CommonResumableProps = Partial<{
+  /**
+   * @description Minimum scale value allowed by the pinch gesture, expects values greater than or
+   * equals one.
+   * @default 1
+   */
   minScale: number;
+
+  /**
+   * @description Maximum scale value allowed by the pinch gesture, negative values instruct
+   * the component to infer the maximum scale value based on cropSize and resolution properties
+   * in a such way maxScale is a value just before images and videos start getting pixelated.
+   * @default -1
+   */
   maxScale: number;
+
+  /**
+   * @description Select which one of the three available pan modes to use.
+   */
   panMode: PanMode;
+
+  /**
+   * @description Select which one of the two available scale modes to use.
+   * @default ScaleMode.BOUNCE
+   */
   scaleMode: ScaleMode;
+
+  /**
+   * @description Lets the user drag the component around as they pinch, it also provides a
+   * more accurate pinch gesture calculation at the cost of a subtle jittering, disable for a
+   * smoother but less accurate experience.
+   * @default true
+   */
   panWithPinch: boolean;
 }>;
 
@@ -67,16 +134,49 @@ export type TapGestureEventCallback = (e: TapGestureEvent) => void;
 export type PinchGestureEventCallback = (e: PinchGestureEvent) => void;
 
 export type PanGestureCallbacks = Partial<{
+  /**
+   * @description Callback triggered when the pan gesture starts.
+   * @param e React native gesture handler's pan gesture event data.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture/#event-data
+   */
   onPanStart: PanGestureEventCallback;
+
+  /**
+   * @description Callback triggered when the pan gesture ends.
+   * @param e React native gesture handler's pan gesture event data.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture/#event-data
+   */
   onPanEnd: PanGestureEventCallback;
 }>;
 
 export type PinchGestureCallbacks = Partial<{
+  /**
+   * @description Callback triggered when the pinch gesture ends.
+   * @param e React native gesture handler's pinch gesture event data.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pinch-gesture/#event-data
+   */
   onPinchStart: PinchGestureEventCallback;
+
+  /**
+   * @description Callback triggered when the pinch gesture ends.
+   * @param e React native gesture handler's pinch gesture event data.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pinch-gesture/#event-data
+   */
   onPinchEnd: PinchGestureEventCallback;
 }>;
 
 export type TapGestureCallbacks = Partial<{
+  /**
+   * @description Callback triggered when a tap is made.
+   * @param e React native gesture handler's tap gesture event data.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture/#event-data
+   */
   onTap: TapGestureEventCallback;
+
+  /**
+   * @description Callback triggered when a double tap is made.
+   * @param e React native gesture handler's tap gesture event data.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture/#event-data
+   */
   onDoubleTap: TapGestureEventCallback;
 }>;
diff --git a/src/components/crop/types.ts b/src/components/crop/types.ts
index 142e774..514b620 100644
--- a/src/components/crop/types.ts
+++ b/src/components/crop/types.ts
@@ -8,7 +8,16 @@ import type {
 } from '../../commons/types';
 
 export enum CropMode {
+  /**
+   * @description Mode designed for common uses cases.
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/cropzoom.html#cropcontextresult
+   */
   MANAGED = 'managed',
+
+  /**
+   * @description Mode designed for complex use cases, provides a barebones component.
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/cropzoom.html#cropcontextresult
+   */
   OVERLAY = 'overlay',
 }
 
@@ -34,51 +43,44 @@ export type RotateTransitionCallback = (
 
 export type CropZoomType = {
   /**
-   * @description Rotates in steps of 90 degrees at a time in a range from 0 to 360 degrees
-   * @param {boolean} animate whether to animate the transition or not
-   * @param cb callback to trigger at beggining of the transition.
+   * @description Rotates in steps of 90 degrees at a time in a range from 0 to 360 degrees.
+   * @param animate Whether to animate the transition or not.
+   * @param cb Callback to trigger at the beginning of the transition, as its only argument receives
+   *  the angle your component will transition to, this angle ranges from 0 to 360 degrees (at 360 degrees it's clamped to 0).
    */
   rotate: RotateTransitionCallback;
 
   /**
    * @description Rotates the Y axis from 0 to 180 degrees and vice versa
-   * @param {boolean} animate whether to animate the transition or not.
-   * @param cb callback to trigger at beggining of the transition
+   * @param animate Whether to animate the transition or not.
+   * @param cb Callback to trigger at the beginning of the transition, as its only argument receives
+   * the angle your component will transition to, values are 0 or 180.
    */
   flipHorizontal: RotateTransitionCallback;
 
   /**
    * @description Rotates the X axis from 0 to 180 degrees and vice versa.
-   * @param {boolean} animate whether to animate the transition or not.
-   * @param cb callback to trigger at beggining of the transition
+   * @param animate Whether to animate the transition or not.
+   * @param cb Callback to trigger at the beginning of the transition, as its only argument receives
+   * the angle your component will transition to, values are 0 or 180.
    */
   flipVertical: RotateTransitionCallback;
 
   /**
    * @description Resets all transformations to their initail state.
-   * @param {boolean} animate whether to animate the transition or not.
-   * @param cb callback to trigger at the end of the transition, its only called if animate parameter
-   * is set to true.
+   * @param animate Whether to animate the transition or not.
    */
   reset: (animate?: boolean) => void;
 
   /**
-   * @description Calculates the position and size of the pinch gesture transformations relative to
-   * the resolution (image/video dimensios) of the component being pinched
-   *
-   * @param {number} fixedWidth By default all crops are dynamic based on the crop area and image/video
-   * dimensions, with this parameter you can enforce all of your crops to be of a fixed width, height
-   * is infered by the computed CroopZoom's cropSize property aspect ratio.
-   *
+   * @description Map all the transformations applied to your component into a simple and ready
+   * to use object specifying the context necessary for a crop operation, such object must be used
+   * along with a library capable of cropping images and/or videos, for instance Expo Image Manipulator.
+   * @param {number} fixedWidth Enforce all resulting crops to be of a fixed width, height is
+   * inferred by the computed aspect ratio of CropZoom's cropSize property.
    * @returns {object} An object representing the crop position and size, as well as  the necesary context to
-   * achieve the crop:
-   *
-   * crop property: Top left corner and size of the crop.
-   * context property: Fields specify if the image/video needs to flipped and to what angle must
-   * be rotated, the angle is measured in degrees.
-   * resize property: Fields specify the size your image/video must be resized to before cropping,
-   * if this property is undefined it means no resizing is necessary. This property is always
-   * undefined if you called this method without fixedWidth argument.
+   * achieve the desired crop.
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/cropzoom.html#cropcontextresult
    */
   crop: (fixedWidth?: number) => CropContextResult;
 };
@@ -97,11 +99,40 @@ export type CropZoomState = {
 export type CropGestureEventCallBack = (event: CropZoomState) => void;
 
 export type CropZoomProps = React.PropsWithChildren<{
+  /** @description Size of the cropping area. */
   cropSize: SizeVector<number>;
+
+  /**
+   * @description Resolution of your image/video or how big whatever you are trying to crop really is.
+   */
   resolution: SizeVector<number>;
+
+  /**
+   * @description Highlights the cropping area with a red-ish color as well as the gesture detection
+   * area with a light green color.
+   * @default false
+   */
   debug?: boolean;
+
+  /**
+   * @description Select which one of the two available modes to use.
+   * @default CropMode.MANAGED
+   */
   mode?: CropMode;
+
+  /**
+   * @description Worklet callback triggered as the user interacts with the component, it also means
+   * interacting through its methods.
+   * @param e Internal state of the gesture.
+   * @see https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/cropzoom.html#cropcontextresult
+   */
   onGestureActive?: CropGestureEventCallBack;
+
+  /**
+   * @description A function that returns a React Component, such component will sit between your
+   * desired component to crop and the gesture detector.
+   */
   OverlayComponent?: () => React.ReactElement<any>;
 }> &
   PanGestureCallbacks &
diff --git a/src/components/resumable/types.ts b/src/components/resumable/types.ts
index 3d4443f..372b35a 100644
--- a/src/components/resumable/types.ts
+++ b/src/components/resumable/types.ts
@@ -17,20 +17,89 @@ export type ResumableZoomState = {
 };
 
 export type ResumableZoomType = {
+  /**
+   * @description Reset all transformations to their initial state.
+   * @param animate Whether to animate the transition or not, defaults to true.
+   */
   reset: (animate?: boolean) => void;
+
+  /**
+   * @description Request internal transformation values of this component at the moment of the calling.
+   * @returns Internal state of the component.
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/resumablezoom.html#resumablezoomstate
+   */
   requestState: () => ResumableZoomState;
 };
 
 export type ResumableZoomProps = React.PropsWithChildren<{
+  /**
+   * @description Whether to apply a decay animation when the pan gesture ends or not.
+   * @default true
+   * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withDecay/
+   */
   decay?: boolean;
+
+  /**
+   * @description Enables and disables both single and double tap gestures.
+   * @default true
+   */
   tapsEnabled?: boolean;
+
+  /**
+   * @description Enables and disables both pan and swipe gestures.
+   * @default true
+   */
   panEnabled?: boolean;
+
+  /**
+   * @description Enables and disables the pinch gesture.
+   * @default true
+   */
   pinchEnabled?: boolean;
+
+  /**
+   * @description Maximum scale value allowed by the pinch gesture, expects values 
+   * bigger than or equals one.
+
+   * Alternatively you can pass the resolution of your image or video, for instance  {width: 1920, height: 1080}; 
+   * this will instruct the component to calculate maxScale  in such a way it's a value just before
+   * images and videos start getting pixelated.
+   * @default 6
+   */
   maxScale?: SizeVector<number> | number;
+
+  /**
+   * @description Callback triggered when a swipe to the left gesture has occurred, this callback is
+   * only triggered when your component is at its minimum scale and panMode property is set to
+   * PanMode.CLAMP.
+   */
   onSwipeLeft?: () => void;
+
+  /**
+   * @description Callback triggered when a swipe to the right gesture has occurred, this callback is
+   * only triggered when your component is at its minimum scale and panMode property is set to
+   * PanMode.CLAMP
+   */
   onSwipeRight?: () => void;
+
+  /**
+   * @description Worklet Callback triggered as the user interacts with the component, it also means
+   * interacting through its methods, ideal if you need to mirror the internal state of the
+   * component to some other component as it updates.
+   * @param e Internal state of the gesture.
+   * @see https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/resumablezoom.html#resumablezoomstate
+   */
   onGestureActive?: (e: ResumableZoomState) => void;
-  onHorizontalBoundsExceeded?: (value: number) => void;
+
+  /**
+   * @description Callback triggered when the component has been panned beyond the boundaries
+   * defined by its enclosing container, ideal property to mimic scroll behavior. This callback is
+   * only triggered when the panMode property is set to PanMode.CLAMP.
+   * @param exceededBy How much the component has been panned beyond its enclosing container boundaries,
+   * receives positive values from the right and negative values from the left.
+   */
+  onHorizontalBoundsExceeded?: (exceededBy: number) => void;
 }> &
   PanGestureCallbacks &
   PinchGestureCallbacks &
diff --git a/src/components/snapback/types.ts b/src/components/snapback/types.ts
index ede9c49..395ede9 100644
--- a/src/components/snapback/types.ts
+++ b/src/components/snapback/types.ts
@@ -24,9 +24,32 @@ export type SnapbackZoomState = {
 };
 
 export type SnapBackZoomProps = React.PropsWithChildren<{
+  /**
+   * @description Dynamically recalculates SnapBackZoom component's width and height style properties
+   * to align with a given aspect ratio based on a scale value as the gesture scale increases.
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/snapbackzoom.html#notes
+   */
   resizeConfig?: ResizeConfig;
+
+  /**
+   * @description Enables or disable gestures, when gestures are disabled your component can detect
+   * pointer events again.
+   * @default true
+   */
   gesturesEnabled?: boolean;
+
+  /**
+   * @description Worklet callback triggered from the moment pinch gesture starts until the snap back
+   * animation finishes.
+   * @param e Internal state of the gesture.
+   * @see https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/
+   * @see https://glazzes.github.io/react-native-zoom-toolkit/components/snapbackzoom.html#snapbackzoomstate
+   */
   onGestureActive?: (e: SnapbackZoomState) => void;
+
+  /**
+   * @description Callback triggered once the snap back animation has finished.
+   */
   onGestureEnd?: () => void;
 }> &
   PinchGestureCallbacks &
diff --git a/src/hooks/useImageResolution.ts b/src/hooks/useImageResolution.ts
index 412a80d..6918a52 100644
--- a/src/hooks/useImageResolution.ts
+++ b/src/hooks/useImageResolution.ts
@@ -13,6 +13,16 @@ export type Source = {
   headers?: Record<string, string>;
 };
 
+/**
+ * @description Gets the resolution of a bundle or network image.
+ * @param source Object containing an url pointing to a network image and optional headers or a
+ * require statement pointing to a bundle image asset.
+ * @returns An object containing the following values:
+ * - A boolean flag indicating whether the hook is fetching or not.
+ * - Resolution of the image.
+ * - An Error in case the image resolution fetching has failed.
+ * @see https://glazzes.github.io/react-native-zoom-toolkit/utilities/useimageresolution.html
+ */
 export default function (source: Source | number): FetchImageResolutionResult {
   const [isFetching, setIsFetching] = useState<boolean>(true);
   const [error, setError] = useState<Error | undefined>(undefined);
diff --git a/src/utils/getAspectRatioSize.ts b/src/utils/getAspectRatioSize.ts
index 8b7c53a..2b85003 100644
--- a/src/utils/getAspectRatioSize.ts
+++ b/src/utils/getAspectRatioSize.ts
@@ -7,10 +7,11 @@ type Options = {
 };
 
 /**
- *
+ * @description Gets width and height based on the aspect ratio.
  * @param options An object describing the aspect ratio of an image/video, and optional width and height
  * parameters, calculates height if this is undefined based on width and vice versa.
- * @returns An object containing the computed width and height by the aspect ratio
+ * @returns An object containing the computed width and height by the aspect ratio.
+ * @see https://glazzes.github.io/react-native-zoom-toolkit/utilities/getAspectRatioSize.html
  */
 export default function (options: Options): SizeVector<number> {
   'worklet';