chore: update example with onVerticalPull background animation

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