Cleanup

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  plugins: ['react', 'react-native'],
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-native/all',
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+    '@typescript-eslint/interface-name-prefix': [2, { prefixWithI: 'always' }],
+    '@typescript-eslint/no-inferrable-types': [1, { ignoreParameters: true, ignoreProperties: true }],
+  },
+};

.prettierrc

@@ -6,7 +6,7 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "none",
+  "trailingComma": "es5",
   "useTabs": false,
   "overrides": [
     {

demo/.babelrc

@@ -1,8 +1,3 @@
 {
-  "presets": ["babel-preset-expo"],
-  "env": {
-    "development": {
-      "plugins": ["transform-react-jsx-source"]
-    }
-  }
+  "presets": ["babel-preset-expo"]
 }

demo/App.js

@@ -1,29 +1,23 @@
+import 'react-native-gesture-handler';
 import React from 'react';
-import { Image, Dimensions } from 'react-native';
-import ImageZoom from './built/index';
+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();
 
 export default class App extends React.Component {
   render() {
     return (
-      <ImageZoom
-        cropWidth={Dimensions.get('window').width}
-        cropHeight={Dimensions.get('window').height}
-        imageWidth={Dimensions.get('window').width}
-        imageHeight={Dimensions.get('window').height}
-        enableSwipeDown={true}
-      >
-        <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>
+      <NavigationContainer>
+        <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>
     );
   }
 }

demo/BigImage.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Image, Dimensions } from 'react-native';
+import ImageZoom from './built/index';
+
+const BigImage = () => {
+  return (
+    <ImageZoom
+      cropWidth={Dimensions.get('window').width}
+      cropHeight={Dimensions.get('window').height}
+      imageWidth={Dimensions.get('window').width}
+      imageHeight={Dimensions.get('window').height}
+      enableSwipeDown={true}
+    >
+      <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>
+  );
+};
+
+export default BigImage;

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;

demo/HomeScreen.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+
+const HomeScreen = ({ navigation }) => {
+  return (
+    <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>
+  );
+};
+
+export default HomeScreen;

demo/app.json

@@ -1,5 +1,5 @@
 {
   "expo": {
-    "sdkVersion": "23.0.0"
+    "sdkVersion": "37.0.0"
   }
 }