Dynamic content not showing inside flex elements in v2.0

[DanielBerrocal]

Describe the bug Hi, I've working with the 1.6.16 version for a couple of weeks, everything went fine. I had a couple of dynamic content renders in my code, mainly to show the page number as part of a header. I updated the library to the latest version yesterday and noticed that the page number is not showing anymore. I found out that if I delete the flex properties in the header, the page number does appear, but that messes up the whole set up of the header. Do you have any idea about why is this happening?

To Reproduce The JSX document I'm using is basically this:

<Document>
     <Page size={LETTER} syle={styles.somePadding}>
         <View style={styles.flexRow} fixed>
             <Image source={"someImage"} />
             <Text>Some header Text</Text>
             <Text render={({pageNumber}) => (`${pageNumber}`)}  />
         </View>
     </Page>
 </Document>

"flexRow" and "somePadding" are defined as: somePadding: { padding: "72pt 72pt", },

flexRow:{ display: "flex", justifyContent: "space-between", flexDirection: "row", alignItems: "center", },

Expected behavior The page number should render, even if the containing view has flex properties

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.04.2 LTS
• Browser: Firefox
• React-pdf version: Working: 1.6.16, not working 2.0.0 onwards

[ajitbohra]

Experience similar with dynamic content on view

[dominikpegler]

can confirm the issue.

Conditional rendering like below works only if

• the rendering component is a Text component or a View component with position property set to "absolute"

• the rendered component is a Text component and has fontSize set to something other than 9 or 12

    <View
      style={{ position: "absolute" }}
      render={({ pageNumber }) => {
        return (
          pageNumber === 1 && (
            <Text style={{ fontSize: 10 }}>THIS WILL SHOW UP ON PAGE 1</Text>
          )
        );
      }}
    />
  

Not working means, that it breaks the rendering, A font size of 9 or 12 will not break the rendering, but the rendered component will not be on the PDF.

[dominikpegler]

Does anybody know a workaround to this?

[TheoOliveira]

For me, it seems remove flex attribute worked @dominikpegler

[TheoOliveira]

Probably something related to browser rendering issues towards flex

[steven-wilson-crl]

In my case, I am trying to dynamically render tabular data, but flex settings are ignored. In this case, it recognizes the flexDirection and stacks them horizontally, but with no regard to sizing each element with respect to its flex style

<View style={{ flexDirection: 'row', flexWrap: 'nowrap' }}>
  <View style={{ flex: 1 }}>
    <Text>{'Column 1'}</Text>
  </View>
  <View style={{ flex: 3 }}>
    <Text>{'Column 2'}</Text>
  </View>
  <View style={{ flex: 6 }}>
    <Text>{'Column 3'}</Text>
  </View>
</View>