Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wandersage opened this issue Nov 5, 2022 · 2 comments
Open

Comments

@wandersage
Copy link

wandersage commented Nov 5, 2022

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 #371 (comment)

@4mit
Copy link

4mit commented Apr 4, 2024

any update @jsamr ?

@4mit
Copy link

4mit commented Apr 4, 2024

dont use this lib.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants