Putting <Image/> in the render prop causes a crash (Dynamic content)

[jrtell1]

Describe the bug
When placing an <Image/> element in a render prop an error occurs.
For example, I want to show an image last but only on the first page, not on the consecutive pages. So I need to use the render prop to get pageNumber value. It works using <Text/> but not with <Image/>

To Reproduce
Steps to reproduce the behavior including code snippet (if applies):

1. Add the following code anywhere in a <Document>:

<View render={() => (
  <Text>This should work</Text>
)} />

2. The above should work and render properly.
3. Then change the code to use an <Image/>:

<View render={() => (
  <Image
    style={styles.image}
    src="/images/quijote1.jpg"
  />
)} />

4. React-pdf will now crash

React PDF REPL link
You will see it getting stuck on "Rendering PDF"

Expected behavior
I expect the image being rendered.

Desktop (please complete the following information):

• OS: Windows
• Browser: chrome
• React-pdf version: 3.1.14

[Justinio99]

@jrtell1 I had the same problem and was able to resolve it.
#2465

[jrtell1]

@Justinio99 Nice one!

[jrtell1]

Here's hoping it'll get merged!

[jrtell1]

@Justinio99 I just discovered that there are issues with custom fonts within the render prop as well, as soon as I put text inside a render prop, it loses any defined custom font and render with some default font instead.

[jgo80]

Units like style={{ height: '2cm' }} are also not working from within the render prop. Only numbers are working.

Edit: Flexbox is not working as well, I assume it is a general problem.

[hwaliashraf]

If it helps, the issue is PROBABLY related to the image size. For small images (in KBs) it works fine

[jrtell1]

@hwaliashraf I've tried with as small as 3 KB images

[jrtell1]

@jgo80 The styles issue seems to be a separate issue and have been resolved 😄 : #2531 (comment)
(Not released yet though at time of writing)