0

Using react-pdf with n number of pages, so I have a fixed footer with page numbers. When I change the fontSize the page number disappears when using the render prop. The first page does not use the render prop and that text will display no matter what the font size is.

Could be a bug that needs to be reported, but wanted to see if someone had some input first

When fontSize is set this will not render

<View
  style={styles.footer}
  render={({ pageNumber }) => (
    <Text style={styles.footerPageNumber}>
      Page {pageNumber}/{pageTotal}
    </Text>
  )}
  fixed
/>

This always renders

<View style={styles.footer}>
  <Text style={styles.footerPageNumber}>Page 1/{pageTotal}</Text>
</View>

CSS

footer: {
  position: "absolute",
  bottom: 0,
  width: PDF_WIDTH,
  height: "100px",
  borderTop: "1px solid #C4C4C4",
},
footerPageNumber: {
  position: "absolute",
  right: theme.spacing(8),
  top: theme.spacing(6),
  fontSize: "10px",
},
bonum_cete
  • 4,730
  • 6
  • 32
  • 56

1 Answers1

0

In this project we have eslint rules discouraging values in css without units. Turns out that in the context of the render prop you must use a unit-less value I guess.

bonum_cete
  • 4,730
  • 6
  • 32
  • 56