How-to: make a square view

[ide]

I was trying to make a square view where width=100% and height=width. The approach I'm taking is to measure the parent view in componentDidMount and use its dimensions to manually set the size of the square view, one render frame later. This seems reasonable and mostly good but I want to know if I'm overlooking a way to do this in a single render pass.

[vjeux]

Not possible in a single render pass right now :(

One trick in CSS to do that is

<div style={{width: '100%', paddingBottom: '100%', position: 'relative'}}>
  <div style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0}}>{content}</div>
</div>

but it's super ugly :(

I've been prototyping implementing aspectRatio: 1 and while I got it working, it's not CSS compliant nor polyfill-able so I put it aside.

[ide]

Good to know. Thanks for the fast answer @vjeux.

[pie6k]

What about aspectRatio? - https://facebook.github.io/react-native/docs/layout-props.html#aspectratio

Setting it to 1 should make your view square.