search

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

Hi @jsamr , I am facing this issue please help...!! First html content is good if I used this library -> react-native-htmlview #585

Closed DeepakSharma04 closed 2 years ago

DeepakSharma04 commented 2 years ago

Hi @jsamr , I am facing this issue in IOS APP please help...!! First html content is good if I used this library -> react-native-htmlview

                           <HTMLView
                            value={item.body.replace(/\n/g, '')}
                            gesMaxWidth={Dimensions.get('window').width}
                          />

But if I used this -> react-native-render-html , Second html content shows vertical space .

                  <ScrollView horizontal={true}>
                            <SafeAreaView>
                              <RenderHtml
                                contentWidth={width}
                                source={{ html: item.body }}
                                enableExperimentalMarginCollapsing={true}
                                enableExperimentalBRCollapsing={true}
                                enableExperimentalGhostLinesPrevention={true} />
                            </SafeAreaView>
                          </ScrollView>

Simulator Screen Shot - iPhone 11 - 2022-09-16 at 12 07 20

Originally posted by @DeepakSharma04 in https://github.com/meliorence/react-native-render-html/issues/516#issuecomment-1248978401

jsamr commented 2 years ago

To be able to reproduce, I would need the HTML code you are trying to render.

DeepakSharma04 commented 2 years ago

HTML code

<div>asd</div>
<div>
  <br>
</div>
<div>asda</div>
<div>as</div>
<div>
  <br>
</div>
<div>asda</div>
<div>
  <br>
</div>
<div>asd</div>
<div>
  <br>
</div>
jsamr commented 2 years ago

@DeepakSharma04 I took almost the same HTML snippet as you, just wrapped in a div to colorize background:

<!DOCTYPE html><body>
  <div style="background-color: purple">
    <div>asd</div>
    <div>
      <br />
    </div>
    <div>asda</div>
    <div>as</div>
    <div>
      <br />
    </div>
    <div>asda</div>
    <div>
      <br />
    </div>
    <div>asd</div>
    <div>
      <br />
    </div>
  </div>
</body>

This is what I get in a browser (Firefox): image

And this is what I get on Android with react-native-render-html@6.3.4:

image

I don't see any discrepancies in spacing. See this snack for a reproduction: https://snack.expo.dev/@jsamr/rnrh-585