expo-router iOS build is crashing after installing and using Lucide react-native icons.

[ritmillio]

Package

• [ ] lucide
• [ ] lucide-angular
• [ ] lucide-flutter
• [ ] lucide-preact
• [ ] lucide-react
• [X] lucide-react-native
• [ ] lucide-solid
• [ ] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] source/main
• [ ] other/not relevant

Version

0.306.0

Browser

• [ ] Chrome/Chromium
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] iOS Safari
• [ ] Opera
• [ ] Other/not relevant

Operating system

• [ ] Windows
• [ ] Linux
• [ ] macOS
• [X] Other/not relevant

Description

Install lucide-react-native to an expo-router project. When I run the app locally on Expo Go there is no issue whatsoever but as soon as I build the app for production iOS App Store , after testing the app on Test Flight It crashes immediatelly.

Steps to reproduce

1. Install lucide-react-native to a plain expo-router project
2. Use one lucide icon in one of the component.
3. Build and submit app via EAS
4. Testflight build will crash immediatelly

Checklist

• [X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[ritmillio]

is there any update on this ? I would love to use lucide-react with expo-router

[He1nr1chK]

I am experiencing the same issue when trying to use the dynamic icons as specified here: https://lucide.dev/guide/packages/lucide-react-native#icon-component-example

[gpaiva985]

is there any update on this ? I would love to use lucide-react with expo-router

Hey @ritmillio, did you find a workaround for this?

[ritmillio]

@gpaiva985 This is fixed. You can use lucide-react-native with expo-router now :) Also make sure that react-native-svg latest version is installed.

Here's a simple example how you might do that in TypeScript:

import React from 'react';
import { icons, LucideProps } from 'lucide-react-native';
import { ColorValue } from 'react-native';

interface IconProps {
  name: keyof typeof icons;
  color?: ColorValue;
  size?: LucideProps['size'];
}

const Icon: React.FC<IconProps> = ({ name, color, size }) => {
  const LucideIcon: React.FC<LucideProps & { color?: ColorValue }> =
    icons[name];

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

[diogotl]

It still doesnt work for me.

I tried to use @ritmillio solution and even in a very basic use like <Icon name="Eye" size={24} color="#F09F27" /> It throws the following error in LogCat when I try to render a view with a Lucide icon on it.

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

[ritmillio]

@diogotl Hey, This error tells me that there is an issue with react-native-svg in your project. It's either not installed or not the correct version. When I built my app I used react-native-svg: 14.1.0 and lucide-react-native: 0.359.0.

[diogotl]

@ritmillio Thank you!! It turns out I was using an older version even though Expo Doctor indicated it was the latest.

By the way, this error was also occurring with Android builds. Hopefully, it can be helpful to someone.

[gpaiva985]

@gpaiva985 This is fixed. You can use lucide-react-native with expo-router now :) Also make sure that react-native-svg latest version is installed.

Here's a simple example how you might do that in TypeScript:

import React from 'react';
import { icons, LucideProps } from 'lucide-react-native';
import { ColorValue } from 'react-native';

interface IconProps {
  name: keyof typeof icons;
  color?: ColorValue;
  size?: LucideProps['size'];
}

const Icon: React.FC<IconProps> = ({ name, color, size }) => {
  const LucideIcon: React.FC<LucideProps & { color?: ColorValue }> =
    icons[name];

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

Got it, thanks! Everything is working great!

[wetterkrank]

Hi! Just to let you know -- came across this issue, updated the packages, still getting the error (Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager).

"react-native-svg": "14.1.0",
"lucide-react-native": "0.363.0",

Upd: I'm using Expo and a development build on iOS device. Tried deleting cache and reinstalling all packages -- no result. Recreating the development build with eas build worked though.

[DaltonHarvey]

er not installed or not the correct version. When I built my app I used react-native-svg: 14.1.0 and lucide-

Same