React-pdf: get totalPages prop in render method of Text component

[taikio]

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

[mwasson74]

I am facing the same issue.

[vasily-gurin]

Same issue. Tried both V2.0.0-beta.6 and 1.6.9
Basically no matter what you put in the render method (including just text), nothing will be rendered. Also tried rendering Link inside the Text component - still same result.
The workaround I have found is to use render method of a View component and render element inside it, but that removes the possibility to use totalPages.

It would have been much easier if totalPages was available in the View component as well.

[seunggs]

Same issue here - how did you render the pageNumber via View? It won't render anything for me at all.

[vasily-gurin]

After the multiple attempts I have came up with the piece of code below. One more thing: try restarting everything. I had a few rendering issues with react-pdf which got self cured this way.

*this code does not show the page number for the final page, but you can get rid of the if part.

render={({ pageNumber, totalPages }) => {
return pageNumber !== totalPages + 1 ? Page ${pageNumber} of ${totalPages} : ``;
}}
fixed
/>

[seunggs]

Hi vasily-gurin, thanks for the response but I'm still not able to render the page number. When I log out pageNumber, it shows the numbers in the console and I can also show the background color using the style attribute, but it just won't render the page number.

If anyone has a solution, I'd very much appreciate it if you chimed in.

Thanks!

[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
/>

[mwasson74]

I can confirm that using minHeight shows the content and not using minHeight does not show the content. Seems like this might still be a bug or it should at least be stated in the documents as required.

Has anyone done any experimenting using the component with render?

[mwasson74]

@taikio why was this closed? Will this be mentioned in the documentation?

[brvnonascimento]

<Text style={{ minHeight: '40px' }} render={({ pageNumber, totalPages }) => {
     return `Página ${pageNumber} de ${totalPages}`
}} />

I did apply the minHeight style property but there's still nothing being rendered by the Text component.

[mwasson74]

@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.

[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.