feat: add onResetAnimationEnd prop (#41)

likashefqet · Jan 21, 2024 · 4975c13 · 4975c13
1 parent 6d58a36
commit 4975c13
Show file tree

Hide file tree

Showing 11 changed files with 568 additions and 2,225 deletions.
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ To use the `ImageZoom` component, simply pass the uri prop with the URL of the i
   onPinchEnd={() => console.log('Pinch gesture ended')}
   onPanStart={() => console.log('Pan gesture started')}
   onPanEnd={() => console.log('Pan gesture ended')}
-  renderLoader={() => <CustomLoader />}
+  onResetAnimationEnd={() => console.log('Reset animation ended')}
   resizeMode="cover"
 />
 ```
@@ -93,7 +93,7 @@ All `React Native Image Props` &
 | 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.                                               |
-
+| 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.  |
 ## Changelog
 
 Please refer to the [Releases](https://github.com/likashefqet/react-native-image-zoom/releases) section on the GitHub repository. Each release includes a detailed list of changes made to the library, including bug fixes, new features, and any breaking changes. We recommend reviewing these changes before updating to a new version of the library to ensure a smooth transition.

diff --git a/example/package.json b/example/package.json
@@ -3,25 +3,25 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
+    "start": "yarn expo start",
+    "android": "yarn expo start --android",
+    "ios": "yarn expo start --ios",
+    "web": "yarn expo start --web"
   },
   "dependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "expo": "~49.0.5",
+    "expo": "^49.0.21",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.3",
+    "react-native": "0.72.6",
     "react-native-gesture-handler": "^2.12.1",
     "react-native-reanimated": "~3.3.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^18.0.1",
+    "@expo/webpack-config": "^19.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^5.0.0"
   },

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { SafeAreaView, StyleSheet, View, Button } from 'react-native';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { ImageZoom } from '../../src';
 
@@ -10,27 +10,58 @@ const styles = StyleSheet.create({
   image: {
     overflow: 'hidden',
   },
+  buttonContainer: {
+    zIndex: 10,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'yellow',
+  },
 });
 
 // Photo by Walling [https://unsplash.com/photos/XLqiL-rz4V8] on Unsplash [https://unsplash.com/]
 const imageUri = 'https://images.unsplash.com/photo-1596003906949-67221c37965c';
 
 function App() {
+  const [isVisible, setVisible] = useState(true);
+
+  const onAnimationStart = () => {
+    setVisible(false);
+  };
+
+  const onAnimationEnd = (finished?: boolean) => {
+    if (finished) {
+      setVisible(true);
+    }
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <ImageZoom
         uri={imageUri}
         minScale={0.5}
-        minPanPointers={1}
-        onInteractionStart={() => console.log('onInteractionStart')}
+        minPanPointers={2}
+        onInteractionStart={() => {
+          console.log('onInteractionStart');
+          onAnimationStart();
+        }}
         onInteractionEnd={() => console.log('onInteractionEnd')}
         onPanStart={() => console.log('onPanStart')}
         onPanEnd={() => console.log('onPanEnd')}
         onPinchStart={() => console.log('onPinchStart')}
         onPinchEnd={() => console.log('onPinchEnd')}
         style={styles.image}
+        onResetAnimationEnd={(finished) => {
+          onAnimationEnd(finished);
+        }}
         resizeMode="cover"
       />
+      {isVisible && (
+        <View style={styles.buttonContainer}>
+          <Button title="BUTTON" />
+        </View>
+      )}
     </SafeAreaView>
   );
 }