Recursive `styled` components lose `ThemeKey` generic

I am unsure how I would expect it to work, but may make sense to somehow prevent with types or mention this incompatibility.

I created a simple Divider, which works as expected, but gives a typescript error when trying to use it with a different variant.

import { styled, View } from 'dripsy';

export const Divider = styled(View, {
  themeKey: 'divider',
  defaultVariant: 'horizontal',
})({
  bg: '$divider',
});

Related theme variant:

  divider: {
    horizontal: {
      height: 'divider',
      width: '100%',
    },
    vertical: {
      width: 'divider',
      height: '100%',
    },
  },

Importing View from react-native when creating Divider solves this problem completely and has no issues.

I have no issues with this, just figured I would let you know so we can avoid other users potentially having the same issue 😃

[nandorojo]

Oh, I misunderstood. I see now. It must be because we’re clashing generics between views. Good catch. I’ll have to see if we can work around this (perhaps by omitting the previous one)

[nandorojo]

Yeah go for it!