From 0175ef47a9ffd3d734c898a51d3e6dad01db2acb Mon Sep 17 00:00:00 2001
From: Artem Kolichenkov <artem@kolichenkov.com>
Date: Sat, 16 May 2020 00:23:32 +0300
Subject: [PATCH] Update demo app

Added debuggin page to test handlers
---
 demo/App.js        |  2 ++
 demo/DebugImage.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++
 demo/HomeScreen.js |  3 ++-
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 demo/DebugImage.js

diff --git a/demo/App.js b/demo/App.js
index 0fa5acd..e063c88 100644
--- a/demo/App.js
+++ b/demo/App.js
@@ -4,6 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import HomeScreen from './HomeScreen';
 import BigImage from './BigImage';
+import DebugImage from './DebugImage';
 
 const Stack = createStackNavigator();
 
@@ -14,6 +15,7 @@ export default class App extends React.Component {
         <Stack.Navigator initialRouteName="Home">
           <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Rereact-native-image-pan-zoom' }} />
           <Stack.Screen name="BigImage" component={BigImage} options={{ title: 'Big Image' }} />
+          <Stack.Screen name="DebugImage" component={DebugImage} options={{ title: 'Debug Image' }} />
         </Stack.Navigator>
       </NavigationContainer>
     );
diff --git a/demo/DebugImage.js b/demo/DebugImage.js
new file mode 100644
index 0000000..48c549b
--- /dev/null
+++ b/demo/DebugImage.js
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Text, View, Image, Dimensions } from 'react-native';
+import ImageZoom from './built/index';
+
+const formatEventData = (evt) => {
+  const { locationX, locationY, pageX, pageY } = evt;
+  return `x ${locationX.toFixed(2)} y ${locationY.toFixed(2)} pageX ${pageX.toFixed(2)} pageY ${pageY.toFixed(2)}`;
+};
+
+const DebugImage = () => {
+  const [longPressData, setLongPressData] = useState("LongPress: Haven't long pressed yet");
+  const [doubleClickData, setDoubleClickData] = useState("DoubleClick: Haven't doubleclicked yet");
+  const longPressHandler = (evt) => {
+    const data = formatEventData(evt);
+    setLongPressData(`LongPress: ${data}`);
+  };
+  const doubleClickHandler = (evt) => {
+    const data = formatEventData(evt);
+    setDoubleClickData(`DoubleClick: ${data}`);
+  };
+  return (
+    <View>
+      <Text>{longPressData}</Text>
+      <Text>{doubleClickData}</Text>
+      <ImageZoom
+        cropWidth={Dimensions.get('window').width}
+        cropHeight={Dimensions.get('window').height}
+        imageWidth={Dimensions.get('window').width}
+        imageHeight={Dimensions.get('window').height}
+        enableSwipeDown={true}
+        onLongPress={longPressHandler}
+        onDoubleClick={doubleClickHandler}
+      >
+        <Image
+          enableHorizontalBounce={true}
+          style={{
+            width: Dimensions.get('window').width,
+            height: Dimensions.get('window').height,
+          }}
+          source={{
+            uri:
+              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522606437962&di=f93f5c645225a5681155ebcde27b257f&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0159fa5944bcd3a8012193a34b762d.jpg%402o.jpg',
+          }}
+        />
+      </ImageZoom>
+    </View>
+  );
+};
+
+export default DebugImage;
diff --git a/demo/HomeScreen.js b/demo/HomeScreen.js
index e5659a8..cf323bf 100644
--- a/demo/HomeScreen.js
+++ b/demo/HomeScreen.js
@@ -3,7 +3,8 @@ import { Button, View, Text } from 'react-native';
 
 const HomeScreen = ({ navigation }) => {
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
+      <Button title="Debug Image" onPress={() => navigation.navigate('DebugImage')} />
       <Button title="Big Image" onPress={() => navigation.navigate('BigImage')} />
     </View>
   );