docs: fix Skia guide missing imports

Glazzes · Jan 6, 2025 · 7c8e578 · 7c8e578
1 parent 950d164
commit 7c8e578
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/docs/docs/guides/skia.md b/docs/docs/guides/skia.md
@@ -49,7 +49,7 @@ basic structure with Skia first.
 import React from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { Canvas, Image, useImage } from '@shopify/react-native-skia';
-import { getAspectRatioSize } from 'react-native-zoom-toolkit';
+import { fitContainer } from 'react-native-zoom-toolkit';
 
 const uri =
   'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg';
@@ -62,12 +62,8 @@ const App = () => {
     return null;
   }
 
-  const resolution = { width: image.width(), height: image.height() };
-  // This is the size the image will take on the screen, not its resolution.
-  const imageSize = getAspectRatioSize({
-    aspectRatio: resolution.width / resolution.height,
-    width: width,
-  });
+  const aspectRatio = image.width() / image.height();
+  const imageSize = fitContainer(aspectRatio, { width, height });
 
   const x = 0;
   const y = (height - imageSize.height) / 2;
@@ -108,11 +104,11 @@ With our basic structure in place, let's address the two missing steps to make t
 
 Let's see how the end result looks like:
 
-```tsx{12,39,43-53}
+```tsx{12,40-48}
 import React from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { Canvas, Image, useImage } from '@shopify/react-native-skia';
-import { getAspectRatioSize, useTransformationState } from 'react-native-zoom-toolkit';
+import { fitContainer, ResumableZoom, useTransformationState } from 'react-native-zoom-toolkit';
 
 const uri =
   'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg';
@@ -126,11 +122,8 @@ const App = () => {
     return null;
   }
 
-  const resolution = { width: image.width(), height: image.height() };
-  const imageSize = getAspectRatioSize({
-    aspectRatio: resolution.width / resolution.height,
-    width: width,
-  });
+  const aspectRatio = image.width() / image.height();
+  const imageSize = fitContainer(aspectRatio, { width, height });
 
   const x = 0;
   const y = (height - imageSize.height) / 2;
@@ -151,17 +144,15 @@ const App = () => {
         />
       </Canvas>
 
-      {/* Same size and position (0, 0) as the canvas above */}
-      <View style={{ width, height, position: 'absolute' }}>
-        <ResumableZoom
-          maxScale={resolution}
-          extendGestures={true}
-          onUpdate={onUpdate}
-        >
-          {/* Nested child is the same size as the Skia image */}
-          <View style={{ width: imageSize.width, height: imageSize.height }} />
-        </ResumableZoom>
-      </View>
+      <ResumableZoom
+        style={{ width, height, position: 'absolute' }}
+        maxScale={resolution}
+        extendGestures={true}
+        onUpdate={onUpdate}
+      >
+        {/* Nested child is the same size as the Skia image */}
+        <View style={{ width: imageSize.width, height: imageSize.height }} />
+      </ResumableZoom>
     </View>
   );
 };

diff --git a/docs/docs/installation.md b/docs/docs/installation.md
@@ -9,8 +9,8 @@ This library relies on both Reanimated and Gesture Handler making part of your p
 
 | React Native Version | React Native Zoom Toolkit Version | Gesture Handler version |
 | -------------------- | --------------------------------- | ----------------------- |
-| `<= 0.76`            | `3.x.x`                           | 2.16.0 and beyond.      |
-| `>= 0.76`            | `4.x.x`                           | 2.19.0 and beyond.      |
+| `<= 0.76`            | `>= 3.0.0`                        | 2.16.0 and beyond.      |
+| `>= 0.76`            | `>= 4.0.0`                        | 2.19.0 and beyond.      |
 
 ::: code-group
 

diff --git a/docs/docs/utilities/usetransformationstate.md b/docs/docs/utilities/usetransformationstate.md
@@ -10,12 +10,12 @@ your choice, for a hands on example see [How to use with Skia Components](../gui
 
 ## How to use
 
-When calling this hook it will provide you with the three following properties:
+When calling this hook you will receive the three following properties:
 
 - `onUpdate` is a worklet function which must be passed as a property to the zoom component's onUpdate
   callback property, this way the zoom component will update transform and state properties.
-- `transform` is a shared value containing the transformation array of the zoom component.
-- `state` is an object holding the shared values describing the current transformation state in case
+- `transform` is a shared value describing zoom component's current transformations as an array.
+- `state` is an object holding the shared values describing the current transformation state, in case
   you need them.
 
 ```tsx{9,21}