gluestack

gluestack Logogluestack

gluestack ERROR Warning: TypeError: Cannot call a class as a function

gronnmann posted this in #support
Open in Discord
Avatar
gronnmannOP
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>
    );

1 Reply