react-native: Flexbox row overflow & flex-shrink [Chat use case]
After hours of trying, and trying… I can’t recreate the following in react native (iOS at least) using flexbox.
Desired Outcome
https://jsbin.com/lavira/6/edit?html,css,output
iOS Real Outcome
or
The principal problem in React Native are long messages in a flex-direction: row. They always end up overflowing the line. (Message 3 like in RN is impossible to me to re-create using flexbox)
The other problem is the lack of flex-shrink
Do you know if it is even possible at current state of flex-box system to re-create this or not? any hacky solution you might come up?
I think something similar was discussed in #901
Thank you so much!
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 15 (10 by maintainers)
Please don’t
+1issues. It spams everyone and not helpful.Besides the use case is clearly possible. I already posted a screenshot and linked to sample code.
@satya164 I think this is an important issue to address. It’s a typical flex-box use-case that should be handled painless.
Forget the avatars. Either using
flexDirection: rowor not (I tried A LOT of things), I can not get in any possible way the bubbles that should overflow to become multiline and ** at same time ** the short bubbles messages to shrink. In other words, to make the long messages/bubbles to not-overflow/become-multiline I have to trade off the short to fill all width. I have to choose between iOS screenshot 1 or screenshot 2 result.Is it me?
+1 ^ What he said…!
The solution with absolute positioning only works if the width of the item is know, which is not the case with text (unless you do additional calculations, which is just silly).
Has this issue be solved? I’m having the same problem
Just don’t use
flexDirection: row. To position the avatars in the same row as the bubble, you can just add a margin-left or right to the chat bubbles, and then position the avatars withpositon: absolute.Please use StackOverflow for questions in the future.