GeekyAnts / GeekyAnts/NativeBase
AspectRatio on web doesn't responsive when resize browser
- 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
Assessment
This issue has not been assessed yet.