1

In my app, SVG images are not displayed in release apk. I use typescript in react native Please give me a solution if it works then I accept your answer, Anyone, here with a solution for this? Thanks in Advance.

I also refer to this react-native build apk

but this is not working for me. Please help

  • Please provide your code block related to SVG. Also, please provide which platform causing the issue and which library are you using to render SVG. This will help us better evaluate your problem and provide you solution. – Sameer Kumar Jain Aug 29 '20 at 05:54
  • @SaachiTech package use react-native-svg-uri and my code and problem accurs in android build –  Aug 29 '20 at 05:55
  • This is a known bug with Android, here is more info https://github.com/vault-development/react-native-svg-uri#known-bugs – Sameer Kumar Jain Aug 29 '20 at 05:58
  • You can find working solution here https://stackoverflow.com/a/70522619/4934132 – Ross Fine Dec 29 '21 at 17:04

1 Answers1

1

Since OP has an issue with Android and this is a known bug with the library OP using. Here is a workaround which works on both platform with the library

create a new file, name it Svg.js

import React from 'react';
import { Platform } from 'react-native'
import SvgUri from 'react-native-svg-uri';
//import { SvgUri } from 'react-native-svg';
export default ({ width, height, source, fill }) => Platform.select({
    ios: () => <SvgUri width={width} height={height} source={source} fill={fill} />,
    android: () => { const SVG = source; return <SVG width={width} height={height} fill={fill} /> },
})();

Create another js file that holds your SVG, name it imageManager.js. Import SVG and export it like this

import Home from '../assets/home.svg';//Change it with your SVG path
module.exports = {
  Home
}

Now in any of your js where you want to display SVG, use above component like this

import SvgUri from './Svg';
import { Home } from './imageManager';
<SvgUri width="100%" height="35" source={ Home  } />

You might also need to install react-native-svg-transformer. Then please update your metro.config with following

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

This should solve the issue in the production Android. Good Luck

Sameer Kumar Jain
  • 2,074
  • 1
  • 13
  • 22
  • @HAPPYBHALODIYA ok, you did not mention that in your question. Please update your question. – Sameer Kumar Jain Aug 29 '20 at 09:00
  • I got Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number. @SaachiTech –  Aug 29 '20 at 09:22
  • @HAPPYBHALODIYA Are you using expo for the test? Please post the SVG file you are trying to render? – Sameer Kumar Jain Aug 29 '20 at 14:49