ReactNative: Text pushing content off-screen

Question

I'm struggling to build an iOS-style table cell component, with title, subtitle, info text on right side, disclosure arrow (chevron) and optional icon. From left-to-right, this can be thought of as:

1. fixed-width icon
2. variable-width title/subtitle
3. variable-width info text
4. fixed-width chevron image

Without the icon, I have this, which looks pretty good:

But once I make the icon visible, it pushes the chevron off the screen:

Because both text fields are variable-width, I cannot set a width on them (instead I have flex: 0 on the left one, and flex: 1 on the right, which causes the left one to be as big as it needs to be, and the right one to resize to fill whatever remaining space there is). In general, this all works well, except that the fixed images on left and right (icon and chevron) cause the left text to start pushing the chevron off the screen (the right text is zero-width at this point, so whether it's off-screen doesn't really matter).

I've tried all manner of fixes, but the only things I've come up with require measuring the size of components. The two hacks were: 1) Set maxWidth on the left text, subtracting the icon / chevron sizes from the total container width. 2) Set paddingRight on the top-most View, to include the measure width of the icon. I'm trying to avoid either of these, because the size of the icon/container are unknown, and I don't want to have to add an onLayout handler to measure them and recompute. Any ideas how this would be possible?

Here's a gist of where I'm at, I've replaced the chevron with a fixed-size orange view: https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6

Answer 1

You can try to give position: 'absolute' into styling & some padding according to if need be.

Answer 2

For me it helped to simply add flex: 1 to the styling of the Text. Then it adjusts appropriately and lets everything else fit in.