Hey!
I'm using gluestack with nativewind in the latest version of react native.
I keep getting this issue:
ERROR Warning: TypeError: Cannot call a class as a function
This error is located at:
9 |
10 | const Box = React.forwardRef<React.ComponentRef<typeof View>, IBoxProps>(
> 11 | function Box({ className, ...props }, ref) {
| ^
12 | return (
13 | <View ref={ref} {...props} className={boxStyle({ class: className })} />
14 | );
Call Stack
Box (components/ui/box/index.tsx:11:27)
ProfilePage (app/(protected)/profile.tsx:10:30)
ProtectedLayout (app/(protected)/_layout.tsx:8:45)
ScreenContentWrapper (<anonymous>)
RNSScreenStack (<anonymous>)
RNCSafeAreaView (<anonymous>)
AuthProvider (context/supabase-provider.tsx:33:40)
GluestackUIProvider (components/ui/gluestack-ui-provider/index.tsx:17:4)
RootLayout(./_layout.tsx) (<anonymous>)
RNCSafeAreaProvider (<anonymous>)
App (<anonymous>)
ErrorOverlay (<anonymous>)
This happens in this class, under app/(protected)/profile.tsx
return (
<Box className={"flex-1 p-4 space-between"}>
<Text className="text-2xl font-bold">Profile Page</Text>
<Text className="mt-4">This is your profile page.</Text>
<Button onPress={handleSignOut} className="w-full max-w-xs">
<ButtonText>Log out</ButtonText>
</Button>
</Box>
);