CODEWITHSUNDEEP
javascriptreactjsreact-pdfpdf-rendering
thegreenedition
thegreenedition

Reputation: 105

How to place text over image in react-pdf/renderer

I'm currently trying to place a text over an image that is covering the entire page in react-pdf renderer. Does anyone know how to do this? Tried checking the issues in their docs and found this thread: https://github.com/diegomura/react-pdf/issues/1905 with no correct answers.

My code:

import { View, Page, Image, StyleSheet, Text } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#fff",
    width: "100%",
    orientation: "portrait",
  },
  view: {
    width: "100%",
    height: "100%",
    padding: 0,
    backgroundColor: "white",
  },
  title: {
    margin: 20,
    fontSize: 25,
    textAlign: "center",
    textTransform: "uppercase",
  },
});

export const IntroductionPage = () => (
  <Page object-fit="fill" style={styles.page} size="A4">
    <View style={styles.view}>
      <Text style={styles.title}>HELLO WORLD</Text>
      <Image src="https://images.unsplash.com/photo-1523047840906-018758c5ffa1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3026&q=80" />
    </View>
  </Page>
);

I want to place the text HELLO WORLD over the image but instead it only renders on top and pushes the image down.

Upvotes: 3

Views: 5401

Answers (1)

Mohamed Ali Ben Thaier
Mohamed Ali Ben Thaier

Reputation: 180

The best way that worked for me was using absolute positioning for Text components. Something similar to this

const styles = StyleSheet.create({
    text: {
        position: "absolute",
        left: '0px',
        right: '0px',
        marginHorizontal: 'auto',
        textAlign: "center",
        justifyContent: 'center',
    }
...
})

            <Document >
                <Page size="A4" style={styles.body}>
                    <View >
                        <Image src={invitation}></Image>
                    </View>

                    <Text style={{top:"350px", ...styles.text }} >
                        {details.groom}
                    </Text>

                    <Text style={{top:"450px", ...styles.text }} >
                        {details.bride}
                    </Text>

                    <Text style={{top:"550px",...styles.text,}} >
                        would love your presence to celebrate our wedding {"\n"}{"\n"}
                        Friday 30 August 2023 At 6:00 PM{"\n"}

                        At Sousse Municipality

                    </Text>
                </Page>
            </Document>
        </PDFViewer>

The result ended up being like this (I ommited some code in this answer for readability but you can find my entire code in here https://codepen.io/daliovic/pen/VwdZwEo?editors=0010)

result

Upvotes: 3

Related Questions