I am encountering the following error when running my React Native app:
ERROR Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ForwardRef`.
in Unknown (created by RHFInput)
in FocusScope
in ActionsheetContentContextProvider
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View)
in MotionComponent
in Unknown (created by StyledSelectActionsheetContent)
in StyledComponent
in Unknown
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View)
in Unknown (created by Select.Content)
in Select.Content
in RCTView (created by View)
in View (created by StyledView)
in StyledComponent
in RCTView (created by View)
in View (created by OverlayView)
in OverlayView (created by OverlayContainer)
in PortalProvider (created by GluestackUIProvider)
in StyledProvider (created by GluestackUIStyledProvider)
in GluestackUIStyledProvider (created by GluestackUIProvider)
in GluestackUIProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in ToastProvider (created by GluestackUIProvider)
in PortalProvider (created by GluestackUIProvider)
in StyledProvider (created by GluestackUIStyledProvider)
in GluestackUIStyledProvider (created by GluestackUIProvider)
in GluestackUIProvider (created by App)
in App (created by RootApp)
in ReactNativeProfiler (created by RootApp)
in RCTView (created by View)
in View (created by __Sentry.TouchEventBoundary)
in __Sentry.TouchEventBoundary (created by RootApp)
in RootApp (created by withDevTools(RootApp))
in withDevTools(RootApp)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
I am using the following libraries and versions:
"@gluestack-style/react": "^1.0.57",
"@gluestack-ui/config": "^1.1.20",
"@gluestack-ui/themed": "^1.1.61",
"@gluestack-ui/themed-native-base": "^0.1.108",
"react": "18.3.1",
"react-native": "0.76.2",
"expo": "^52.0.0",
I suspect the issue might be related to:
Incorrect imports (default vs named imports).
GluestackUI configuration or component usage.
Here’s how I am importing and using the component:
import {
Select,
} from '@gluestack-ui/themed-native-base';
const App = () => (
<Select>
<Select.Item value="1">Option 1</Select.Item>
<Select.Item value="2">Option 2</Select.Item>
</Select>
);
I’ve double-checked my imports, but the error persists.
What I’ve tried:
Verified the imports for Select and its subcomponents.
Checked if any components are undefined.
Confirmed that GluestackUI is correctly set up with its provider.
Question: What could cause this error in this context, and how can I resolve it? Is there a specific configuration step or component usage pattern I might have missed?
p.s It appear after upgrade expo from 51 to 52 SDK