CODEWITHSUNDEEP
javascriptreact-nativesvg
user9846301
user9846301

Reputation:

React Native typescript Svg images not show in Release apk build

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

Upvotes: 1

Views: 1771

Answers (1)

Sameer Kumar Jain
Sameer Kumar Jain

Reputation: 2135

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

Upvotes: 1

Related Questions