Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix image looks cropped In the Preview page #8804

Merged
merged 14 commits into from
May 17, 2022
Merged

Fix image looks cropped In the Preview page #8804

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
8dba8e6
fix not proper image height on native
mollfpr Apr 27, 2022
1917af2
remove the exceed space on android when using attachment modal
mollfpr Apr 27, 2022
53cbcf6
add comment to give some explanation
mollfpr Apr 27, 2022
ac4511e
using getPlatform() instead rn Platform
mollfpr Apr 29, 2022
cee6581
Update src/styles/getModalStyles.js
mollfpr May 3, 2022
babaa26
refactor getModalStyles func to "shim"
mollfpr May 4, 2022
cc0b570
fix conflict
mollfpr May 4, 2022
bb8a612
function to get shouldAddTopSafeAreaPadding by modal type
mollfpr May 5, 2022
c9952ee
revert back the getModalStyles and use getShouldAddTopSafeAreaPadding…
mollfpr May 5, 2022
29b0ad8
getModalStyles to library
mollfpr May 11, 2022
17e1d3f
add default value
mollfpr May 11, 2022
ce04075
move to styles folder and rename the base function
mollfpr May 13, 2022
28f509e
rename base styles and add comment
mollfpr May 13, 2022
8beeb85
Update src/styles/getModalStyles/index.android.js
mollfpr May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/components/ImageView/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ class ImageView extends PureComponent {
imageWidth: undefined,
imageHeight: undefined,
interactionPromise: undefined,
containerHeight: undefined,
};

// Use the default double click interval from the ImageZoom library
Expand Down Expand Up @@ -72,7 +73,7 @@ class ImageView extends PureComponent {
let imageWidth = width;
let imageHeight = height;
const containerWidth = Math.round(this.props.windowWidth);
const containerHeight = Math.round(this.props.windowHeight - variables.contentHeaderHeight);
const containerHeight = Math.round(this.state.containerHeight);

const aspectRatio = Math.min(containerHeight / imageHeight, containerWidth / imageWidth);

Expand Down Expand Up @@ -134,6 +135,12 @@ class ImageView extends PureComponent {
styles.overflowHidden,
styles.errorOutline,
]}
onLayout={(event) => {
const layout = event.nativeEvent.layout;
this.setState({
containerHeight: layout.height,
});
}}
>
<Image
source={{uri: this.props.url}}
Expand Down
9 changes: 7 additions & 2 deletions src/styles/getModalStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Platform} from 'react-native';
import CONST from '../CONST';
import colors from './colors';
import variables from './variables';
Expand Down Expand Up @@ -83,7 +84,9 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
swipeDirection = ['down', 'right'];
animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
shouldAddTopSafeAreaPadding = true;

// Only apply top padding on iOS since only iOS using SafeAreaView and the top insets is not apply
mollfpr marked this conversation as resolved.
Show resolved Hide resolved
shouldAddTopSafeAreaPadding = Platform.OS === 'ios';
break;
case CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE:
// A centered modal that cannot be dismissed with a swipe.
Expand Down Expand Up @@ -114,7 +117,9 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
swipeDirection = undefined;
animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
shouldAddTopSafeAreaPadding = true;

// Only apply top padding on iOS since only iOS using SafeAreaView and the top insets is not apply
shouldAddTopSafeAreaPadding = Platform.OS === 'ios';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use getPlatform to compare CONST.OS constants to compare platform.

break;
case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED:
modalStyle = {
Expand Down