Skip to content

Commit

Permalink
docs: add pinchCenteringMode feature to ResumableZoom
Browse files Browse the repository at this point in the history
  • Loading branch information
Glazzes committed Aug 2, 2024
1 parent ca76391 commit 7533ec1
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 16 deletions.
22 changes: 11 additions & 11 deletions docs/docs/components/gallery.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,14 @@ export default GalleryImage;

## Properties
### data
| Type | Required |
| Type | Required |
|------|----------|
| `T[]`| `Yes` |

An array of items to render.

### renderItem
| Type | Required |
| Type | Required |
|------|----------|
| `(item: T, index: number) => JSX.Element` | `Yes` |

Expand All @@ -146,28 +146,28 @@ Takes an item from data and renders it into the list, provides additional metada
Used to extract a unique key for a given item at the specified index.

### windowSize
| Type | Default |
| Type | Default |
|------|----------|
| `number` | `5` |

Maximum number of items to be rendered at once.

### initialIndex
| Type | Default |
| Type | Default |
|------|----------|
| `number` | `0` |

Sets the initial position of the list.

### vertical
| Type | Default |
| Type | Default |
|------|----------|
| `boolean` | `false` |

Modifies the orientation of the component to vertical mode.

### maxScale
| Type | Default |
| Type | Default |
|------|----------|
| `SizeVector<number>[] \| number` | `6` |

Expand All @@ -176,7 +176,7 @@ Maximum scale value allowed by the pinch gesture for all elements, expects value
Alternatively you can pass an array with the resolution of your images/videos, 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 for each element, the resolutions array must be as big as the `data` property array.

### tapOnEdgeToItem
| Type | Default |
| Type | Default |
|------|----------|
| `boolean` | `true` |

Expand All @@ -189,7 +189,7 @@ Allow the user to go to the next or previous item by tapping the horizontal edge
### allowPinchPanning
| Type | Default |
|------|---------|
| `boolean` | `true` |
| `boolean` | `true` |

::: warning Beware iOS users
This feature is disabled by default for iOS users when a version of React Native Gesture Handler prior to `2.16.0` is installed, installing a version greater than equals `2.16.0` will set the value of this property to `true` by default.
Expand All @@ -205,13 +205,13 @@ Lets the user drag the current item around as they pinch, it also provides a mor
| `PinchCenteringMode` | `PinchCenteringMode.CLAMP` | see [PinchCenteringMode](#pinchcenteringmode-enum) |

::: tip Tip
To get the best out of this feature keep `allowPinchPanning` set to `true`.
To get the best out of this feature keep `allowPinchPanning` property set to `true`.
:::

Modify the way the pinch gesture reacts to the user interaction.

### onIndexChange
| Type | Default |
| Type | Default |
|------|----------|
| `(index: number) => void` | `undefined` |

Expand Down Expand Up @@ -371,7 +371,7 @@ Jump to the item at the given index.
### PinchCenteringMode Enum
Determine the behavior used by the pinch gesture relative to the boundaries of its enclosing component.
| Property | Description |
| Property | Description |
|--------------|--------------|
| `CLAMP` | Keeps the pinch gesture clamped to the borders or its enclosing container during the entirity of the gesture, just like seen on Android galleries. |
| `INTERACTION` | Keeps the pinch gesture in sync with user interaction, if the pinch gesture was released in an out bonds position it will animate back to a position within the bondaries of its enclosing container. |
Expand Down
29 changes: 24 additions & 5 deletions docs/docs/components/resumablezoom.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default App;
All properties for this component are optional.

### extendGestures
| Type | Default |
| Type | Default |
|------|---------|
| `boolean` | `false` |

Expand All @@ -74,7 +74,7 @@ By default the gesture detection area is the same size as the width and height o
To summarize this property: It improves the gesture detection for small components.

### minScale
| Type | Default |
| Type | Default |
|------|---------|
| `number` | `1` |

Expand Down Expand Up @@ -103,6 +103,17 @@ Select which one of the three available pan modes to use.

Select which one of the two available scale modes to use.

### pinchCenteringMode
| Type | Default | Additional Info |
|------|----------|-----------------|
| `PinchCenteringMode` | `PinchCenteringMode.CLAMP` | see [PinchCenteringMode](#pinchcenteringmode-enum) |

::: tip Tip
To get the best out of this feature keep `allowPinchPanning` property set to `true`.
:::

Modify the way the pinch gesture reacts to the user interaction.

### decay
| Type | Default | Additional Info |
|------|---------|-----------------|
Expand All @@ -113,7 +124,7 @@ Whether to apply a decay animation when the pan gesture ends or not.
### allowPinchPanning
| Type | Default |
|------|---------|
| `boolean` | `true` |
| `boolean` | `true` |

::: warning Beware iOS users
This feature is disabled by default for iOS users when a version of React Native Gesture Handler prior to `2.16.0` is installed, installing a version greater than equals `2.16.0` will set the value of this property to `true` by default.
Expand Down Expand Up @@ -210,7 +221,7 @@ Callback triggered as soon as the user lifts their fingers off the screen after
Worklet callback triggered when the internal state of the component changes, the internal state is updated as the user makes use of the gestures or execute its [methods](#methods), ideal if you need to mirror its current transformation values to some other component as it updates, see [ResumableZoomState](#resumablezoomstate).

### onGestureEnd
| Type | Default |
| Type | Default |
|------|---------|
| `() => void` | `undefined` |

Expand Down Expand Up @@ -293,4 +304,12 @@ Determine how your component must behave when the pinch gesture's scale value ex
| Property |Description |
|----------|------------|
| `CLAMP` | Prevents the user from exceeding the scale boundaries. |
| `BOUNCE` | 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` | 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. |
### PinchCenteringMode Enum
Determine the behavior used by the pinch gesture relative to the boundaries of its enclosing component.
| Property | Description |
|--------------|--------------|
| `CLAMP` | Keeps the pinch gesture clamped to the borders or its enclosing container during the entirity of the gesture, just like seen on Android galleries. |
| `INTERACTION` | Keeps the pinch gesture in sync with user interaction, if the pinch gesture was released in an out bonds position it will animate back to a position within the bondaries of its enclosing container. |

0 comments on commit 7533ec1

Please sign in to comment.