Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
TextAlign does not work on android
See original GitHub issueIs this a bug report or a feature request?
Bug report
Have you read the guidelines regarding bug report?
Yes
Have you read the documentation in its entirety?
Yes
Have you made sure that your issue hasn’t already been reported/solved?
There is a question regarding this, but it has not been reported as a bug
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
The bug only exists on android
Is the bug reproductible in a production environment (not a debug one)?
I have reproduced the bug in all my environments.
Have you been able to reproduce the bug in the provided example?
No. I reproduced it several times with different configurations in my project, as well as seeing others talking about the issue. (https://github.com/archriss/react-native-render-html/issues/264)
Environment
Environment: Expo: v35.0.0 React: 16.0.0-beta.5 React native: 0.59 (according to expo documentation) react-native-render-html: 4.2.0
Target Platform: Android 9.0
Steps to Reproduce
- pass valid html to the html prop. Examples:
<div>this is a div test<div><p>this is a paragraph test<p>
- pass styles to baseFontStyle and/or tagStyles. Examples:
baseFontStyle: { textAlign: 'center' }tagStyles: { div: { textAlign: 'center' }, p: { textAlign: 'center' }}
Expected Behavior
Expected text from html elements to align according to the passed style. Also expected that adding the style to the html before it is passed should work: <div style="text-align: center">some text here</div>
Actual Behavior
The value of text-align is never used. Text will align center if it can fit on 1 line, regardless of the value passed to text-align. Text will align left if it needs multilines, regardless of the value passed to text-align.
This is an example with multiline text This is an example with a short text.
As mentioned above, I also expected <div style="text-align: center">some text here</div> to work, but it does not. However it will work if we switch div to a paragraph like so: <p style="text-align: center">some text here</p>
This is currently the only workaround I have found, but it is not a viable one.
Reproducible Demo
I dont have time right now to create a reproducible demo, because I cant share code from the one i found the bug in, but it’s possible to reproduce with just using a simple <div> tag and seeing that the alignment is off.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:7
- Comments:10
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@sanders-vag a workaround would be to wrap all the html with a
<p style="text-align: center"></p>:Disclaimer: I only testet this with text and BRs and div as direct child of the centered P.
Thanks @neXorianus! It worked like a charm!