Question 34625 in React native Question posted in
The official React Native documentation can be found here.

React Native SVG Import Return Number

Hello last 2 day I struggle with this SVG issue.
First problem is I cannot import svg file it says cannot find module then
I fix it about declaring problem.
Then I find a solution by writing svg data in func like that:

const notifactionIcon = (
  width = 60,
  height = 60
) => `<svg width="${width}" height="${height}" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="60" height="60" fill="url(#pattern0)" />
    <defs>
        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#image0_18_78" transform="scale(0.01)" />
        </pattern>
        <image id="image0_18_78" width="100" height="100"
            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAEq0lEQVR4nO2d34uVRRyHP6O2GVu7buUGBWVqEIEQbaRhUYRRFyFSRFJXddGF1F9QQQVB1E0I3QRFERTdCAVWJkVdGBgJm7RkJJsFmqSl/XC7kN2ni3NOyLbuzHvOvDPzvvt9Lndm3vnMPPu+8573nDNHMgzDMAzDMAzDSIvLHWAQgHWS7pd0Q/dPU5J2Oeem86VaggBDwE7gLP/nLPAKcEHunEsCYBnw/gIi5rMLWJY7b+sBdgTI6PF47rytB5iuIORw7rytBlhbQUaPNblzV6Fp19gr+2hzVfQUNdI0ISv6aNOou62mCWk9jRECXCdpax9Nt3bbGoMCjAJPAgf7WMznMwk8AYzkHlfjAEaA54BTEUTM53fgWeCS3ONsBMB24FgNIuZzFHgo93iLBRgD3ksgYj7vAqO5x18UwHrgUAYZPX4Ars89D0UAbKRzXc/Nb8DNuecj6/shwC2SPpFUyiXjtKQtzrkDuQJkE0LnGdN+SeMVm56UtFvS55K+lXRE0h/dslFJayRtkHSnpPskXVrx+MclbXLO/VSxXXMBVgLfVLykfAU8AAxV6GcIeBD4umJfk8DKOuegKIBXK0zOMWB7hD4fBn6p0O/OGGMtHuB2YC5wUvYAqyP2PQ7sDex7Dtgcq+8iAZYT/hjkDaCfp7u+DCuANwMzTNLmt4GBRwIn4p06JwJwwFuBWdr5ar47CVMBE7CfCgv3AHkuJGyxP1h3liwAdwQM/gxwbcJM64GZgFy3pcqU8vr4aECdF5xzP9aepItz7rCkFwOqPlZ3lqTQWcxPeP4LTwIXZ8g2HJhteYo8qc6QjZIu99R5zTn3d4ow5+KcOyPpdU+1yyQlec6VSsitAXXerj3FYH2HjGFgUgm5yVN+xDn3XZIkC+Ccm5L0s6faRIosqYSs85TvS5JicXwZfGOIQiohV3vKs50d5+DL4BtDFFIJ8X3S43iSFIvjy5Dk0yqphFzkKU9+d7UAf3nKh1OESCXE189ckhSLM+spTzJX7X2S2VBMSGGYkMIwIYVhQgrDhBSGCSkME1IYJqQwTEhhmJDCMCGFYUIKw4QUhgkpDBNSGCakMExIYZiQwjAhhWFCCsOEFIYJKYzahdCi/alSjKVWId0B7Kmzj8R8BozV2UGd33TtydhUVx8ZmJC0t04ptQhpqYwetUqp44v5I5I+VriM05JmgCRfiFmEmW6WVQF1JyTtBu51zv0ZM0TU3YBafmYsxAFJdzvnTsU6YDQhS1BGj6hSoghZwjJ6RJMysBCT8R9RpMS4y7pHJkPqLPRbBj2IPTopDBNSGCakMGIs6mOS1kbI4mObpKf7bPu8pA8iZjkf0zFfkxQNsC9gX6vz8UXu/KE04oclgSs0+OYC4865EzHy1ElT1pAYl8QUl9WBaYoQ315bIVTdQTsLTRHya4RjlLCfipemrCHD6uz53u/23/9IWt3dPa5oGnGGdCfyowEO8WETZDQKYAMw28ct7yxwY+78rQR4pg8hT+XO3Vro7I79cgUZLwGNWCcbDbAN+H4REYeAfn6EMjuN/e+hs7HxZkl3SbpGEursLPqppC+dc74NyQzDMAzDMAzDMAxJ/wI8lEn/91b75AAAAABJRU5ErkJggg==" />
    </defs>
</svg>`

export { notifactionIcon }

But I want to import manually.

enter image description here
It’s pretty interesting
enter image description here

I search on internet. I cannot find any solution with this problem

Did anyone know why this happening?

other things

babel


module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
  }
}

tsconfig

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
  }
}

webpack

import createExpoWebpackConfigAsync from "@expo/webpack-config/webpack"
import { Arguments, Environment } from "@expo/webpack-config/webpack/types"

module.exports = async function (env: Environment, argv: Arguments) {
  const config = await createExpoWebpackConfigAsync(env, argv)

  return config
}

package

{
  "name": "cookingapp",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "eslint '**/* .{js,ts,tsx,jsx}'"
  },
  "dependencies": {
    "@expo/webpack-config": "^0.17.2",
    "babel-plugin-inline-import": "^3.0.0",
    "expo": "^46.0.10",
    "expo-cli": "^6.0.5",
    "expo-status-bar": "~1.4.0",
    "firebase": "9.6.11",
    "fs": "^0.0.1-security",
    "idb": "^7.0.2",
    "node-fs": "^0.1.7",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "^0.70.1",
    "react-native-fs": "^2.20.0",
    "react-native-paper": "^4.12.4",
    "react-native-svg": "^9.13.2",
    "react-native-svg-uri": "^1.2.3",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@react-native-community/eslint-config": "^3.1.0",
    "@types/react": "~18.0.0",
    "@types/react-dom": "17.0.14",
    "@types/react-native": "~0.69.1",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "eslint": "^8.23.1",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-node": "^4.1.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.8",
    "eslint-plugin-react-hooks": "4.3.0",
    "eslint-plugin-react-native": "^4.0.0",
    "file-loader": "^6.2.0",
    "prettier": "^2.7.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.3"
  },
  "private": true
}

Thanks for answer from now…

Tags:

2

Answers


  1. 0

    Looks like you are using the SvgXml component to render the SVG file.
    Looking at their usage docs, you need to update your babel config file.

    1. Update the babel file with the module:metro-react-native-babel-preset preset and the babel-plugin-inline-import plugin.
    module.exports = function (api) {
  api.cache(true)
  return {
    presets: [
      "babel-preset-expo",
      "module:metro-react-native-babel-preset"
    ],
    plugins: [
    [
      "babel-plugin-inline-import",
      {
        "extensions": [".svg"]
      }
    ]
  }
}
    1. Import the SVG file and use the SvgXml Component
    import * as React from 'react';
import { SvgXml } from 'react-native-svg';
import testSvg from './test.svg';

export default () => <SvgXml width="200" height="200" xml={testSvg} />;
    Login or Signup to reply.
  2. 0

    you can render your SVGs using XML strings instead of importing it :

    1- import : import { SvgXml } from 'react-native-svg';

    2- go inside your SVG file, you’ll notice a bunch of XML code with an <svg> tag copy everything inside that <svg> element from the SVG file’s XML code and store it inside a variable. like this

    const icon = <svg ....>...</svg>

    3- Then, pass the icon variable to the xml prop inside your <SvgXml> component, like this :

    <SvgXml xml={icon} width="100%" height="100%" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search