TextInput should have intrinsic size based on placeholder

[bryanjclark]

Description

I'm trying to make a UISearchField using RN components, and I'm unable to create a center-aligned text-and-icon layout for the placeholder ("empty state") of the text field.

I've added some borders and background colors to highlight what's going on - notice how the light-blue area (where the TextInput is) is collapsed to near-zero width:

However, if I replace the TextInput with a Text component, the layout works as expected with flexGrow and flexShrink:

Reproduction

I've created a sample project here that demonstrates the issue: https://sketch.expo.io/Sk5b_uEox

Solution

Adjust TextInput's implementation so its value and placeholder work with flexGrow and flexShrink.

Additional Information

• React Native version: RN v43
• Platform: iOS, haven't tried Android
• Dev tools: iOS 10.2

[shergin]

Do you want to see <TextInput placeholder="Search"> with same size that <Text>Search</Text> has?
So, in other words, do you expect from <TextInput> to have intrinsic content size which respects placeholder and value?

Actually, <TextInput> does respect flexGrow and flexShrink, I can see it right from your (awesome) example.

[shergin]

@bryanjclark Ta-da! ea9d674 (At least for iOS.)

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[JaEdmuva]

Hi, I'm using 0.54.1 and this works perfectly in iOS, but the issue persists in android. Is this being o has been reviewed by any android developer?

[hramos]

If this happens in 0.54.1 can you open a new issue?