Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update snapbackzoom.md #24

Merged
merged 1 commit into from
Jun 16, 2024
+10 −10
Merged

Update snapbackzoom.md #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/docs/components/snapbackzoom.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,26 @@ The next video footage is taken from the [Example app](https://github.com/Glazze
</div>

## How to use
Its usage is pretty straight forward, import SnapBackZoom component from `react-native-zoom-toolkit` and wrap a component of your choice with it.
Its usage is pretty straight forward, import SnapbackZoom component from `react-native-zoom-toolkit` and wrap a component of your choice with it.

::: tip Tip
Do not use `position: "absolute"` in the wrapped component by `SnapbackZoom` as it messes up with pinch gesture's measurement, wrap `SnapBackZoom` within a absolute positioned view if you need so.
Do not use `position: "absolute"` in the wrapped component by `SnapbackZoom` as it messes up with pinch gesture's measurement, wrap `SnapbackZoom` within a absolute positioned view if you need so.
:::

```jsx
import { SnapBackZoom } from "react-native-zoom-toolkit"
import { SnapbackZoom } from "react-native-zoom-toolkit"

// Simple use case
<SnapBackZoom>
<SnapbackZoom>
<Image // <= This could be an Expo image or a Video
source={{ uri: IMAGE }}
style={{ width: 200, height: 200 }}
resizeMethod={"scale"} // <= Very important for images in Android do not forget it
resizeMode={"cover"}/>
</SnapBackZoom>
</SnapbackZoom>

// Complex use case
<SnapBackZoom
<SnapbackZoom
hitSlop={{ vertical: 50, horizontal: 50 }}
timingConfig={{ duration: 150, easing: Easing.linear }}
onTap={(e) => console.log(e)}
Expand All @@ -56,7 +56,7 @@ import { SnapBackZoom } from "react-native-zoom-toolkit"
style={{ width: 200, height: 200 }}
resizeMethod={"scale"} // <= Very important for images in Android do not forget it
resizeMode={"cover"}/>
</SnapBackZoom>
</SnapbackZoom>
```

## Properties
Expand Down Expand Up @@ -85,7 +85,7 @@ Be realistic with the timing configuration you use as you will not be able to re
|------|---------|-----------------|
| `ResizeConfig` | `undefined` | see [notes](#notes) |

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.
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.

### gesturesEnabled
| Type | Default |
Expand Down Expand Up @@ -151,7 +151,7 @@ Imagine you've got a lot of images you want to display as tiles of 200x200 pixel
```

::: tip Important
`SnapbackZoom` resizes its own dimensions not your component's ones, remember to use `{width: '100%', height: '100%'}` for images and videos so they cover the entire area of `SnapBackZoom` as it resizes.
`SnapbackZoom` resizes its own dimensions not your component's ones, remember to use `{width: '100%', height: '100%'}` for images and videos so they cover the entire area of `SnapbackZoom` as it resizes.
:::

At a scale of one your image is a tile of 200x200 pixel size, in other words a square, but at a scale two it resizes to 340x200 pixel size becoming a rectangle matching with the image's aspect ratio.
Expand All @@ -177,4 +177,4 @@ At a scale of one your image is a tile of 200x200 pixel size, in other words a s
| `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 |
| `scale` | `number` | Current scale transformation value |
Loading