Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager

Question

I am on a React Native project, I tried to use chart related dependencies in my project, and I have tried @rainbow-me/animated-charts and react-native-wagmi-charts, and all of them leads to the same error Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager. I am stucked for 24 hours, and do not know how to proceed. Could anyone provide any clue of how to resolving this? Thank you very much in advance.

Blow are my package.json:

{
  "name": "tradingbot",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@rainbow-me/animated-charts": "^1.0.0-alpha.6",
    "axios": "^1.5.1",
    "expo": "^49.0.3",
    "expo-constants": "~14.4.2",
    "expo-font": "~11.4.0",
    "expo-linear-gradient": "^12.5.0",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-dotenv": "^3.4.9",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "^12.5.1",
    "react-native-wagmi-charts": "^2.3.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9"
  },
  "resolutions": {
    "metro": "^0.73.7",
    "metro-resolver": "^0.73.7"
  },
  "overrides": {
    "metro": "^0.73.7",
    "metro-resolver": "^0.73.7",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0"
  },
  "private": true
}

Below are the output of running npm why react-native-svg:

[email protected]
node_modules/react-native-svg
  react-native-svg@"^12.5.1" from the root project
  react-native-svg@"^12.1.0" from @rainbow-me/[email protected]
  node_modules/@rainbow-me/animated-charts
    @rainbow-me/animated-charts@"^1.0.0-alpha.6" from the root project
  peer react-native-svg@"*" from [email protected]
  node_modules/react-native-wagmi-charts
    react-native-wagmi-charts@"^2.3.0" from the root project

My babel.config.js file:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      '@babel/plugin-proposal-export-namespace-from',
      require.resolve('expo-router/babel'),
      'react-native-reanimated/plugin',
    ],
  }
}

Answer 1

I finally resolve it by using 'npx expo install react-native-svg' not 'npm i react-native-svg'

now 'react-native-wagmi-charts' works, and '@rainbow-me/animated-charts' shows another error