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
|
import {RouteProp} from '@react-navigation/core';
import {useFocusEffect} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useCallback, useRef, useState} from 'react';
import {Button, StatusBar, View} from 'react-native';
import {CropView} from 'react-native-image-crop-tools';
import {MainStackParams} from '../../routes';
import {HeaderHeight} from '../../utils';
type ImageCropperRouteProps = RouteProp<MainStackParams, 'ImageCropper'>;
type ImageCropperNavigationProps = StackNavigationProp<
MainStackParams,
'ImageCropper'
>;
interface ImageCropperProps {
route: ImageCropperRouteProps;
navigation: ImageCropperNavigationProps;
}
const ImageCropper: React.FC<ImageCropperProps> = ({route, navigation}) => {
const {image, title, screenType} = route.params;
const cropViewRef = useRef();
const aspectRatios = [
{width: 9, height: 16},
{width: 4, height: 5},
{width: 1, height: 1},
];
const [aspectRatioIndex, setAspectRatioIndex] = useState<number>(0);
//Function to get the parent TabBar navigator and setting the option for this screen.
useFocusEffect(
useCallback(() => {
navigation.dangerouslyGetParent()?.setOptions({
tabBarVisible: false,
});
return () => {
navigation.dangerouslyGetParent()?.setOptions({
tabBarVisible: true,
});
};
}, [navigation]),
);
return (
<>
<StatusBar barStyle="dark-content" />
<View
style={{
flex: 1,
paddingTop: HeaderHeight,
}}>
<Button
title={'Toggle Ratio'}
onPress={() => {
setAspectRatioIndex(
aspectRatioIndex < 2 ? aspectRatioIndex + 1 : 0,
);
}}
/>
<Button
title={'Done'}
onPress={() => {
if (cropViewRef && cropViewRef.current) {
cropViewRef.current.saveImage(100);
}
}}
/>
{image !== undefined && (
<CropView
sourceUrl={image.sourceURL ? image.sourceURL : ''}
style={{
position: 'relative',
flex: 1,
marginBottom: '3%',
}}
onImageCrop={(res) => {
const arr = res.uri.split('/');
navigation.navigate('CaptionScreen', {
screenType,
title,
image: {filename: arr[arr.length - 1], path: res.uri},
});
}}
keepAspectRatio
aspectRatio={aspectRatios[aspectRatioIndex]}
/>
)}
</View>
</>
);
};
export default ImageCropper;
|
