fix(text-input-label-background): custom component background height

[seb-zabielski]

Motivation

Label with nested text components are displayed twice.

Previously, to calculate the background of a label, the label itself was rendered and the color of its text was set to transparent. Everything worked for the label as a string or a single <Text> element. For nested <Text> components, setting color: "transparent" didn't work and the text was duplicated (nested text color was not set as transparent). This pull request changes the way to get the right shape, as we already store the height of the label. Instead of rendering the label, we simply use the height value.

Related issue

#4441

Test plan

Run example app and use label from the related issue or example below

<TextInput
  mode="outlined"
  label={
    <Text style={{ color: 'red' }}>
      First <Text style={{ color: 'blue' }}>Second</Text>
    </Text>
  }
  placeholder="Type something"
  value={outlinedText}
  onChangeText={(outlinedText) =>
    inputActionHandler('outlinedText', outlinedText)
  }
/>

BEFORE	AFTER
Red "First" is not duplicated, but blue "Second" is displayed twice. Second one is a tiny one	The label is not duplicated. The background has not changed

[callstack-bot]

Hey @seb-zabielski, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[gedu]

Does this work even if I wrap the Text with View or Fragment

[seb-zabielski]

Fragment yes. For View background also yes, but in this case label itself isn't positioned correctly. Position of the label is not related to this PR and it looks the same without this fix.

Fragment	View

[gedu]

Awesome, just wanna double, we have at least 2 workarounds for now, thanks