Skip to content
This repository was archived by the owner on Sep 28, 2021. It is now read-only.

Commit b723837

Browse files
ArtemKolichenkovArtemKolichenkov
authored
Merge pull request #130 from ascoders/cleanup
Cleanup
2 parents 4432c94 + 9fab7ca commit b723837

19 files changed

+12852
-17954
lines changed

Diff for: ‎.eslintrc.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
module.exports = {
2+
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
3+
plugins: ['react', 'react-native'],
4+
parserOptions: {
5+
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
6+
sourceType: 'module', // Allows for the use of imports
7+
ecmaFeatures: {
8+
jsx: true, // Allows for the parsing of JSX
9+
},
10+
},
11+
settings: {
12+
react: {
13+
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
14+
},
15+
},
16+
17+
extends: [
18+
'plugin:react/recommended',
19+
'plugin:react-native/all',
20+
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
21+
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
22+
'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.
23+
],
24+
25+
rules: {
26+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
27+
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
28+
'@typescript-eslint/interface-name-prefix': [2, { prefixWithI: 'always' }],
29+
'@typescript-eslint/no-inferrable-types': [1, { ignoreParameters: true, ignoreProperties: true }],
30+
},
31+
};

Diff for: ‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"semi": true,
77
"singleQuote": true,
88
"tabWidth": 2,
9-
"trailingComma": "none",
9+
"trailingComma": "es5",
1010
"useTabs": false,
1111
"overrides": [
1212
{

Diff for: ‎demo/.babelrc

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
{
2-
"presets": ["babel-preset-expo"],
3-
"env": {
4-
"development": {
5-
"plugins": ["transform-react-jsx-source"]
6-
}
7-
}
2+
"presets": ["babel-preset-expo"]
83
}

Diff for: ‎demo/App.js

+15-21
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
1+
import 'react-native-gesture-handler';
12
import React from 'react';
2-
import { Image, Dimensions } from 'react-native';
3-
import ImageZoom from './built/index';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
import HomeScreen from './HomeScreen';
6+
import BigImage from './BigImage';
7+
import DebugImage from './DebugImage';
8+
9+
const Stack = createStackNavigator();
410

511
export default class App extends React.Component {
612
render() {
713
return (
8-
<ImageZoom
9-
cropWidth={Dimensions.get('window').width}
10-
cropHeight={Dimensions.get('window').height}
11-
imageWidth={Dimensions.get('window').width}
12-
imageHeight={Dimensions.get('window').height}
13-
enableSwipeDown={true}
14-
>
15-
<Image
16-
enableHorizontalBounce={true}
17-
style={{
18-
width: Dimensions.get('window').width,
19-
height: Dimensions.get('window').height
20-
}}
21-
source={{
22-
uri:
23-
'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'
24-
}}
25-
/>
26-
</ImageZoom>
14+
<NavigationContainer>
15+
<Stack.Navigator initialRouteName="Home">
16+
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Rereact-native-image-pan-zoom' }} />
17+
<Stack.Screen name="BigImage" component={BigImage} options={{ title: 'Big Image' }} />
18+
<Stack.Screen name="DebugImage" component={DebugImage} options={{ title: 'Debug Image' }} />
19+
</Stack.Navigator>
20+
</NavigationContainer>
2721
);
2822
}
2923
}

Diff for: ‎demo/BigImage.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { Image, Dimensions } from 'react-native';
3+
import ImageZoom from './built/index';
4+
5+
const BigImage = () => {
6+
return (
7+
<ImageZoom
8+
cropWidth={Dimensions.get('window').width}
9+
cropHeight={Dimensions.get('window').height}
10+
imageWidth={Dimensions.get('window').width}
11+
imageHeight={Dimensions.get('window').height}
12+
enableSwipeDown={true}
13+
>
14+
<Image
15+
enableHorizontalBounce={true}
16+
style={{
17+
width: Dimensions.get('window').width,
18+
height: Dimensions.get('window').height,
19+
}}
20+
source={{
21+
uri:
22+
'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',
23+
}}
24+
/>
25+
</ImageZoom>
26+
);
27+
};
28+
29+
export default BigImage;

Diff for: ‎demo/DebugImage.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useState } from 'react';
2+
import { Text, View, Image, Dimensions } from 'react-native';
3+
import ImageZoom from './built/index';
4+
5+
const formatEventData = (evt) => {
6+
const { locationX, locationY, pageX, pageY } = evt;
7+
return `x ${locationX.toFixed(2)} y ${locationY.toFixed(2)} pageX ${pageX.toFixed(2)} pageY ${pageY.toFixed(2)}`;
8+
};
9+
10+
const DebugImage = () => {
11+
const [longPressData, setLongPressData] = useState("LongPress: Haven't long pressed yet");
12+
const [doubleClickData, setDoubleClickData] = useState("DoubleClick: Haven't doubleclicked yet");
13+
const longPressHandler = (evt) => {
14+
const data = formatEventData(evt);
15+
setLongPressData(`LongPress: ${data}`);
16+
};
17+
const doubleClickHandler = (evt) => {
18+
const data = formatEventData(evt);
19+
setDoubleClickData(`DoubleClick: ${data}`);
20+
};
21+
return (
22+
<View>
23+
<Text>{longPressData}</Text>
24+
<Text>{doubleClickData}</Text>
25+
<ImageZoom
26+
cropWidth={Dimensions.get('window').width}
27+
cropHeight={Dimensions.get('window').height}
28+
imageWidth={Dimensions.get('window').width}
29+
imageHeight={Dimensions.get('window').height}
30+
enableSwipeDown={true}
31+
onLongPress={longPressHandler}
32+
onDoubleClick={doubleClickHandler}
33+
>
34+
<Image
35+
enableHorizontalBounce={true}
36+
style={{
37+
width: Dimensions.get('window').width,
38+
height: Dimensions.get('window').height,
39+
}}
40+
source={{
41+
uri:
42+
'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',
43+
}}
44+
/>
45+
</ImageZoom>
46+
</View>
47+
);
48+
};
49+
50+
export default DebugImage;

Diff for: ‎demo/HomeScreen.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
import { Button, View, Text } from 'react-native';
3+
4+
const HomeScreen = ({ navigation }) => {
5+
return (
6+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
7+
<Button title="Debug Image" onPress={() => navigation.navigate('DebugImage')} />
8+
<Button title="Big Image" onPress={() => navigation.navigate('BigImage')} />
9+
</View>
10+
);
11+
};
12+
13+
export default HomeScreen;

Diff for: ‎demo/app.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"expo": {
3-
"sdkVersion": "23.0.0"
3+
"sdkVersion": "37.0.0"
44
}
55
}

0 commit comments

Comments
 (0)