Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How-to: make a square view #184

Closed
ide opened this issue Mar 23, 2015 · 3 comments
Closed

How-to: make a square view #184

ide opened this issue Mar 23, 2015 · 3 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@ide
Copy link
Contributor

ide commented Mar 23, 2015

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
Copy link
Contributor

vjeux commented Mar 23, 2015

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
Copy link
Contributor Author

ide commented Mar 23, 2015

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

@ide ide closed this as completed Mar 23, 2015
facebook-github-bot pushed a commit that referenced this issue Nov 22, 2016
@woehrl01
Added feature to use rounded values
1c69b61 
Summary:
Added an experimental feature to allow to use only rounded values. See #184. It's not a perfect solution and definitely  can be further improved. I'm looking forward to your ideas.
Closes facebook/yoga#256

Reviewed By: splhack

Differential Revision: D4214168

Pulled By: emilsjolander

fbshipit-source-id: 6293352d479b7b4dad258eb3f9e0afaa11cf7236
DanielMSchmidt pushed a commit to DanielMSchmidt/react-native that referenced this issue Jan 4, 2017
@woehrl01 @DanielMSchmidt
Added feature to use rounded values
b4142d0 
Summary:
Added an experimental feature to allow to use only rounded values. See facebook#184. It's not a perfect solution and definitely  can be further improved. I'm looking forward to your ideas.
Closes facebook/yoga#256

Reviewed By: splhack

Differential Revision: D4214168

Pulled By: emilsjolander

fbshipit-source-id: 6293352d479b7b4dad258eb3f9e0afaa11cf7236
@pie6k
Copy link

pie6k commented Mar 6, 2018

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

Setting it to 1 should make your view square.

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@vjeux @ide @pie6k @react-native-bot