AspectRatio on web doesn't responsive when resize browser

[TVGSOFT]

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 (
    <Box
      {...props}
      ref={ref}
      style={inputStyle}
      onLayout={({ nativeEvent: { layout: inLayout } }: any) =>
        setLayout(inLayout)
      }
    />
  );
});

Expected calculation should like below:

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

  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 (
    <Box
      {...props}
      ref={ref}
      style={[props.style, inputStyle]}
      onLayout={handleLayoutChange}
    />
  );
});

NativeBase Version

3.3.7

Platform

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

Other Platform

No response

Additional Information

No response

[surajahmed]

@TVGSoft Thanks for reporting! We'll look into this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sahilvasuja]

Hey. I see your code here is reference with the help of this link you can modify your code and set as image as responsive.