React-native: Flexbox row overflow & flex-shrink [Chat use case]

[gastonmorixe]

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!

[facebook-github-bot]

Hey imton, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[tomauty]

Setting a defined width has worked for me in the past. You could do this for the container of a chat message. I will usually get the device dimensions and use that minus a set of margins I want to use.

[satya164]

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 with positon: absolute.

Please use StackOverflow for questions in the future.

[gastonmorixe]

@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: row or 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?

[browniefed]

It isn't just you, I've had this question posed to me a few times. The flexDirection: 'row' combined with wrap, doesn't seem to adhere to the boundaries of the present parent. Even using absolute position caused them to overflow out of the container.
I never did investigate the root cause, as at the time the only real solution was defining width on the parent container of the row with the wrap (if my memory serves me)

[gastonmorixe]

@browniefed thanks. Can we agree then that this is a bug to further investigate and not something to close?

[browniefed]

@imton I'm unsure if this is a bug with react-native, or with css-layout. More investigation would need to be done to narrow it down.

[satya164]

@imton Feature requests on GitHub are not going to help. If you want the feature, please post it on Product pains where other people can upvote it and the team can prioritize accordingly.

About your issue, it works fine for me as long as I don't use any flexDirection: row. Here is my code for reference - https://github.com/scrollback/io.scrollback.neighborhoods/blob/master/app/views/ChatBubble.js

And a screenshot demonstarting it on Android.

[gastonmorixe]

@satya164 thanks, will further research. I think that I don't use any is key.

[npomfret]

Has this issue be solved? I'm having the same problem

[SudoPlz]

Same problem as well. If you feel the same pain, please let the team know HERE. Also I opened an issue here in case someone can provide a solution specifically to my problem.

[mschipperheyn]

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).

[SudoPlz]

+1 ^ What he said..!

[satya164]

Please don't +1 issues. It spams everyone and not helpful.

Besides the use case is clearly possible. I already posted a screenshot and linked to sample code.

[mschipperheyn]

@satya164 you are assuming a fixed width element such as an image with absolute positioning (it's still an ugly workaround AFAIC). However, when both elements are text / variable width, the only solution would be to calculate the width of the element, which is even uglier. Anyway, I run into this issue all the time in various scenarios. So, I created a product pain item

https://productpains.com/post/react-native/flexdirection-row-breaks-wrap-and-forces-content-off-screen