100% height image triggers "bigger than available page height"

[Svish]

Describe the bug I want to add an image as a background that should fill the whole page. When doing so, it does seem to work, but I'm getting this warning which is a bit strange:

Node of type IMAGE can't wrap between pages and it's bigger than available page height.

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

1. Go to repl
2. Check the code is this:

const Quixote = () => (
  <Document>
    <Page>
      <Image
        style={styles.image}
        src="/images/quijote1.jpg"
      />
    </Page>
  </Document>
);
const styles = StyleSheet.create({
  image: {
    position: 'absolute',
    minWidth: '100%',
    minHeight: '100%',
    height: '100%',
    width: '100%',
  },
});

ReactPDF.render(<Quixote />);

3. Check the browser console and find the following warning:

Expected behavior Given that the image height is set to 100%, I do not expect to get a warning about it being "bigger than available page height"

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome, but also get the same warning when using renderToFile via Node
• React-pdf version: v2.0.20

[Svish]

Seems the same warning is also triggered if I use view height/width instead of percent:

{
  position: 'absolute',
  height: '100vh',
  width: '100vw',
}

[gwalshington]

I'm getting this same error, and it seems like it's also slowing down the rendering of these images, which when there are more than about 50, it's killing the page.

[Svish]

I've found a workaround for now that gives same result, but without a warning, by using:

    <Image
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        objectFit: 'fill',
      }}
      source={background}
    />

[gwalshington]

hmm... that doesn't work for me. I still see the error and the images are now stretched between 2 pages. Thanks though!

[Svish]

Probably depends where it is and what it's inside of 🤷‍♂️

[bryanbc96]

I solved it adding the component View before Image:

<Document>
    <Page>
     <View style={{ display: 'flex', height: '100%', width:'100%', position: 'relative' }}>
      <Image
        style={styles.image}
        src="/images/quijote1.jpg"
       />
    </View>
  </Page>
</Document>

[ghost]

I'm also facing this issue. It also generates blank page after the image.