Skip to content

Commit

Permalink
chore: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@likashefqet
likashefqet committed Aug 4, 2024
1 parent 484f39c commit f2bcb5f
Showing 1 changed file with 79 additions and 32 deletions.
111 changes: 79 additions & 32 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ _Demo:_
Photo by <a href="https://unsplash.com/photos/XLqiL-rz4V8" title="Photo by Walling">Walling</a> on <a href="https://unsplash.com" title="Unsplash">Unsplash</a>
</div>

## What's new

- **Zoomable Component:** This component makes any child elements zoomable, ensuring they behave like the image zoom component. This is particularly useful when you need to replace the default image component with alternatives like Expo Image (see example) or Fast Image.

- **Updated Ref Handle:** Customize the functionality further by utilizing the exposed `zoom` method. This method allows you to programmatically zoom in the image to a given point (x, y) at a given scale level.

## Features

- **Smooth Zooming Gestures:** Ensure smooth and responsive zooming functionality, allowing users to easily zoom in and out of images using intuitive pinch and pan gestures.
Expand Down Expand Up @@ -95,12 +101,12 @@ To use the `ImageZoom` component, simply pass the uri prop with the URL of the i
minScale={0.5}
maxScale={5}
doubleTapScale={3}
minPanPointers={1}
minPanPointers={2}
isSingleTapEnabled
isDoubleTapEnabled
onInteractionStart={() => {
console.log('onInteractionStart');
onAnimationStart();
onZoom();
}}
onInteractionEnd={() => console.log('onInteractionEnd')}
onPanStart={() => console.log('onPanStart')}
Expand All @@ -110,54 +116,95 @@ To use the `ImageZoom` component, simply pass the uri prop with the URL of the i
onSingleTap={() => console.log('onSingleTap')}
onDoubleTap={(zoomType) => {
console.log('onDoubleTap', zoomType);
if (zoomType === ZOOM_TYPE.ZOOM_IN) {
onAnimationStart();
setTimeout(() => {
imageZoomRef.current?.reset();
}, 3000);
}
onZoom(zoomType);
}}
onProgrammaticZoom={(zoomType) => {
console.log('onZoom', zoomType);
onZoom(zoomType);
}}
style={styles.image}
onResetAnimationEnd={(finished) => {
console.log('onResetAnimationEnd', finished);
onAnimationEnd(finished);
}}
resizeMode="cover"
/>
```

### Zoomable with Expo Image Example

```javascript
<Zoomable
ref={ref}
minScale={0.5}
maxScale={5}
doubleTapScale={3}
minPanPointers={1}
isSingleTapEnabled
isDoubleTapEnabled
onInteractionStart={() => {
console.log('onInteractionStart');
onZoom();
}}
onInteractionEnd={() => console.log('onInteractionEnd')}
onPanStart={() => console.log('onPanStart')}
onPanEnd={() => console.log('onPanEnd')}
onPinchStart={() => console.log('onPinchStart')}
onPinchEnd={() => console.log('onPinchEnd')}
onSingleTap={() => console.log('onSingleTap')}
onDoubleTap={(zoomType) => {
console.log('onDoubleTap', zoomType);
onZoom(zoomType);
}}
onProgrammaticZoom={(zoomType) => {
console.log('onZoom', zoomType);
onZoom(zoomType);
}}
style={styles.image}
onResetAnimationEnd={(finished) => {
console.log('onResetAnimationEnd', finished);
onAnimationEnd(finished);
}}
>
<Image style={styles.image} source={{ uri }} contentFit="cover" />
</Zoomable>
```

## Properties

### ImageZoom Props

All `React Native Image Props` &

| Property | Type | Default | Description |
| ------------------ | -------- | ------------------- | ----------------------------------------------------------------------------------------------- |
| uri | String | `''` (empty string) | The image's URI, which can be overridden by the `source` prop. |
| minScale | Number | `1` | The minimum scale allowed for zooming. |
| maxScale | Number | `5` | The maximum scale allowed for zooming. |
| doubleTapScale | Number | `3` | The value of the image scale when a double-tap gesture is detected. |
| minPanPointers | Number | `2` | The minimum number of pointers required to enable panning. |
| maxPanPointers | Number | `2` | The maximum number of pointers required to enable panning. |
| isPanEnabled | Boolean | `true` | Determines whether panning is enabled within the range of the minimum and maximum pan pointers. |
| isPinchEnabled | Boolean | `true` | Determines whether pinching is enabled. |
| isSingleTapEnabled | Boolean | `false` | Enables or disables the single tap feature. |
| isDoubleTapEnabled | Boolean | `false` | Enables or disables the double tap feature. When enabled, this feature prevents automatic reset of the image zoom to its initial position, allowing continuous zooming. To return to the initial position, double tap again or zoom out to a scale level less than 1. |
| onInteractionStart | Function | `undefined` | A callback triggered when the image interaction starts. |
| onInteractionEnd | Function | `undefined` | A callback triggered when the image interaction ends. |
| onPinchStart | Function | `undefined` | A callback triggered when the image pinching starts. |
| onPinchEnd | Function | `undefined` | A callback triggered when the image pinching ends. |
| onPanStart | Function | `undefined` | A callback triggered when the image panning starts. |
| onPanEnd | Function | `undefined` | A callback triggered when the image panning ends. |
| onSingleTap | Function | `undefined` | A callback triggered when a single tap is detected. |
| onDoubleTap | Function | `undefined` | A callback triggered when a double tap gesture is detected. |
| onResetAnimationEnd| Function | `undefined` | A callback triggered upon the completion of the reset animation. It accepts two parameters: `finished` and `values`. The `finished` parameter evaluates to true if all animation values have successfully completed the reset animation; otherwise, it is false, indicating interruption by another gesture or unforeseen circumstances. The `values` parameter provides additional detailed information for each animation value. |
| Property | Type | Default | Description |
| ------------------- | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| uri | String | `''` (empty string) | The image's URI, which can be overridden by the `source` prop. |
| minScale | Number | `1` | The minimum scale allowed for zooming. |
| maxScale | Number | `5` | The maximum scale allowed for zooming. |
| doubleTapScale | Number | `3` | The value of the image scale when a double-tap gesture is detected. |
| minPanPointers | Number | `2` | The minimum number of pointers required to enable panning. |
| maxPanPointers | Number | `2` | The maximum number of pointers required to enable panning. |
| isPanEnabled | Boolean | `true` | Determines whether panning is enabled within the range of the minimum and maximum pan pointers. |
| isPinchEnabled | Boolean | `true` | Determines whether pinching is enabled. |
| isSingleTapEnabled | Boolean | `false` | Enables or disables the single tap feature. |
| isDoubleTapEnabled | Boolean | `false` | Enables or disables the double tap feature. When enabled, this feature prevents automatic reset of the image zoom to its initial position, allowing continuous zooming. To return to the initial position, double tap again or zoom out to a scale level less than 1. |
| onInteractionStart | Function | `undefined` | A callback triggered when the image interaction starts. |
| onInteractionEnd | Function | `undefined` | A callback triggered when the image interaction ends. |
| onPinchStart | Function | `undefined` | A callback triggered when the image pinching starts. |
| onPinchEnd | Function | `undefined` | A callback triggered when the image pinching ends. |
| onPanStart | Function | `undefined` | A callback triggered when the image panning starts. |
| onPanEnd | Function | `undefined` | A callback triggered when the image panning ends. |
| onSingleTap | Function | `undefined` | A callback triggered when a single tap is detected. |
| onDoubleTap | Function | `undefined` | A callback triggered when a double tap gesture is detected. |
| onProgrammaticZoom | Function | `undefined` | A callback function that is invoked when a programmatic zoom event occurs. |
| onResetAnimationEnd | Function | `undefined` | A callback triggered upon the completion of the reset animation. It accepts two parameters: `finished` and `values`. The `finished` parameter evaluates to true if all animation values have successfully completed the reset animation; otherwise, it is false, indicating interruption by another gesture or unforeseen circumstances. The `values` parameter provides additional detailed information for each animation value. |

### ImageZoom Ref

| Property | Type | Description |
| ------------------ | -------- | ----------------------------------------------------------------------------------------------- |
| reset | Function | Resets the image zoom, restoring it to its initial position and scale level. |
| Property | Type | Description |
| -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| reset | Function | Resets the image zoom, restoring it to its initial position and scale level. |
| zoom | Function | Zoom in the image to a given point (x, y) at a given scale level. Calls the reset method if the given scale level is less or equal to 1. |

## Changelog

Expand Down

0 comments on commit f2bcb5f

Please sign in to comment.