Is there any way to set aspect ratio for react-native Layout?

Question

I need to set a layout height 60% of its width. AbsoluteLayout/DockLayout/GridLayout/StackLayout/WrapLayout/FlexboxLayout any?

Any suggestion about how I can achieve this?

Answer 1

Listen for layoutChanged event, then measure the width and apply the calculated height.

XML

<GridLayout backgroundColor="red" layoutChanged="onLayoutChanged"></GridLayout>

TS

export function onLayoutChanged(args: EventData) {
    const gridLayout = <GridLayout>args.object,
        height = (layout.toDeviceIndependentPixels(gridLayout.getMeasuredWidth()) / 100) * 60;

    gridLayout.off("layoutChanged");
    setTimeout(() => {
        gridLayout.height = height;
    });
}

Playground Sample