Styling based off page number

[dani-abou]

Discussed in https://github.com/diegomura/react-pdf/discussions/1803

^{Originally posted by dani-abou May 2, 2022} Hello!

I want to change a page's padding based off page number, so even pages will have bigger padding on the right, and vise versa. I am trying to use something like this https://react-pdf.org/advanced#dynamic-content, by having a custom Page containing one View with a render prop returning another View that styles according to the page number. The children of the custom component should be passed as the children of that innermost View. But, I have some styling on the children that is getting lost somewhere along the way.

Here is the custom component:

Here is the children component that is losing styling

Here's what it's supposed to look like (ie passing through Page from line 22 instead of Dummy), without desired page number padding

And here is what it looks like going through Dummy:

[Sascha195]

Unfortunately I've the same issue.

If you have the render prop on a <View /> the return value ignores the styling of the child components:

<View render={({ pageNumber }) => ( <View style={...(is ignored)}> <Text style={...(is ignored)}>Text</Text> </View> )} />

I'm looking for a fix on this :(

[amir7896]

i also facing same issue child component styling ignored

[robyhuzwandar]

I'm facing this issue as well

[Fritola]

There's any update? I'm still facing this issue

[as-85]

Any news on this? Nothing new has been written here for ages. New Feature labeled on Jun 17, 2022... :O

[KMJ-007]

any update ?

[KMJ-007]

don't know how this will help, but i wanted to know the total number of pages outside of the Text component because view doesn't give you that, using which i achieved my goal,

you can do something like this

let totalPagesNumber = 0;

return(
<Document>
// other code

    <Text render={({ pageNumber, totalPages }) => { totalPagesNumber = totalPages; return null}} />
<Document/>
)

now you have variable with total number of pages that you can use it!

[KMJ-007]

don't know how this will help, but i wanted to know the total number of pages outside of the Text component because view doesn't give you that, using which i achieved my goal,

you can do something like this

let totalPagesNumber = 0;

return(
<Document>
// other code

    <Text render={({ pageNumber, totalPages }) => { totalPagesNumber = totalPages; return null}} />
<Document/>
)

now you have variable with total number of pages that you can use it!

thanks to Krishna-404 for this trick!