Flex-grow not resizing after angular binding changes text [iOS only]


Imagine a flexbox that contains two labels one holding text that is dynamically changed and the second holding static text like a fonticon. I want the dynamic changing text label to fill the entire flexbox just leaving room for the fonticon label at the end. So I set FlexGrow to 1 on the label bound to the dynamic string.

This works on android, but on ios, if I initialize someChangableLabelText = "" and I set it later to some ChangableLabelText = "some new text" the flex grow doesn’t expand to show the new text.

As a test, if instead I initialize someChangableLabelText = " " (there is a space in the quotes), then 0 is displayed and the binding works with the flexbox. I’m not sure why a zero is displayed in this case.

Has anyone else came across this? I realize there are more ways to accomplish this, but am trying to confirm that this is a bug or if I’m missing something.

<FlexboxLayout alignItems="center" (tap)="functionThatChangesLabelText()">
  <Label text="{{ someChangableLabelText }}" FlexGrow="1"></Label>
  <Label text="{{ dropdownIcon }}"></Label>