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

Wrapping text around images. #573

Open
huv1k opened this issue Apr 16, 2019 · 8 comments · May be fixed by #1896
Open

Wrapping text around images. #573

huv1k opened this issue Apr 16, 2019 · 8 comments · May be fixed by #1896

Comments

@huv1k
Copy link

huv1k commented Apr 16, 2019

Is your feature request related to a problem? Please describe.
I would like to use float to wrap text around images. Is this possible with current implementation? I don't want to use flex-flow: row to have image and text in one row. because I want to wrap text around an image. The text could be 10 pages long like a lot of articles in news do.

Describe the solution you'd like

<View>
  <Image
    src="https://avatars1.githubusercontent.com/u/5691926?s=460&v=4"
    style={{ width: 100, float: 'left' }}
  />
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
    ut ligula ullamcorper, sodales ante dignissim, commodo lorem. In a
    egestas ex. Sed rhoncus lorem posuere massa rutrum consectetur. In
    at augue vitae risus fermentum volutpat sagittis nec ex.
  </Text>
</View>

Describe alternatives you've considered
Using flex, but it's not possible to wrap text under the image with it.

@diegomura
Copy link
Owner

Thank you @HuVik !
Currently is not possible to achieve something like this. The fact that you can't achieve this using flexbox is not a trivial problem, mainly because we use Yoga to perform and calculate layout. Not sure if Yoga supports this, but if don't the implementation would be even more difficult

@kwoterG
Copy link

kwoterG commented Oct 6, 2019

@diegomura it would be really great if this feature is developed. Is there anyway I can support to achieve this?

I'm using react-pdf to generate dynamic PDF files from a WYSIWYG editor. The PDF's are created by end-users, so I don't have any control on where and when the images are positioned.

This is an example of a document I would like to render as PDF.
https://app.kwoter.nl/d/yqLQ4Hgiw6ZB4oanr

Is there anyway I can be of help here?

@diegomura
Copy link
Owner

This is something that has to be build on both textkit and react-pdf layers, but to be honest, I couldn't think yet about an implementation yet. The first step would be if textkit supports exclude sections from render containers (I wrote the current implementation but I don't remember if does. An old, but incomplete, version did). But the problem relies in where that exclusion area is, and how to deal with pagination. I'm working in a v2.0 solution which is much more modular and maybe then it would be easier to add, but still, it's not as easy as it might seem

@kwoterG
Copy link

kwoterG commented Oct 9, 2019

Tnx for the reply.
For now we will tell our users that we don't support this yet.

I will take a look if I can be of any help, but i'm afraid my knowledge is a bit limited...

Tnx for all your work on react-pdf. It's great.

@MichalKalita
Copy link

Any progress on this feature?

@lfoliveir4
Copy link

Any progress on this feature??

@diegomura diegomura pinned this issue Jun 5, 2022
@diegomura diegomura linked a pull request Jun 20, 2022 that will close this issue
@CrownKira
Copy link

Any progress on the PR so far ?

@platon-ivanov
Copy link

It would be great to see this feature to make it into the library!

@diegomura diegomura unpinned this issue Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants