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

Images display on the own line instead of be mixed with the text #593

Open wandersage opened 1 year ago

wandersage commented 1 year ago

Hi @jsamr , I faced with the same issue on "react-native-render-html": "^6.3.4" . every image displays on the next line. I tried to use this snippet but images doesn't display at all.

          customHTMLElementModels={{
            img: defaultHTMLElementModels.img.extend({
              contentModel: HTMLContentModel.mixed,
            }),
          }}

Please advice me what should I add to fix this behaviour. Thanks.

expected result: images and text alternate in the same line. actual result: photo_2022-11-01 15 32 09

actual code:

 <RenderHTML
          enableExperimentalMarginCollapsing
          enableExperimentalGhostLinesPrevention
          contentWidth={width}
          source={{
            html: '<p style="text-align: justify;">Включение проблескового маячка оранжевого цвета на транспортных средствах с опознавательным знаком <img alt="" title="" src="https://dummyimage.com/25x25" height="25" /> «Дети», на механических транспортных средствах дорожно-эксплуатационной службы во время выполнения работы на дороге, на крупногабаритных и тяжеловесных транспортных средствах,&nbsp;на сельскохозяйственной технике, ширина которой превышает 2,6 м, не предоставляет им преимущества в движении, а служит&nbsp;для привлечения внимания и предупреждения об опасности. При этом водителям транспортных средств дорожно-эксплуатационной службы во время выполнения работы на дороге разрешается отступать от требований дорожных знаков (кроме знаков приоритета&nbsp;и знаков <a title="sign_3.21" href="/ru/znaky/3/3.21/">3.21</a> <img alt="3.21 &quot;Въезд запрещен&quot;" title="sign_3_21" src="https://dummyimage.com/25x25" height="25" />, <a title="sign_3.22" href="/ru/znaky/3/3.22/">3.22</a> <img alt="3.22 &quot;Поворот направо запрещен&quot;" title="sign_3_22" src="https://dummyimage.com/25x25" height="25" />, <a title="sign_3.23" href="/ru/znaky/3/3.23/">3.23</a> <img alt="3.23 &quot;Поворот налево запрещен&quot;" title="sign_3_23" src="https://dummyimage.com/25x25" height="25" />)</p>',
          }}
          renderersProps={{
            a: {
              onPress: (_, href) => {
                console.log(href);
              },
            },
          }}
          tagsStyles={{
            img: {
              height: 26,
              alignItems: 'flex-start',
              alignSelf: 'auto',
              justifyContent: 'flex-start',
            },
          }}
        />

Originally posted by @wandersage in https://github.com/meliorence/react-native-render-html/issues/371#issuecomment-1298606116

4mit commented 7 months ago

any update @jsamr ?

4mit commented 7 months ago

dont use this lib.

i used below and works fine for me https://www.npmjs.com/package/react-native-htmlview