The height of `View` component in "react-pdf" taking almost the entire page

user_19292398 0
Viewed 27

I am having some layout issues with react-pdf.

This is my code

// JSX
<Document>
    <Page size="A3" style={styles.page}>
      <View style={styles.header} debug={true}>
        <Text style={styles.logo}>Cashflow</Text>
        <Text style={styles.date}>Monday, May 12, 2020</Text>
      </View>
      <View style={styles.summary} wrap={false}>
        <Text style={styles.logo}>Section #2</Text>
      </View>
  </Page>
</Document>

// stylesheet


const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
    backgroundColor: "#F6F8FA",
    display: "flex",
    border: "1px solid red",
    width: "100%",
    padding: "26px 20px",
  },
  logo: {
    fontWeight: 800,
    fontSize: "20px",
    lineHeight: "22px",
    color: "#67ADC8",
    fontFamily: "Inter",
  },
  date: {
    fontWeight: 700,
    fontSize: "14px",
    lineHeight: "22px",
    color: "#94A6B3",
    fontFamily: "Inter",
  },
  header: {
    margin: 0,
    display: "flex",
    flexDirection: "row",
    padding: 0,
    // flexGrow: 1,
    width: "100%",
    justifyContent: "space-between",
    alignItems: "flex-start",
  },
  summary: {
    borderBottom: "1px solid #F3F4F6",
    borderTop: "4px solid #67ADC8",
    background: "#FFFFFF",
    padding: "32px",
    marginTop: "40px",
  },
});

But after downloading the pdf, this is what I see. I had to debug={true} to see it clearly. The problem here is that the height of the View is almost the height of the page. I don't know where the extra height is coming from. Please I need help with this, thanks. image

react-pdf reactjs
1 Answers

I have fixed the issue. I noticed that this extra height was coming from the lineHeight in the style for the Text component. I removed the lineHeight and the extra height was gone. I'm curious to know why the lineHeight of "22px" is increasing the height as much as that,

user_192923980
Related