aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/comments/ImageCropper.tsx94
-rw-r--r--src/components/comments/index.ts1
-rw-r--r--src/components/moments/Moment.tsx10
-rw-r--r--src/routes/main/MainStackNavigator.tsx10
-rw-r--r--src/routes/main/MainStackScreen.tsx8
-rw-r--r--src/screens/profile/CaptionScreen.tsx2
6 files changed, 116 insertions, 9 deletions
diff --git a/src/components/comments/ImageCropper.tsx b/src/components/comments/ImageCropper.tsx
new file mode 100644
index 00000000..7d4eabff
--- /dev/null
+++ b/src/components/comments/ImageCropper.tsx
@@ -0,0 +1,94 @@
+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]}
+ ref={cropViewRef}
+ />
+ )}
+ </View>
+ </>
+ );
+};
+
+export default ImageCropper;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index ebd93844..d715714a 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,2 +1,3 @@
export {default as CommentTile} from './CommentTile';
export {default as AddComment} from './AddComment';
+export {default as ImageCropper} from './ImageCropper';
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index cde5b2e0..1c850b29 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,8 +7,8 @@ import ImagePicker from 'react-native-image-crop-picker';
import LinearGradient from 'react-native-linear-gradient';
import DeleteIcon from '../../assets/icons/delete-logo.svg';
import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus-icon.svg';
import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
import UpIcon from '../../assets/icons/up_icon.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {ERROR_UPLOAD} from '../../constants/strings';
@@ -52,15 +52,11 @@ const Moment: React.FC<MomentProps> = ({
'Screenshots',
'UserLibrary',
],
- width: 580,
- height: 580,
- cropping: true,
- cropperToolbarTitle: 'Upload a moment',
- mediaType: 'photo',
+ mediaType: 'any',
})
.then((picture) => {
if ('path' in picture) {
- navigation.navigate('CaptionScreen', {
+ navigation.navigate('ImageCropper', {
screenType,
title: title,
image: picture,
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 8fce5e2f..757d89f7 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -38,7 +38,10 @@ export type MainStackParams = {
};
CaptionScreen: {
title?: string;
- image?: Image;
+ image?: {
+ filename: string;
+ path: string;
+ };
screenType: ScreenType;
selectedTags?: MomentTagType[];
moment?: MomentType;
@@ -107,6 +110,11 @@ export type MainStackParams = {
ChatList: undefined;
Chat: undefined;
NewChatModal: undefined;
+ ImageCropper: {
+ image: Image;
+ screenType: ScreenType;
+ title: string;
+ };
};
export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 3be2ff28..cb23f9fc 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -3,6 +3,7 @@ import {StackNavigationOptions} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet, Text} from 'react-native';
import {normalize} from 'react-native-elements';
+import {ImageCropper} from '../../components/comments';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {
AccountType,
@@ -325,6 +326,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
gestureEnabled: false,
}}
/>
+ <MainStack.Screen
+ name="ImageCropper"
+ component={ImageCropper}
+ options={{
+ gestureEnabled: false,
+ }}
+ />
</MainStack.Navigator>
);
};
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9e1b4674..74f774b9 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -197,7 +197,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
<Image
style={styles.image}
source={{uri: moment ? moment.moment_url : image?.path}}
- resizeMode={'cover'}
+ resizeMode={'contain'}
/>
<MentionInput
containerStyle={styles.text}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:45:40 +0000