Easiest way to keep container square as it resizes?

What’s the easiest way to keep a container square as it resizes with larger/smaller screens?

On smaller screens it resizes horizontally (it’s in a flex container), but I can’t figure out how to get it to also resize vertically:

Thanks for your help!

Assuming that the View is a row flex and the square components are contained directly at the root of the view, the horizontal width is determined by the props.basis setting. Setting it to a fixed pixel width will keep its size, assuming grow and shrink are set to 0. The vertical width can be set the same way by cutting the square component from the root and putting it into its own column flex container.
The hierarchy is then:
View/root (row flex)/flex (column flex)/square component.

That did it - thanks so much!

Could you tell me what the case shadow code you use to get those effect?

Sure - here’s the Perspective style export: neumorphism_card.zip (1.2 KB) It’s just a Neumorphism type style. Background is #f1f3f6

1 Like