React-native: [Layout] CSS min-height/max-height

[0x0ece]

Are these available, at least for Text?
Any trick to achieve that anyway?

[ide]

The React docs say they aren't supported but css-layout says they are: https://github.com/facebook/css-layout#supported-attributes. So I believe React's copy of css-layout needs to be updated and the new properties exposed to Views.

[ide]

@vjeux can we get periodic updates of css-layout to keep it up-to-date ex: maybe the on-call does a weekly sync? We also wouldn't want css-layout to get too far ahead of React and accumulate features that need be reverted because they break apps in ways that are hard to fix.

[vjeux]

Yes, we have fallen behind. Unfortunately, bringing up the latest version breaks some of our products internally so I have to update them as well.

As for min/max height, unfortunately the current implementation in css-layout is NOT complete enough that it should be added to react native. There are many cases that it doesn't support correctly.

[ide]

OK, thanks for the update.

[0x0ece]

Thanks for the prompt update.

Not sure if it could simplify, but I guess that having min/max height only for Text could already be a big step forward. Also, having just one of two, as most of the time you can work on a dual problem.

My use case, for instance, is a view with an image and a text hidden behind. On click, I want to bring the text in front and the image behind.
When text is behind, I can force height and overflow so that it doesn't overflow the image size.
When text is in front, however, I'd like to show the full text (even when very long), but setting a minimum height if too short, to avoid a text box too small.
I tried both setting the height (but this crops a text too long) or leaving it auto (but this creates a small text box if the text is too short).
As I was mentioning, either min-height or max-height, and just on Text could solve the problem.

Edit: reworded the use case/problem to make it more clear (see later comments)

[vjeux]

Can't you use numberOfLines attribute of the Text for this?

[0x0ece]

Sorry, I explained in a confusing way.
When text is in front, I'd like to show the full text without truncating it (even when very long), but I'd like to set a minimum height if it's too short, to avoid a text box too small.
(editing also the previous comment to improve readability)

[sahrens]

You might be able to use onLayout as a workaround - based on the height of the rendered text you could add some margin as necessary.

[cgarvis]

How should min/max height work on images?

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[brentvatne]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out it's new home: https://productpains.com/post/react-native/layout-css-min-heightmax-height

[narychen]

I don't think this feature should use product pains to determine whether or not implement.
It is a must have feature of css flex layout.
If you don't have this feature, react-native is not complete. And a lot of displays cannot be made as the web way.

[AbhishekCode]

minHeight , maxHeight properties works in iOS but not in android. is there any workaround for this?

[nadeermalangadan]

+1

[mienaikoe]

I've tried minHeight on Android using React Native v0.39.2, and it seems to be working fine