variant TS error when styling a dripsy comp

[jjenzz]

when using the styled api to compose a dripsy comp as follows:

import { styled, Pressable } from 'dripsy';

export const Button = styled(Pressable, {
  themeKey: "buttons",
  defaultVariant: "medium",
})({
  alignSelf: "center",
});

i'm presented with the following error:

to fix, i had to manually omit the variant props from Pressable before styling it:

type PressableProps = React.ComponentProps<typeof Pressable>;
type ButtonElement = React.ElementRef<typeof Pressable>;
interface ButtonProps extends Omit<PressableProps, "variant" | "variants"> {}

const ButtonImpl = React.forwardRef<ButtonElement, ButtonProps>(
  (props, forwardedRef) => <Pressable {...props} ref={forwardedRef} />
);

const Button = styled(ButtonImpl, {
  themeKey: "buttons",
  defaultVariant: "medium",
})({
  alignSelf: "center",
});

given that styled will not forward the variant props to the wrapped component, it would be really handy if styled could omit these types from the BaseComponentProps also for me, or is there an alternative/simpler way i could be solving this?

[jonsherrard]

I'm getting the same error using a Text component from dripsy.

I'm using react-native (without-expo) 0.69 and their typescript template

[nandorojo]

previously the suggestion has been to wrap Pressable from React Native directly for these cases. i can see if there is a way to fix this though — it might be as simple as styled omitting variant from the component passed to it. i’ll play with that.

the simplest fix is to import the base Pressable directly from React Native though.

[nandorojo]

@jonsherrard is your theme setup properly with the typescript guide? this is expected with a component like Pressable, but I’m surprised it’s happening with text. it works fine for me with text. it could be a TS version thing, or an improperly setup theme.

if you import { Theme } from ‘dripsy’ and then do this, what do see when you hover it?

type Color = keyof Theme[‘colors’]

@jonsherrard it might make sense for you to open a separate issue, since i wouldn't expect this from Text

[jjenzz]

it might be as simple as styled omitting variant from the component passed to it.

yeah, this was my expectation here (along with variants prop) 🙏

thanks for taking a look!

[nandorojo]

This should be fixed in 3.7.3. Thanks for your patience here.

[jjenzz]

amazing, thank you for this ❤️