Refactor ZoomInCropper to be EditMedia

6 files changed, 18 insertions, 17 deletions

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index c569d2d6..11e9d08d 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -39,7 +39,7 @@ export type MainStackParams = {
     screenType: ScreenType;
     selectedCategory?: string;
   };
-  ZoomInCropper: {
+  EditMedia: {
     media: {uri: string; isVideo: boolean};
     screenType: ScreenType;
     selectedCategory?: string;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 15300c0d..064e9725 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -34,12 +34,12 @@ import {
   TagSelectionScreen,
   TagFriendsScreen,
   CameraScreen,
+  EditMedia,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
 import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
-import {ZoomInCropper} from '../../components/comments/ZoomInCropper';
 import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen';
 
 /**
@@ -336,8 +336,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           }}
         />
         <MainStack.Screen
-          name="ZoomInCropper"
-          component={ZoomInCropper}
+          name="EditMedia"
+          component={EditMedia}
           options={{
             ...modalStyle,
             gestureEnabled: false,
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 0c7d911f..5fa14d05 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -7,3 +7,4 @@ export * from './suggestedPeopleOnboarding';
 export * from './badge';
 export * from './chat';
 export * from './moments';
+export * from './upload';
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 18e04261..cb5cd411 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -65,7 +65,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   }, [mediaFromGallery]);
 
   const navigateToCropper = (uri: string) => {
-    navigation.navigate('ZoomInCropper', {
+    navigation.navigate('EditMedia', {
       screenType,
       media: {
         uri,
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/screens/upload/EditMedia.tsx
index 88f161e5..ed5cd0d7 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -8,6 +8,8 @@ import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
 import TrimIcon from '../../assets/icons/trim.svg';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common';
+import {TrimmerPlayer} from '../../components/moments/trimmer';
 import {MainStackParams} from '../../routes';
 import {
   cropVideo,
@@ -16,23 +18,18 @@ import {
   SCREEN_WIDTH,
   trimVideo,
 } from '../../utils';
-import {TaggLoadingIndicator, TaggSquareButton} from '../common';
-import {TrimmerPlayer} from '../moments/trimmer';
 
-type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
-type ZoomInCropperNavigationProps = StackNavigationProp<
+type EditMediaRouteProps = RouteProp<MainStackParams, 'EditMedia'>;
+type EditMediaNavigationProps = StackNavigationProp<
   MainStackParams,
-  'ZoomInCropper'
+  'EditMedia'
 >;
-interface ZoomInCropperProps {
-  route: ZoomInCropperRouteProps;
-  navigation: ZoomInCropperNavigationProps;
+interface EditMediaProps {
+  route: EditMediaRouteProps;
+  navigation: EditMediaNavigationProps;
 }
 
-export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
-  route,
-  navigation,
-}) => {
+export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
   const {screenType, media, selectedCategory} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
   // width and height of video, if video
@@ -430,3 +427,5 @@ const styles = StyleSheet.create({
     height: 25,
   },
 });
+
+export default EditMedia;
diff --git a/src/screens/upload/index.ts b/src/screens/upload/index.ts
new file mode 100644
index 00000000..0dadeede
--- /dev/null
+++ b/src/screens/upload/index.ts
@@ -0,0 +1 @@
+export {default as EditMedia} from './EditMedia';