get totalPages prop in render method of Text component

Describe the bug I am trying to display totalPages prop, but nothing is rendered. I am using version 2.0.0-beta.6 of react-pdf.

I tried to follow the example of the documentation. My code looks like this:

<Text render={({ pageNumber, totalPages }) => ${pageNumber} / ${totalPages}} />

To Reproduce

1. Install latest version of react-pdf (2.0.0-beta.6)
2. Try to display totalPage prop in a text

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• React-pdf version v2.0.0-beta.6

[seunggs]

Finally figured it out - it was a styling issue.

You have to specify the minHeight property in order to show the actual content. Here’s an example:

<Text
  style={{
    fontSize: '12px',
    color: '#aaa',
    position: 'absolute',
    minHeight: '40px',
    bottom: '0px',
    left: '0px',
    right: '0px',
    textAlign: 'center',
  }}
  render={({ pageNumber, totalPages }) => (
    `${pageNumber}`
  )}
  fixed
/>

[brvnonascimento]

@brvnonascimento, I believe you’ll have to add the fixed attribute, too. In your example, you’ll probably also need to add a semi-colon ; to the end of your return line. If this doesn’t work, add more styling per previous examples. And if that doesn’t work, try logging to the console to see what’s going on there.

Thank you! It worked like a charm, with the “fixed” attribute it worked even without setting a minHeight. Before I was just setting fixed to the parent View. I ended up using an arrow function so the semicolon was unnecessary.