diff --git a/docs/docs/components/gallery.md b/docs/docs/components/gallery.md index 2537c7f..2bd48bb 100644 --- a/docs/docs/components/gallery.md +++ b/docs/docs/components/gallery.md @@ -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` | @@ -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` | `6` | @@ -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` | @@ -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. @@ -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` | @@ -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. | diff --git a/docs/docs/components/resumablezoom.md b/docs/docs/components/resumablezoom.md index 13ba707..e7da36d 100644 --- a/docs/docs/components/resumablezoom.md +++ b/docs/docs/components/resumablezoom.md @@ -65,7 +65,7 @@ export default App; All properties for this component are optional. ### extendGestures -| Type | Default | +| Type | Default | |------|---------| | `boolean` | `false` | @@ -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` | @@ -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 | |------|---------|-----------------| @@ -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. @@ -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` | @@ -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. | \ No newline at end of file +| `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. |