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.

Sign up for GitHub

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

Jump to bottom

How to render 3 images in vertically center? #371

Closed
sunilprajapatisa opened this issue May 21, 2020 · 7 comments
Closed

How to render 3 images in vertically center? #371

sunilprajapatisa opened this issue May 21, 2020 · 7 comments
Labels
is:FAQ candidate A canonical issue to put in the FAQ. question

Comments

@sunilprajapatisa
Copy link

sunilprajapatisa commented May 21, 2020 •
edited
Loading

Here is sample HTML code for 3 image render should be vertically centred. And also should be in One Line

const htmlDescriptionContent = `<p style="text-align:center"><img alt="" src="https://fomoyolo-dev-assets.s3.amazonaws.com/image-gallery/c4ea7600-9acb-11ea-a7d0-9bf50f73b3c4.jpg" style="height:32px; width:32px" />&nbsp; <img alt="" src="https://fomoyolo-dev-assets.s3.amazonaws.com/image-gallery/5358e030-9ad0-11ea-a7d0-9bf50f73b3c4.jpg" style="height:32px; width:32px" />&nbsp;&nbsp; <img alt="" src="https://fomoyolo-dev-assets.s3.amazonaws.com/image-gallery/99439680-9ad0-11ea-a7d0-9bf50f73b3c4.jpg" style="height:32px; width:57px" />
> </p>`

<HTML
     containerStyle={{ width: '100%' }}
     html={htmlDescriptionContent}
     imagesMaxWidth={Dimensions.get('window').width}
     onLinkPress={(evt, href) => this.props.onLinkPress(evt, href)}
/>

What get result:
Screenshot 2020-05-21 at 6 57 40 PM

Want Result:
Img_ResultShouldBe

Followed readme file and prepared a demo.
@murilobd
Copy link

try to change the tag for images and add a flexDirection as row

const tagsStyles = {
    img: {
      flexDirection: "row"
   }
}

<HTML
     containerStyle={{ width: '100%' }}
     html={htmlDescriptionContent}
     imagesMaxWidth={Dimensions.get('window').width}
     onLinkPress={(evt, href) => this.props.onLinkPress(evt, href)}
     tagsStyles={tagsStyles}
/>

@sunilprajapatisa
Copy link
Author

try to change the tag for images and add a flexDirection as row

const tagsStyles = {
    img: {
      flexDirection: "row"
   }
}

<HTML
     containerStyle={{ width: '100%' }}
     html={htmlDescriptionContent}
     imagesMaxWidth={Dimensions.get('window').width}
     onLinkPress={(evt, href) => this.props.onLinkPress(evt, href)}
     tagsStyles={tagsStyles}
/>

Not working

@sunilprajapatisa
Copy link
Author

@Exilz , Any update on this?

@jsamr jsamr added question is:FAQ candidate A canonical issue to put in the FAQ. labels Jul 4, 2020
@jsamr
Copy link
Collaborator

jsamr commented Jul 19, 2020

Currently this is not supported, because we break the inline formatting context to block when encountering img tags. This is because until recently, RN didn't support Views as children of Text nodes. We will allow this in a future release, where you'll be able to have more fine-grained control over layout.

@sunilprajapatisa
Copy link
Author

Please do need full for this issue asap because my app have feature to to display images inline. Also I tried do solved but no get success and I'm stuck in this issue.

@jsamr
Copy link
Collaborator

jsamr commented Nov 26, 2020

Closing in favor of #428

@jsamr jsamr closed this as completed Nov 26, 2020
@wandersage
Copy link

wandersage commented Nov 1, 2022 •
edited
Loading

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',
            },
          }}
        />

@wandersage wandersage mentioned this issue Nov 5, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
is:FAQ candidate A canonical issue to put in the FAQ. question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jsamr @wandersage @murilobd @sunilprajapatisa