question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does <SvgUri /> component support cache?

See original GitHub issue

Does <SvgUri /> component support cache like react native’s <Image /> component?

For example I’m using cache for my remote png files like

<Image
     source={{
     uri: "https://example.com/image.png",
     cache: 'force-cache',
     }}
/>

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:5

github_iconTop GitHub Comments

4reactions
27leavescommented, Mar 29, 2021

I also needed caching and solved it like this:

// CachedSVGUri.js
import React, {Component} from 'react';
import {SvgFromXml} from 'react-native-svg';
import SVGCacheService from '../services/storage/SVGCacheService';

export async function fetchCached(uri) {
    const cached = await SVGCacheService.getSvg(uri);
    if (cached) {
        return cached;
    } else {
        const response = await fetch(uri);
        const svg = await response.text();
        SVGCacheService.setSvg(uri, svg);
        return svg;
    }
}

export default class CachedSvgUri extends Component {
    state = {xml: null};
    componentDidMount() {
        this.fetch(this.props.uri);
    }
    componentDidUpdate(prevProps) {
        const {uri} = this.props;
        if (uri !== prevProps.uri) {
            this.fetch(uri);
        }
    }
    async fetch(uri) {
        try {
            this.setState({xml: uri ? await fetchCached(uri) : null});
        } catch (e) {
            console.error(e);
        }
    }
    render() {
        const {
            props,
            state: {xml},
        } = this;
        return <SvgFromXml xml={xml} override={props} />;
    }
}
// SVGCacheService.js
import AsyncStorage from '@react-native-community/async-storage';

const ASYNC_STORAGE_KEY = 'svg-cache';

let data = null;

const loadData = async () => {
    const defaultData = {
        svgs: {},
    };

    const result = await AsyncStorage.getItem(ASYNC_STORAGE_KEY);
    data = result ? await JSON.parse(result) : defaultData;
    data = {...defaultData, ...data};
};

export default class SVGCacheService {
    static async setSvg(uri, svg) {
        const oldData = data || {};

        const newData = {
            ...oldData,
            svgs: {
                ...oldData.svgs,
                [uri]: svg,
            },
        };

        data = newData;

        await AsyncStorage.setItem(ASYNC_STORAGE_KEY, JSON.stringify(newData));
    }

    static async getSvg(uri) {
        if (data === null) await loadData();
        return data.svgs[uri];
    }
}

0reactions
27leavescommented, Jun 14, 2021

@danyasnov hey there! thank you for your answer and the hint with the memory leak. do you know why this is the case and how you could test for that? thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Does <SvgUri /> component support cache? #1328 - GitHub
Does component support cache like react native's component? For example I'm using cache for my remote png files like.
Read more >
react-native-svg-cache - npm
URL SVG's are cached using react native's Async Storage. Forked from 'react-native-svg-uri'. Merge with source code of 'react-native-fast-svg'.
Read more >
How to cancel SvgUri request when component will unmount
This is an no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous task in "a...
Read more >
react-native-fast-svg - npm Package Health Analysis - Snyk
Render SVG images in React Native using a URL or a static file. SVG's rendered from a url are cached using react native's...
Read more >
Working with SVGs in React Native - OpenReplay Blog
Converting an existing SVG image to a React Native component can be a ... The react-native-svg library has a SvgUri component that allows...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found