meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

weird gaps between tags when using `textAlign: 'justify'` #610

Open paperskyline opened 1 year ago

paperskyline commented 1 year ago

Decision Table

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 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.

MicrosoftTeams-image

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

Reproduction Platforms

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.

michelebombardi commented 1 year ago

Same problem here