Can't dynamically render two Text components

I want to put two separate <Text> elements in my footer with different styling, both of which need access to the totalPages, however for some reason only the first one is ever displayed.

Can reproduced on the page wrap example (https://react-pdf.org/repl?example=page-wrap) by replacing the single page number <Text> element with the following:

      <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
        `a ${pageNumber} / ${totalPages}`
      )} fixed />
      <Text style={[styles.pageNumber, {bottom: 0}]} render={({ pageNumber, totalPages }) => (
        `b ${pageNumber} / ${totalPages}`
      )} fixed />

I would expect to see the ‘b’ element at the bottom of the screen, with the ‘a’ above it, but I only see ‘a’

[Skywalker13]

Alright, I just found in documentation that totalPages is available only in <Text> component. Here is a little workaround that I found, it’s not very readable but it works.

 <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
     <View>
          <Text> {`a ${pageNumber} / ${totalPages}\n`}</Text>
          <Text> {`b ${pageNumber} / ${totalPages}`}</Text>
     </View>
 )} fixed />

<View> is not really supported (I’ve experimented stuff like that and inspected the source code) in the render of <Text>. Just use a React.Fragment instead.

<Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
   <>
        <Text> {`a ${pageNumber} / ${totalPages}\n`}</Text>
        <Text> {`b ${pageNumber} / ${totalPages}`}</Text>
   </>
)} fixed />

[zacaj]

Ah, thank you. I didn’t think you were allowed to put a View instead of the Text render, but that was because it crashes if you’re using styled components for the view/text.