Babel plugin's guessingStyledComponents interferes with third-party libs and custom components breaking UI in runtime

[vyobukhov]

Description

babel plugin should only touch gluestack components

CodeSandbox/Snack link

No response

Steps to reproduce

Right now plugin creates an array of imported component names that were imported from gluestack lib:

guessingStyledComponents.push(
   importSpecifierPath.node.local.name
);

But it means that on later stage in JSXOpeningElement plugin will try to manipulate other components with matching names. Lib component names are too generic (Icon, Heading, Text, Button, etc.).

For example, I have custom Icon component that also has mr/ml props that got broken by this plugin

gluestack-ui Version

1.1.18 (1.0.5 for babel plugin)

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

Right now "easy" solution is using import alias like

import {Button as GsButton} from '@gluestack-ui/themed';

But maybe better solution will be to use some hidden property in all components like isGluestackUICmp and check for it's presence in JSXOpeningElement

[surajahmed]

@vyobukhov Thanks for reporting this. We're working on this.