GeekyAnts / GeekyAnts/NativeBase

AspectRatio on web doesn't responsive when resize browser

Open
#4,699 3 comments 1 reaction 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

AspectRatio on web doesn't responsive when resize browser

### CodeSandbox/Snack link

https://snack.expo.dev/@giaptran/274416

### Steps to reproduce

The width and height calculations were wrong.

```
const AspectView = forwardRef((props: any, ref?: any) => {
const [layout, setLayout] = React.useState();
const inputStyle = [StyleSheet.flatten(props.style) || {}];
if (layout) {
// @ts-ignore
let { width = 0, height = 0 } = layout;
if (width === 0) {
inputStyle.push({ width: height * props.aspectRatio, height });
} else {
inputStyle.push({ width, height: width / props.aspectRatio });
}
}

return (

setLayout(inLayout)
}
/>
);
});
```
Expected calculation should like below:

```
const AspectView = forwardRef((props: any, ref?: any) => {
const [inputStyle, setInputStyle] = React.useState();

const handleLayoutChange = (event: LayoutChangeEvent): void => {
const { width = 0, height = 0 } = event.nativeEvent.layout;

if (width === 0 && height !== 0) {
setInputStyle({ width: height * props.aspectRatio, height: "100%" });
} else if (width !== 0 && height === 0) {
setInputStyle({ width: "100%", height: width / props.aspectRatio });
}
};

return (

);
});
```

### NativeBase Version

3.3.7

### Platform

- [ ] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.