1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import {RouteProp} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useState} from 'react';
import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {normalize} from 'react-native-elements';
import ImageZoom from 'react-native-image-pan-zoom';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {MainStackParams} from '../../routes';
import {HeaderHeight, SCREEN_WIDTH} from '../../utils';
import {TaggSquareButton} from '../common';
type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
type ZoomInCropperNavigationProps = StackNavigationProp<
MainStackParams,
'ZoomInCropper'
>;
interface ZoomInCropperProps {
route: ZoomInCropperRouteProps;
navigation: ZoomInCropperNavigationProps;
}
export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
route,
navigation,
}) => {
const {screenType, title, image} = route.params;
const [aspectRatio, setAspectRatio] = useState<number>(1);
useEffect(() => {
navigation.dangerouslyGetParent()?.setOptions({
tabBarVisible: false,
});
}, []);
useEffect(() => {
if (image.sourceURL) {
Image.getSize(
image.sourceURL,
(w, h) => {
setAspectRatio(w / h);
},
(err) => console.log(err),
);
}
}, []);
return (
<>
<TouchableOpacity
style={styles.closeButton}
onPress={() => navigation.goBack()}>
<CloseIcon height={25} width={25} color={'white'} />
</TouchableOpacity>
<ImageZoom
style={{backgroundColor: 'black'}}
cropWidth={Dimensions.get('window').width}
cropHeight={Dimensions.get('window').height}
imageWidth={SCREEN_WIDTH}
imageHeight={SCREEN_WIDTH / aspectRatio}>
<Image
style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
source={{
uri: image.sourceURL,
}}
/>
</ImageZoom>
<TaggSquareButton
onPress={() => console.log('Navigate to caption screen')}
title={'Next'}
buttonStyle={'normal'}
buttonColor={'blue'}
labelColor={'white'}
style={styles.button}
labelStyle={styles.buttonLabel}
/>
</>
);
};
const styles = StyleSheet.create({
closeButton: {
position: 'absolute',
top: 0,
paddingTop: HeaderHeight,
zIndex: 1,
marginLeft: '5%',
},
button: {
zIndex: 1,
position: 'absolute',
bottom: normalize(20),
right: normalize(15),
width: normalize(108),
height: normalize(25),
borderRadius: 10,
},
buttonLabel: {
fontWeight: '700',
fontSize: normalize(15),
lineHeight: normalize(17.8),
letterSpacing: normalize(1.3),
textAlign: 'center',
},
});
|
