gluestack

gluestack Logogluestack

gluestack ui components extraction vs @gluestack-ui/themed

jandalmau posted this in #support
Open in Discord
Avatar
jandalmauOP
Hi, currently the docu for v2 extracts all the components for its usage, is there an equivalent to the previous "@gluestack-ui/themed"? I have a component library where default components are replaced by styled ones and it creates naming issues if they are extracted in the lib

Thanks! 🥸

17 Replies

Avatar
viraj1098
Hey @jandalmau , Can you give us your exact use case and elaborate more?
Avatar
jandalmauOP
yes, currently with v1, i apply stylings on the default component like this (example):

import {styled} from '@gluestack-style/react';
import { Box as BSBox} from '@gluestack-ui/themed';

export const Box = styled(BSBox, {
  variants: {
    variant: {
      default: {
        px: '$6',
        py: '$4',
        display: 'flex',
        _web: {
          height: '$100vh',
          width: '$100vw',
        },
        _dark: {
          bg: '$neutral10',
        },
        _light: {
          bg: '$neutral98',
        },
      },
    },
  },
});


then i can call the component with the variant i want, from my component lib.

How can i archive the same with v2?
Avatar
viraj1098
import React from 'react';
import { View } from 'react-native';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
import { tva } from '@gluestack-ui/nativewind-utils/tva';

type IBoxProps = React.ComponentPropsWithoutRef<typeof View> &
  VariantProps<typeof boxStyle>;

export const boxStyle = tva({
  base: '',
  variants: {
    variant: {
      default:
        'px-6 py-2 flex web:h-[100vh] web:w-[100vw] bg-neutral-98 dark:bg-neutral-100 ',
    },
  },
});

const Box = React.forwardRef<React.ElementRef<typeof View>, IBoxProps>(
  ({ className, variant = 'default', ...props }, ref) => {
    return (
      <View {...props} ref={ref} className={boxStyle({ class: className })} />
    );
  }
);
Box.displayName = 'Box';
export { Box };
I hope this answer your question.
Avatar
jandalmauOP
im having an issue on the exctracted components, in some of the classsName i have this error pop up.

Type '{ className: string; context: { variant: "filled" | "unfilled"; size: "sm" | "md" | "lg"; }; style?: StyleProp<ViewStyle>; children?: ReactNode; hitSlop?: number | ... 2 more ... | undefined; ... 88 more ...; ref: ForwardedRef<...>; }' is not assignable to type 'IntrinsicAttributes & Omit<ViewProps & WithStyleContextProps & RefAttributes<typeof View> & IAccordionProps, "ref"> & RefAttributes<...>'.
  Property 'className' does not exist on type 'IntrinsicAttributes & Omit<ViewProps & WithStyleContextProps & RefAttributes<typeof View> & IAccordionProps, "ref"> & RefAttributes<...>'.
Image
Avatar
viraj1098
Hey @jandalmau , Make sure you have typing for nativewind is setup correctly.
here is a doc https://www.nativewind.dev/v4/getting-started/typescript
If issue persist please raise a issue on github with github repo link to help us debug easier.
Avatar
jandalmauOP
its using v4 or v2?
Avatar
viraj1098
v4
Avatar
jandalmauOP
hmm, still facing the same issue, ive only extracted the button one and its giving me the isssue in the className, tailwind configured correctly, same for nativewind (including the nativewind-env.d.ts)
Avatar
jandalmauOP
btw this project is not a nextjs project
its a custom library for components (worked fine with v1)
a little more insight
if i export the component directy into the nextjs project, works fine no issues
if i do it in the component lib i get thiss error
Avatar
viraj1098
If you are creating a package to share
you can checkout https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal this stater kit.