feat: The label prop for TextInput can now take a component (ReactElement) as well as string

[smbadiwe]

Summary

The PR provides a way to solve the problem being discussed at #2591. Currently there's no way to customize the label on TextInput. A common use-case is adding a red asterisk to indicate that a field is required. This PR provides for the label field to also accept a component, thereby solving the problem.

Test Plan

Here's an example of how a custom component can be passed in:

<TextInput
      label={<Text style={{ color: 'red'}}>Must Fill</Text>}
      placeholder='You must fill out this field'
    />

Of course the old usage still works, so this is not a breaking change.

<TextInput
      label='May Fill'
      placeholder='You may not fill out this field'
    />

[callstack-bot]

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

[p-syche]

hi @smbadiwe , thank you very much for this change. It's great you were able to introduce a new functionality without breaking the old.

Your code is good, however I would love to see some PR improvements before approving. Namely I would love to see the new feature added to the TextInput examples and I would appreciate a test checking the function you added for checking label change.

[p-syche]

You wrote very extensive tests 💪 great job!

LGTM

[MatthiasD0]

This change is causing Converting circular structure to JSON error here.
Before the "feature" being added here was already working on our side.
You can not run JSON.stringify on the ReactComponent seen in the screenshot. This is causing the issue here.

[lukewalczak]

I think the issue can be fixed on the 4.12.0-alpha.0

[mfds]

Quick question: was this feature tested with the outlined mode? Doesn't look like there's an example on the example folder and I'm getting weird "glitches" when I try:

Label before animation	Label after animation

If you zoom the second picture, you can see the Label label repeated twice. The second one is squished :/

[Rahim-Technyx]

label={
<Text style={[{ color: 'red', textAlign: 'right' }]}>
{title}

} ---- im trying to align my label text right with style but it is not moving anywhere only the color is getting changed? is there any way?