[ BUG ] Error: Element type is invalid: expected a string about react-native-reusables HOT 3 CLOSED

Thanks @mrzachnugent - I can confirm this resolved it for me using

import { Info, LucideIcon, MoonStar, Plus, Sun, X } from "lucide-react-native";
import { cssInterop } from "nativewind";

function interopIcon(icon: LucideIcon) {
  cssInterop(icon, {
    className: {
      target: "style",
      nativeStyleToProp: {
        color: true,
        opacity: true,
      },
    },
  });
}

interopIcon(Info);
interopIcon(MoonStar);
interopIcon(Sun);
interopIcon(Plus);
interopIcon(X);

export { Info, MoonStar, Plus, Sun, X };

Appreciate your prompt response! I'll be on the look out going forward but think your future state solution makes sense.

from react-native-reusables.

Edit: This issue is caused because a component is trying to import an Icon that you are not yet exporting from the ~/components/Icons file.

To fix this issue:,

• Find the component that is importing an icon that doesn't exist. Your IDE should have a red squiggly line under the Icon name in its import statement.
• Go to the ~/components/Icons file
• Import the missing icon(s) from lucide-react-native
• For each newly imported icon, call the interopIcon and pass it the icon
• Export the Icon at the end of the file.

Hey @MikeSchlosser16 Thanks for bringing this up.

To fix this, you have to import, interop, then export the X icon from the ~/components/Icons:

import { Info, LucideIcon, MoonStar, Sun, X } from 'lucide-react-native';
import { cssInterop } from 'nativewind';

function interopIcon(icon: LucideIcon) {
  cssInterop(icon, {
    className: {
      target: 'style',
      nativeStyleToProp: {
        color: true,
        opacity: true,
      },
    },
  });
}

interopIcon(Info);
interopIcon(MoonStar);
interopIcon(Sun);
interopIcon(X);

export { Info, MoonStar, Sun, X };

For Futre Implementation
This issue also occurs in other components. In order to fix this issue, the Cli will add a file for each icon. This way I can easily add icons when components require them. I will also move them to the lib folder.

lib
│
└───Icons
│   │   interopIcon.ts
│   │   Info.tsx
│   │   MoonStar.tsx
│   │   Sun.tsx
│   │   X.tsx

from react-native-reusables.

I was getting that error every time I tried to use Select, DropDownMenu, Dialog. And @mrzachnugent response fixes it.
To break down @mrzachnugent fix for others that might face the same issue before the Bug fix update.

1. Locate the Icons file in ~/components
2. Find out the lucide icons that the component i.e Select uses by checking the related ~/components/ui/select.ts
3. import these icons in the Icon.ts file
4. Add a complementary interopIcon(IconName) statement for each icon
5. Add each iconName to the exports

import { Info, LucideIcon, MoonStar, Plus, Sun, X, ...IconNames } from "lucide-react-native";
import { cssInterop } from "nativewind";

function interopIcon(icon: LucideIcon) {
cssInterop(icon, {
className: {
target: "style",
nativeStyleToProp: {
color: true,
opacity: true,
},
},
});
}

interopIcon(Info);
interopIcon(MoonStar);
interopIcon(Sun);
interopIcon(Plus);
interopIcon(X);
interopIcon(IconName);
interopIcon(IconName);
interopIcon(IconName);

export { Info, MoonStar, Plus, Sun, X, ...IconNames };

Thank you for the fix @mrzachnugent
Thank you bringing this up @MikeSchlosser16

from react-native-reusables.