'I've been trying to build a game in react native and I have to render some svga files. How can I use svga in react native?

I have tried these npm packages "react-native-svga-player-ex","react-native-svga-player","react-native-svga" but these are outdated and not supported in react version upper than 14. Please suggest any better solution for using svga file in react native.

reactjs react-native

Solution 1:^[1]

You can use a webview with package react-native-webview where the html is the contents of the svga. For example:

import animation from "./assets/animation.svga";

...

return (
   <Webview source={{ html: animation }} />
)

Don't forget to change the style of the webview to have backgroundColor: "transparent", so that it shows the background you have behind (if that is the behaviour you want).

You might need to add something like this in your plugins section of your babel.config.js:

[
    "babel-plugin-inline-import",
    {
        extensions: [".svg", ".svga"]
    }
],

Sources

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

Source: Stack Overflow

Solution	Source
Solution 1	lowkey_daisy

'I've been trying to build a game in react native and I have to render some svga files. How can I use svga in react native?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]