diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..04cdc09 --- /dev/null +++ b/.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 }], + }, +}; diff --git a/.prettierrc b/.prettierrc index 4776b27..05e55e7 100755 --- a/.prettierrc +++ b/.prettierrc @@ -6,7 +6,7 @@ "semi": true, "singleQuote": true, "tabWidth": 2, - "trailingComma": "none", + "trailingComma": "es5", "useTabs": false, "overrides": [ { diff --git a/demo/.babelrc b/demo/.babelrc index 2bcd546..7d30f8b 100644 --- a/demo/.babelrc +++ b/demo/.babelrc @@ -1,8 +1,3 @@ { - "presets": ["babel-preset-expo"], - "env": { - "development": { - "plugins": ["transform-react-jsx-source"] - } - } + "presets": ["babel-preset-expo"] } diff --git a/demo/App.js b/demo/App.js index ad9635a..e063c88 100644 --- a/demo/App.js +++ b/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 ( - - - + + + + + + + ); } } diff --git a/demo/BigImage.js b/demo/BigImage.js new file mode 100644 index 0000000..1b8531f --- /dev/null +++ b/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 ( + + + + ); +}; + +export default BigImage; 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 ( + + {longPressData} + {doubleClickData} + + + + + ); +}; + +export default DebugImage; diff --git a/demo/HomeScreen.js b/demo/HomeScreen.js new file mode 100644 index 0000000..cf323bf --- /dev/null +++ b/demo/HomeScreen.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { Button, View, Text } from 'react-native'; + +const HomeScreen = ({ navigation }) => { + return ( + +