'Screen shot after rendering is done

I am trying to get a few screenshots of views(charts). First, I am requesting data from API then reformat data and render charts and after this point, I want to take screen shots. But on the first try, it always failed because charts are not rendered yet.

Request data:

getJournalsByDateRange(startDate, endDate).then(journalData => {
        setCalendarFormat(formatCalendarObjects(journalData.stool, journalData.diet, journalData.move, journalData.mind, journalData.goal));
    });

Format data:

useEffect(() => {

    setChartsData();
}, [calendarFormatObject]);

setChartsData() is a long method which is setting charts data, on the end of method i am setting isLoading(false)

Screenshosts:

useEffect(() => {
        if (!loading)
            takeScreenShots();
    }, [loading]);


 const takeScreenShots = () => {

    let snaps = {
        allLogCounts: '',
        stoolBarChart: '',
        stoolLineChart: '',
        dietBarChart: '',
        dietLinearChart: '',
        mindfulnessPracticePieChart: '',
        mindfulnessLinearCount: ''
    }


    captureRef(stoolBartChartRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    )
    console.log(snaps)
    captureRef(stoolLinearChartRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    );

    captureRef(dietBartChartRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    );

    captureRef(dietLinearChartRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    );

    captureRef(allLogCountsRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    );


    captureRef(mindfulnessPracticePieChartRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    );

    captureRef(mindfulnessLinearCountRef, {
        format: "png",
        quality: 1
    }).then(
        uri => console.log(uri, "SNAPS"),
        error => console.error("Oops, snapshot failed", error)
    );

    console.log(snaps);
    // generatePdf(snaps, userName, startDate, endDate)
}

How to take screenshots after charts are renderd?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Screen shot after rendering is done

Sources

Related Questions