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

[Jeevithaofficial]

ERROR Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager.

This error is located at:
in RNSVGPath (created by Path)
in Path (created by Rule)
in RNSVGGroup (created by G)
in G (created by Rule)
in RNSVGGroup (created by G)
in G (created by Svg)
in RNSVGSvgViewAndroid (created by Svg)
in Svg (created by Rule)
in Rule (created by BarChart)
in RCTView (created by View)
in View (created by BarChart)
in RCTView (created by View)
in View (created by BarChart)
in RCTView (created by View)
in View (created by BarChart)
in BarChart (created by NativeCharts)
in NativeCharts (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by Drawer)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by Drawer)

My React Native version is 0.71.11
React-native-svg Version is 13.10.0

Can anyone help me to find the solution please

Thanks

[vkushnirtheprosperity]

I have the same problem on RN 0.72

[oliviercperrier]

same problem while trying to run me android expo development build.

RN: 0.72.3
react-native-svg: 13.10.0

[WoLewicki]

Could you provide a minimal reproducible code example? Could be as a simple repository. It would be very helpful.

[oliviercperrier]

@WoLewicki Okay so i found my problem. I have an External Components Library which has react-native-svg as a peer dependency. So i never installed react-native-svg manually in my main application because it was handle by the peer dep.

So if i don't install it in my app dependencies, then i get the RNSVGPath is null error after building my expo development build. But if i do, then everything works.

[eatanga-git]

@WoLewicki Okay so i found my problem. I have an External Components Library which has react-native-svg as a peer dependency. So i never installed react-native-svg manually in my main application because it was handle by the peer dep.

So if i don't install it in my app dependencies, then i get the RNSVGPath is null error after building my expo development build. But if i do, then everything works.

Which library is it?

And what version of expo is it?

[oliviercperrier]

@WoLewicki Okay so i found my problem. I have an External Components Library which has react-native-svg as a peer dependency. So i never installed react-native-svg manually in my main application because it was handle by the peer dep.

So if i don't install it in my app dependencies, then i get the RNSVGPath is null error after building my expo development build. But if i do, then everything works.

Which library is it?

And what version of expo is it?

@eatanga-git

Its a internal library that i build. Its a private one.

And i use expo 49.0.5

[thalesgaldino]

I have this same issue in this repo: https://github.com/thalesgaldino/demoapp

I you go to src/SearchHeader.tsx and in line 33 you add:

<InputIcon pl="$3">
    <Icon as={SearchIcon} />
  </InputIcon>

Then, you will get this error.

[WoLewicki]

So yeah, for some reason react-native-svg is not installed correctly in your cases. But it seems like a problem with package managers, not the library itself. So can I help you anyhow with it?

[shanebrowncs]

Also having this issue when consuming react-native-autocomplete-dropdown. This problem is happening for a number of people. Can you elaborate on how this is a package manager issue? Should we create a bug report for npm?

[talhabinkhalil]

Facing same issue but i am not using expo

[leo-mangold]

I'm still facing the same issue on expo 51 and I tried everything in here. Also a lot of versions of react-native-svg installed via expo install:
15.1.0, 13.14.0, 13.4.0

  "dependencies": {
    "@clerk/clerk-expo": "^1.0.5",
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "@tanstack/react-query": "^4.36.1",
    "@trpc/client": "^10.45.2",
    "@trpc/react-query": "^10.45.2",
    "@types/react-native-snap-carousel": "^3.8.11",
    "bmg-models": "file:../models",
    "bmg-server": "file:../server",
    "expo": "~51.0.8",
    "expo-crypto": "~13.0.2",
    "expo-device": "~6.0.2",
    "expo-font": "~12.0.5",
    "expo-image": "~1.12.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.14",
    "expo-secure-store": "~13.0.1",
    "expo-splash-screen": "~0.27.4",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.4",
    "expo-web-browser": "~13.0.3",
    "lucide-react-native": "^0.379.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.1.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-web": "~0.19.6",
    "superjson": "^2.2.1"
  },

[bohdanprog]

Hello @leo-mangold, @Jeevithaofficial,
Can you share the example app to reproduce that issue?
Thank you

[Metaphysics0]

I was encountering the same error, but running npm i react-native-svg worked for me.

node: v20.12.2
OS: Apple M1 - Sonoma 14.6.1
Here is my package json

{
  "name": "my app",
  "main": "expo-router/entry",
  "dependencies": {
    "@commitlint/cli": "^19.5.0",
    "@commitlint/config-conventional": "^19.5.0",
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@react-native-google-signin/google-signin": "^13.1.0",
    "@react-native-menu/menu": "^1.1.3",
    "@react-native-picker/picker": "^2.8.1",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@tanstack/react-query": "^5.59.13",
    "date-fns": "^4.1.0",
    "expo": "~51.0.28",
    "expo-constants": "~16.0.2",
    "expo-contacts": "~13.0.5",
    "expo-dev-client": "~4.0.28",
    "expo-device": "~6.0.2",
    "expo-font": "~12.0.10",
    "expo-image-picker": "~15.0.7",
    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "~6.3.1",
    "expo-notifications": "~0.28.18",
    "expo-router": "~3.5.23",
    "expo-secure-store": "^13.0.2",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "firebase": "^10.14.1",
    "glob": "^11.0.0",
    "husky": "^9.1.6",
    "lodash": "^4.17.21",
    "lucide-react-native": "^0.454.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-ios-context-menu": "^2.5.1",
    "react-native-ios-utilities": "^4.4.5",
    "react-native-modalize": "^2.1.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-svg": "^15.8.0",
    "react-native-swipeable-item": "^2.0.9",
    "react-native-toast-message": "^2.2.1",
    "react-native-web": "~0.19.10",
    "zeego": "^2.0.1",
    "zustand": "^5.0.0-rc.2"
  },
  "resolutions": {
    "expo-constants": "14.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/lodash": "^4.17.10",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "cross-env": "^7.0.3",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "standard-version": "^9.5.0",
    "typescript": "~5.3.3"
  },
}

My implementation of the icons were as followed

// tab-menu.constant.ts
import { CreateGroupButton } from '@/components/Screens/Groups/CreateGroupButton';
import {
  MessagesSquare,
  Dumbbell,
  Users,
  User,
  type LucideIcon,
} from 'lucide-react-native';

export const TAB_MENU_ITEMS: TabMenuItem[] = [
  {
    name: 'index',
    title: 'Workout',
    iconComponent: Dumbbell,
  },
  {
    name: 'feed',
    title: 'Feed',
    iconComponent: MessagesSquare,
  },
  {
    name: 'groups',
    title: 'Groups',
    iconComponent: Users,
    headerRight: CreateGroupButton,
  },
  {
    name: 'profile',
    title: 'Profile',
    iconComponent: User,
  },
];

export interface TabMenuItem {
  name: string;
  title: string;
  iconComponent: LucideIcon;
  iconName?: string;
  focusedIconName?: string;
  headerRight?: React.ComponentType<any>;
}

// TabMenuItem.tsx
import React from 'react';
import { TabMenuItem as TabMenuItemType } from '@/constants/tab-menu.constant';

interface TabMenuItemProps
  extends Pick<
    TabMenuItemType,
    'iconComponent' | 'iconName' | 'focusedIconName'
  > {
  color: string;
  focused: boolean;
  size?: number;
}

export function TabMenuItem({
  iconComponent: Icon,
  iconName,
  focusedIconName,
  color,
  focused,
  size = 28,
}: TabMenuItemProps) {
  const props = { color, size, style: { marginTop: 4 } };

  if (focused && focusedIconName) {
    // @ts-ignore
    return <Icon name={focusedIconName} {...props} />;
  }

  // @ts-ignore
  return <Icon name={iconName} {...props} />;
}