[X] I have confirmed that this bug has not been reported yet
Description
When I set textAlign: 'justify' to the html tag. There is a weird big gap added (refer to screenshot). This occurs very randomly (also depends on screen sizes) and I tried to debug what the problem was and eventually found out that textAlign: 'justify' causes that problem. If I remove that line from the CSS, everything works fine. But textAlign: 'justify' is very important for my project. I will share the code below for reference and also attach a screen shot to be more precise in what I mean.
From the above screenshot you can see that the gap between 1&2 and 4&5 are quite bigger compared to the gap between 2&3 and 3&4, even though they have the same exact styling. I cannot understand why this is happening.
Any help with this issue is much appreciated
React Native Information
0.66.5
RNRH Version
6.3.4
Tested Platforms
[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows
Reproduction Platforms
[x] Android
[x] iOS
[ ] Web
[ ] MacOS
[ ] Windows
Minimal, Reproducible Example
const htmlContent = `
<div>
<ol>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat fugiat commodi vitae laborum. Voluptatem amet
cupiditate nam fugiat praesentium ea illum quaerat, quas quos assumenda sed saepe modi rem incidunt exercitationem
quis necessitatibus consectetur porro labore tempore repudiandae! Quia eius quisquam officiis necessitatibus et
harum placeat distinctio deleniti autem</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam animi nobis quos numquam hic libero aspernatur,
ex iste reiciendis ea, debitis distinctio quis optio tempore. Deleniti voluptate eveniet tempore, quos tempora
ducimus sapiente hic vero minus quibusdam beatae, ratione quo dolores soluta iure eaque quas inventore voluptas
harum, tenetur repudiandae? Assumenda perspiciatis lorem ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo recusandae voluptas iste nihil. Ducimus,
distinctio laboriosam voluptatibus magnam quae soluta. Sunt explicabo, blanditiis minima amet fugit consectetur.
Necessitatibus optio rem quis nemo, veritatis ullam ea!</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat fugiat commodi vitae laborum. Voluptatem amet
cupiditate nam fugiat praesentium ea illum quaerat, quas quos assumenda sed saepe modi rem incidunt exercitationem
quis necessitatibus consectetur porro labore tempore repudiandae! Quia eius quisquam officiis necessitatibus et
harum placeat distinctio deleniti autem. lorem ipsum dolor</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia rem numquam aliquid commodi non error, magnam ut
dolorem optio officiis at cupiditate placeat nesciunt consequuntur iure impedit alias dignissimos eligendi
corporis molestias quis? Ex aliquam asperiores ea facilis delectus odio unde distinctio saepe fugiat animi?</li>
</ol>
</div>
`
const source = { html: htmlContent }
const tagStyle = {
li: {
color: 'black',
textAlign: 'justify',
marginBottom: 8,
fontSize: 12
}
}
return <RenderHTML contentWidth={360} source={source} tagsStyles={tagStyle} />
Additional Notes
The above reproducible code is the exactly what I used.
I would also recommend trying this out with content with different lengths. Since this happens very randomly its really hard to tell when this bug will show up while replicating it.
Closing the app and opening again will render the same result.
Decision Table
<yyy>
is not rendered”Good Faith Declaration
Description
When I set
textAlign: 'justify'
to the html tag. There is a weird big gap added (refer to screenshot). This occurs very randomly (also depends on screen sizes) and I tried to debug what the problem was and eventually found out thattextAlign: 'justify'
causes that problem. If I remove that line from the CSS, everything works fine. ButtextAlign: 'justify'
is very important for my project. I will share the code below for reference and also attach a screen shot to be more precise in what I mean.From the above screenshot you can see that the gap between 1&2 and 4&5 are quite bigger compared to the gap between 2&3 and 3&4, even though they have the same exact styling. I cannot understand why this is happening.
Any help with this issue is much appreciated
React Native Information
RNRH Version
6.3.4
Tested Platforms
Reproduction Platforms
Minimal, Reproducible Example
Additional Notes
The above reproducible code is the exactly what I used. I would also recommend trying this out with content with different lengths. Since this happens very randomly its really hard to tell when this bug will show up while replicating it. Closing the app and opening again will render the same result.