Changes just before release 2.1.0

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>[] \| 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. |

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

example/app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.glazzes.example"
@@ -30,8 +28,6 @@
       "favicon": "./assets/favicon.png",
       "bundler": "metro"
     },
-    "plugins": [
-      "expo-router"
-    ]
+    "plugins": ["expo-router"]
   }
 }

example/src/gallery/GalleryExample.tsx

@@ -1,20 +1,25 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { View } from 'react-native';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
-import {
-  stackTransition,
-  Gallery,
-  type GalleryType,
-} from 'react-native-zoom-toolkit';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import {
   getAssetsAsync,
-  MediaType,
   requestPermissionsAsync,
+  MediaType,
   type Asset,
 } from 'expo-media-library';
+import {
+  stackTransition,
+  Gallery,
+  PinchCenteringMode,
+  type GalleryType,
+} from 'react-native-zoom-toolkit';
 
 import GalleryImage from './GalleryImage';
-import { StyleSheet } from 'react-native';
 import VideoControls from './controls/VideoControls';
 import GalleryVideo from './GalleryVideo';
 
@@ -67,6 +72,25 @@ const GalleryExample = () => {
     opacityControls.value = withTiming(toValue);
   }, [assets, activeIndex, opacityControls]);
 
+  // used to derived the color animation when pulling vertically
+  const translateY = useSharedValue<number>(0);
+  const onVerticalPulling = (ty: number) => {
+    'worklet';
+    translateY.value = ty;
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(
+      translateY.value,
+      [-150, 0, 150],
+      ['#fff', '#000', '#fff'],
+      'RGB',
+      { gamma: 2.2 }
+    );
+
+    return { backgroundColor: color };
+  });
+
   useEffect(() => {
     const requestAssets = async () => {
       const { granted } = await requestPermissionsAsync();
@@ -95,7 +119,7 @@ const GalleryExample = () => {
   }
 
   return (
-    <View style={styles.root}>
+    <Animated.View style={[styles.root, animatedStyle]}>
       <Gallery
         ref={ref}
         data={assets}
@@ -106,6 +130,8 @@ const GalleryExample = () => {
           activeIndex.value = idx;
         }}
         onTap={onTap}
+        pinchCenteringMode={PinchCenteringMode.INTERACTION}
+        onVerticalPull={onVerticalPulling}
         customTransition={customTransition}
       />
 
@@ -116,14 +142,13 @@ const GalleryExample = () => {
         isSeeking={isSeeking}
         opacity={opacityControls}
       />
-    </View>
+    </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: '#000',
   },
 });
 

example/src/gallery/GalleryImage.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { Image } from 'expo-image';
 import {
   runOnJS,
   useAnimatedReaction,
   type SharedValue,
 } from 'react-native-reanimated';
+import { Image } from 'expo-image';
 import { type Asset } from 'expo-media-library';
 
 import { calculateItemSize } from './utils/utils';

example/src/gallery/GalleryVideo.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { type SharedValue } from 'react-native-reanimated';
 import { ResizeMode, Video, type AVPlaybackStatus } from 'expo-av';
 import type { Asset } from 'expo-media-library';
 
@@ -10,7 +11,6 @@ import {
   listenToSeekVideoEvent,
   listenToStopVideoEvent,
 } from './utils/emitter';
-import { type SharedValue } from 'react-native-reanimated';
 
 type GalleryVideoProps = {
   asset: Asset;

lefthook.yml

@@ -2,10 +2,10 @@ pre-commit:
   parallel: true
   commands:
     lint:
-      glob: "*.{js,ts,jsx,tsx}"
+      glob: '*.{js,ts,jsx,tsx}'
       run: yarn eslint {staged_files}
     types:
-      glob: "*.{js,ts, jsx, tsx}"
+      glob: '*.{js,ts, jsx, tsx}'
       run: npx tsc --noEmit
 commit-msg:
   parallel: true