aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ios/Podfile1
-rw-r--r--ios/Podfile.lock37
-rw-r--r--package.json4
-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
-rw-r--r--yarn.lock10
10 files changed, 155 insertions, 22 deletions
diff --git a/ios/Podfile b/ios/Podfile
index 4eca4100..58c388c2 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -5,6 +5,7 @@ platform :ios, '10.0'
target 'Frontend' do
config = use_native_modules!
+ pod 'react-native-image-crop-tools', :path => '../node_modules/react-native-image-crop-tools'
use_react_native!(:path => config["reactNativePath"])
target 'FrontendTests' do
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 7d6ce3a8..eec8a988 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -134,24 +134,24 @@ PODS:
- GoogleUtilities/Environment (~> 7.2)
- nanopb (~> 2.30907.0)
- PromisesObjC (~> 1.2)
- - GoogleUtilities/AppDelegateSwizzler (7.4.0):
+ - GoogleUtilities/AppDelegateSwizzler (7.4.1):
- GoogleUtilities/Environment
- GoogleUtilities/Logger
- GoogleUtilities/Network
- - GoogleUtilities/Environment (7.4.0):
+ - GoogleUtilities/Environment (7.4.1):
- PromisesObjC (~> 1.2)
- - GoogleUtilities/Logger (7.4.0):
+ - GoogleUtilities/Logger (7.4.1):
- GoogleUtilities/Environment
- - GoogleUtilities/MethodSwizzler (7.4.0):
+ - GoogleUtilities/MethodSwizzler (7.4.1):
- GoogleUtilities/Logger
- - GoogleUtilities/Network (7.4.0):
+ - GoogleUtilities/Network (7.4.1):
- GoogleUtilities/Logger
- "GoogleUtilities/NSData+zlib"
- GoogleUtilities/Reachability
- - "GoogleUtilities/NSData+zlib (7.4.0)"
- - GoogleUtilities/Reachability (7.4.0):
+ - "GoogleUtilities/NSData+zlib (7.4.1)"
+ - GoogleUtilities/Reachability (7.4.1):
- GoogleUtilities/Logger
- - GoogleUtilities/UserDefaults (7.4.0):
+ - GoogleUtilities/UserDefaults (7.4.1):
- GoogleUtilities/Logger
- libevent (2.1.12)
- nanopb (2.30907.0):
@@ -337,6 +337,11 @@ PODS:
- React-Core
- react-native-document-picker (5.1.0):
- React-Core
+ - react-native-image-crop-tools (1.3.6):
+ - React
+ - TOCropViewController (= 2.5.3)
+ - react-native-image-picker (4.0.3):
+ - React-Core
- react-native-image-resizer (1.4.4):
- React-Core
- react-native-netinfo (6.0.0):
@@ -478,7 +483,7 @@ PODS:
- React
- RNVectorIcons (7.1.0):
- React
- - TOCropViewController (2.6.0)
+ - TOCropViewController (2.5.3)
- Yoga (1.14.0)
- YogaKit (1.18.1):
- Yoga (~> 1.14)
@@ -527,6 +532,8 @@ DEPENDENCIES:
- react-native-contacts (from `../node_modules/react-native-contacts`)
- react-native-date-picker (from `../node_modules/react-native-date-picker`)
- react-native-document-picker (from `../node_modules/react-native-document-picker`)
+ - react-native-image-crop-tools (from `../node_modules/react-native-image-crop-tools`)
+ - react-native-image-picker (from `../node_modules/react-native-image-picker`)
- react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
- "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -631,6 +638,10 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-date-picker"
react-native-document-picker:
:path: "../node_modules/react-native-document-picker"
+ react-native-image-crop-tools:
+ :path: "../node_modules/react-native-image-crop-tools"
+ react-native-image-picker:
+ :path: "../node_modules/react-native-image-picker"
react-native-image-resizer:
:path: "../node_modules/react-native-image-resizer"
react-native-netinfo:
@@ -721,7 +732,7 @@ SPEC CHECKSUMS:
glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
GoogleAppMeasurement: c542a2feaac9ab98fd074e8f1a02c3585bbfbd47
GoogleDataTransport: 8b0e733ea77c9218778e5a9e34ba9508b8328939
- GoogleUtilities: 284cddc7fffc14ae1907efb6f78ab95c1fccaedc
+ GoogleUtilities: f8a43108b38a68eebe8b3540e1f4f2d28843ce20
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
nanopb: 59221d7f958fb711001e6a449489542d92ae113e
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
@@ -741,6 +752,8 @@ SPEC CHECKSUMS:
react-native-contacts: 931baebf460125c5a7bbce1c4521a96c69795123
react-native-date-picker: 2dfef0fcb6c36d078bc62f5de3ca79eff7f42486
react-native-document-picker: f2f73db94328c84e22144e369fb4a3ede47bc1f5
+ react-native-image-crop-tools: 5d254e217773e75bfc09b2c372a8b6a027f0628b
+ react-native-image-picker: 474cf2c33c2b6671da53d293a16c97995f0aec15
react-native-image-resizer: 13ac4af788f88af36d0353a1324401ebabd04fe4
react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
@@ -772,10 +785,10 @@ SPEC CHECKSUMS:
RNShare: 4df87d1791f50a2c7b1d89432fb9bbb7c02a9c9a
RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
- TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
+ TOCropViewController: 20a14b6a7a098308bf369e7c8d700dc983a974e6
Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
-PODFILE CHECKSUM: e24412577971b52c81c348785bf01cb915155d6d
+PODFILE CHECKSUM: 33ee4093aebb548655b60536fb24108b5ca0d547
COCOAPODS: 1.10.1
diff --git a/package.json b/package.json
index ea8c946a..5b07e8b3 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
"react-native-haptic-feedback": "^1.11.0",
"react-native-hyperlink": "^0.0.19",
"react-native-image-crop-picker": "^0.36.0",
+ "react-native-image-crop-tools": "^1.3.6",
+ "react-native-image-picker": "^4.0.3",
"react-native-image-resizer": "^1.4.4",
"react-native-inappbrowser-reborn": "^3.5.0",
"react-native-linear-gradient": "^2.5.6",
@@ -105,4 +107,4 @@
"./node_modules/react-native-gesture-handler/jestSetup.js"
]
}
-} \ No newline at end of file
+}
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}
diff --git a/yarn.lock b/yarn.lock
index 9c1ebdf8..c4c5ec2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6445,6 +6445,16 @@ react-native-image-crop-picker@^0.36.0:
resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.36.2.tgz#fcb35c1a12d805bedbb6d94a87078e86a6c9b49f"
integrity sha512-cTauoEHHzx14ZHA7Pt65e7RVnbn1WRYQz2ufTZp9/05EtNDrdsXwNhgtXdWVFbOhYB8qgUFQjy2NelkBOHIH3g==
+react-native-image-crop-tools@^1.3.6:
+ version "1.3.6"
+ resolved "https://registry.yarnpkg.com/react-native-image-crop-tools/-/react-native-image-crop-tools-1.3.6.tgz#c7060c61f6e81b64b9f279b5e9b2a42f35209d1a"
+ integrity sha512-MXz+4k6SHwbvRHfifws9Jhd//rEQD5NC/2SKy80cRbc13XsWDA9bkIY396HCQrpwBT8zXLF7DjyTSEq+GqbBMg==
+
+react-native-image-picker@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.3.tgz#dd8d393e0c57321688885c74b52244ad36e532d6"
+ integrity sha512-S4a1jE4fAPDzmah/7OVTEAXGz1/wlGyClU+spygmek5rVLERR5BgwnkX3tLP/UvMQbfdPZNUbnH0hEe7su2AZg==
+
react-native-image-resizer@^1.4.4:
version "1.4.4"
resolved "https://registry.yarnpkg.com/react-native-image-resizer/-/react-native-image-resizer-1.4.4.tgz#75eee65580de509ada674669d13e4d236caea2d5"
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:45:08 +0000