Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay text #3

Closed
piranna opened this issue Jan 12, 2018 · 7 comments
Closed

Overlay text #3

piranna opened this issue Jan 12, 2018 · 7 comments

Comments

@piranna
Copy link

piranna commented Jan 12, 2018

<Text
style={hiddenTextStyle}
onLayout={this._onLayout}>
{text}
</Text>

I've found that an overlay text is being added while writting the text of a new chip. Don't know if it's purpossed for Android or iOS, but by using react-native-web it looks a bit ugly. Could you be able to clarify the purposse of that, and if so if it could be removed (maybe by an optional flag)?

@raynor85
Copy link
Owner

raynor85 commented Jan 12, 2018

Example without hidden Text hack
withouthiddenfield
Example with hidden Text hack (as it should be)
withhiddenfield
To be fair, it's too over engineered, probably a simple well tuned minWidth would be more than sufficient. For your use case, feel free to remove it. Ideally you might create a pull request with an optional prop that disable the automatic new line when the input doesn't fit the container.

@piranna
Copy link
Author

piranna commented Jan 12, 2018

I see... yes, maybe the minWidth would be a better option. In my case, since it's being used internally an HTML input tag that's the reason it's showed duplicated (and in fact, the Text node it's shown on over the input, not below as your example). I'll try to take a look and see if I can be able to fix it, or at least to add the option. Thanks! :-)

@piranna
Copy link
Author

piranna commented Jan 12, 2018

I have done a quick check and with react-native-web the text field automatically expands and move to the next line if text is too long, and when removed some characters it goes back to the previous line, that I think it's the expected behaviour (both for me and you :-) ). Thinking on this, seems that's because HTML by default use the flow layout while React and ReactNative use flex layout by design, so probably that's the reason you needed to do the over-enginering hack. I think there are some modules that implement flow layout, so it could be used in that case so it would be fixed everywhere, how do you see it? :-)

@raynor85
Copy link
Owner

autoReflow property added that defines whether the text should reflow to the new line if there is no enough space. Default is true

@piranna
Copy link
Author

piranna commented Jan 13, 2018

Great! :-) when this will be available in npm?

@raynor85
Copy link
Owner

raynor85 commented Jan 13, 2018 via email

@piranna
Copy link
Author

piranna commented Jan 14, 2018

Thank you! :-D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants