Merge pull request Expensify#87613 from software-mansion-labs/@GCyganek/landscape-mode/avatar-edit-slider

Author: mjasikowski

src/components/AvatarCropModal/AvatarCropModal.tsx

@@ -15,6 +15,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -54,12 +55,15 @@ type AvatarCropModalProps = {
     buttonLabel?: string;
 };
 
+const LANDSCAPE_MODE_SLIDER_CONTAINER_MIN_WIDTH = 300;
+
 // This component can't be written using class since reanimated API uses hooks.
 function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose, onSave, isVisible, maskImage, buttonLabel}: AvatarCropModalProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Rotate', 'Zoom']);
+    const isInLandscapeMode = useIsInLandscapeMode();
 
     const originalImageWidth = useSharedValue<number>(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
     const originalImageHeight = useSharedValue<number>(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
@@ -407,7 +411,15 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
                                     rotation={rotation}
                                     maskImage={maskImage}
                                 />
-                                <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
+                                <View
+                                    style={[
+                                        styles.mt5,
+                                        styles.justifyContentBetween,
+                                        styles.alignItemsCenter,
+                                        styles.flexRow,
+                                        StyleUtils.getWidthStyle(isInLandscapeMode ? Math.max(imageContainerSize, LANDSCAPE_MODE_SLIDER_CONTAINER_MIN_WIDTH) : imageContainerSize),
+                                    ]}
+                                >
                                     <Icon
                                         src={expensifyIcons.Zoom}
                                         fill={theme.icon}