type errors when extending type of styled components

[reggieofarrell]

I took a break from trying to migrate from NativeBase and coming back some things are working better and I'm also seeing some new errors. One of which are some type errors while trying to extend the types of a styled component...

import {styled} from '@/utils/styled'

type PressableStyledProps = React.ComponentProps<typeof PressableStyled>

const PressableStyled = styled(Pressable, {
  my: '$2.5',
  py: '$3.5',
  px: '$2.5',
  bgColor: '$primary500',
  borderRadius: '$full',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  ':pressed': {
    bgColor: '$primary600',
  },
  ':disabled': {
    opacity: 0.4,
  },
})

export interface ButtonBaseProps extends PressableStyledProps {
  children: React.ReactNode
  buttonTextProps?: TextProps
  Icon?: React.FunctionComponent
  isDisabled?: boolean
}

This method of getting the type of PressableStyled and then extending it was working before but on the latest "@gluestack-style/react": "0.2.51" I get a bunch of...

Property x of type x is not assignable to 'string & {}' index type 'string & {}'.

...with x being all kinds of things (see screenshot here)

Any insight on what is going on here?

Some other notes...

1. Contents of '@/utils/styled'

import {createStyled, FontResolver} from '@gluestack-style/react'
import {AnimationResolver} from '@gluestack-style/animation-plugin'

export const styled = createStyled([
  new AnimationResolver({}),
  new FontResolver(),
])

2. Other gluestack packages we have installed

"@gluestack-style/react": "^0.2.51"
"@gluestack-ui/themed": "^0.1.53"
"@gluestack-style/animation-plugin": "0.1.7"

animation-plugin is on 0.1.7 because the latest was causing this issue for us as well today

3. We are using a custom style config that we are passing to GluestackUIProvider at the root of the app...

import {customGluestackColors} from './theme/colors'

export const config = {
  componentPath: './components',
  theme: {
    aliases: {
      bg: 'backgroundColor',
      bgColor: 'backgroundColor',
      h: 'height',
      w: 'width',
      p: 'padding',
      px: 'paddingHorizontal',
      py: 'paddingVertical',
      pt: 'paddingTop',
      pb: 'paddingBottom',
      pr: 'paddingRight',
      pl: 'paddingLeft',
      m: 'margin',
      mx: 'marginHorizontal',
      my: 'marginVertical',
      mt: 'marginTop',
      mb: 'marginBottom',
      mr: 'marginRight',
      ml: 'marginLeft',
      rounded: 'borderRadius',
    } as const,
    tokens: {
      colors: {
        rose50: '#fff1f2',
        rose100: '#ffe4e6',
        rose200: '#fecdd3',
        rose300: '#fda4af',
        rose400: '#fb7185',
        rose500: '#f43f5e',
        rose600: '#e11d48',
        rose700: '#be123c',
        rose800: '#9f1239',
        rose900: '#881337',
        pink50: '#fdf2f8',
        pink100: '#fce7f3',
        pink200: '#fbcfe8',
        pink300: '#f9a8d4',
        pink400: '#f472b6',
        pink500: '#ec4899',
        pink600: '#db2777',
        pink700: '#be185d',
        pink800: '#9d174d',
        pink900: '#831843',
        fuchsia50: '#fdf4ff',
        fuchsia100: '#fae8ff',
        fuchsia200: '#f5d0fe',
        fuchsia300: '#f0abfc',
        fuchsia400: '#e879f9',
        fuchsia500: '#d946ef',
        fuchsia600: '#c026d3',
        fuchsia700: '#a21caf',
        fuchsia800: '#86198f',
        fuchsia900: '#701a75',
        purple50: '#faf5ff',
        purple100: '#f3e8ff',
        purple200: '#e9d5ff',
        purple300: '#d8b4fe',
        purple400: '#c084fc',
        purple500: '#a855f7',
        purple600: '#9333ea',
        purple700: '#7e22ce',
        purple800: '#6b21a8',
        purple900: '#581c87',
        violet50: '#f5f3ff',
        violet100: '#ede9fe',
        violet200: '#ddd6fe',
        violet300: '#c4b5fd',
        violet400: '#a78bfa',
        violet500: '#8b5cf6',
        violet600: '#7c3aed',
        violet700: '#6d28d9',
        violet800: '#5b21b6',
        violet900: '#4c1d95',
        indigo50: '#eef2ff',
        indigo100: '#e0e7ff',
        indigo200: '#c7d2fe',
        indigo300: '#a5b4fc',
        indigo400: '#818cf8',
        indigo500: '#6366f1',
        indigo600: '#4f46e5',
        indigo700: '#4338ca',
        indigo800: '#3730a3',
        indigo900: '#312e81',
        blue50: '#eff6ff',
        blue100: '#dbeafe',
        blue200: '#bfdbfe',
        blue300: '#93c5fd',
        blue400: '#60a5fa',
        blue500: '#3b82f6',
        blue600: '#2563eb',
        blue700: '#1d4ed8',
        blue800: '#1e40af',
        blue900: '#1e3a8a',
        lightBlue50: '#f0f9ff',
        lightBlue100: '#e0f2fe',
        lightBlue200: '#bae6fd',
        lightBlue300: '#7dd3fc',
        lightBlue400: '#38bdf8',
        lightBlue500: '#0ea5e9',
        lightBlue600: '#0284c7',
        lightBlue700: '#0369a1',
        lightBlue800: '#075985',
        lightBlue900: '#0c4a6e',
        darkBlue50: '#dbf4ff',
        darkBlue100: '#addbff',
        darkBlue200: '#7cc2ff',
        darkBlue300: '#4aa9ff',
        darkBlue400: '#1a91ff',
        darkBlue500: '#0077e6',
        darkBlue600: '#005db4',
        darkBlue700: '#004282',
        darkBlue800: '#002851',
        darkBlue900: '#000e21',
        cyan50: '#ecfeff',
        cyan100: '#cffafe',
        cyan200: '#a5f3fc',
        cyan300: '#67e8f9',
        cyan400: '#22d3ee',
        cyan500: '#06b6d4',
        cyan600: '#0891b2',
        cyan700: '#0e7490',
        cyan800: '#155e75',
        cyan900: '#164e63',
        teal50: '#f0fdfa',
        teal100: '#ccfbf1',
        teal200: '#99f6e4',
        teal300: '#5eead4',
        teal400: '#2dd4bf',
        teal500: '#14b8a6',
        teal600: '#0d9488',
        teal700: '#0f766e',
        teal800: '#115e59',
        teal900: '#134e4a',
        emerald50: '#ecfdf5',
        emerald100: '#d1fae5',
        emerald200: '#a7f3d0',
        emerald300: '#6ee7b7',
        emerald400: '#34d399',
        emerald500: '#10b981',
        emerald600: '#059669',
        emerald700: '#047857',
        emerald800: '#065f46',
        emerald900: '#064e3b',
        green50: '#f0fdf4',
        green100: '#dcfce7',
        green200: '#bbf7d0',
        green300: '#86efac',
        green400: '#4ade80',
        green500: '#22c55e',
        green600: '#16a34a',
        green700: '#15803d',
        green800: '#166534',
        green900: '#14532d',
        lime50: '#f7fee7',
        lime100: '#ecfccb',
        lime200: '#d9f99d',
        lime300: '#bef264',
        lime400: '#a3e635',
        lime500: '#84cc16',
        lime600: '#65a30d',
        lime700: '#4d7c0f',
        lime800: '#3f6212',
        lime900: '#365314',
        yellow50: '#fefce8',
        yellow100: '#fef9c3',
        yellow200: '#fef08a',
        yellow300: '#fde047',
        yellow400: '#facc15',
        yellow500: '#eab308',
        yellow600: '#ca8a04',
        yellow700: '#a16207',
        yellow800: '#854d0e',
        yellow900: '#713f12',
        amber50: '#fffbeb',
        amber100: '#fef3c7',
        amber200: '#fde68a',
        amber300: '#fcd34d',
        amber400: '#fbbf24',
        amber500: '#f59e0b',
        amber600: '#d97706',
        amber700: '#b45309',
        amber800: '#92400e',
        amber900: '#78350f',
        orange50: '#fff7ed',
        orange100: '#ffedd5',
        orange200: '#fed7aa',
        orange300: '#fdba74',
        orange400: '#fb923c',
        orange500: '#f97316',
        orange600: '#ea580c',
        orange700: '#c2410c',
        orange800: '#9a3412',
        orange900: '#7c2d12',
        red50: '#fef2f2',
        red100: '#fee2e2',
        red200: '#fecaca',
        red300: '#fca5a5',
        red400: '#f87171',
        red500: '#ef4444',
        red600: '#dc2626',
        red700: '#b91c1c',
        red800: '#991b1b',
        red900: '#7f1d1d',
        warmGray50: '#fafaf9',
        warmGray100: '#f5f5f4',
        warmGray200: '#e7e5e4',
        warmGray300: '#d6d3d1',
        warmGray400: '#a8a29e',
        warmGray500: '#78716c',
        warmGray600: '#57534e',
        warmGray700: '#44403c',
        warmGray800: '#292524',
        warmGray900: '#1c1917',
        trueGray50: '#fafafa',
        trueGray100: '#f5f5f5',
        trueGray200: '#e5e5e5',
        trueGray300: '#d4d4d4',
        trueGray400: '#a3a3a3',
        trueGray500: '#737373',
        trueGray600: '#525252',
        trueGray700: '#404040',
        trueGray800: '#262626',
        trueGray900: '#171717',
        gray50: '#fafafa',
        gray100: '#f4f4f5',
        gray200: '#e4e4e7',
        gray300: '#d4d4d8',
        gray400: '#a1a1aa',
        gray500: '#71717a',
        gray600: '#52525b',
        gray700: '#3f3f46',
        gray800: '#27272a',
        gray900: '#18181b',
        coolGray50: '#f9fafb',
        coolGray100: '#f3f4f6',
        coolGray200: '#e5e7eb',
        coolGray300: '#d1d5db',
        coolGray400: '#9ca3af',
        coolGray500: '#6b7280',
        coolGray600: '#4b5563',
        coolGray700: '#374151',
        coolGray800: '#1f2937',
        coolGray900: '#111827',
        blueGray50: '#f8fafc',
        blueGray100: '#f1f5f9',
        blueGray200: '#e2e8f0',
        blueGray300: '#cbd5e1',
        blueGray400: '#94a3b8',
        blueGray500: '#64748b',
        blueGray600: '#475569',
        blueGray700: '#334155',
        blueGray800: '#1e293b',
        blueGray900: '#0f172a',
        dark50: '#18181b',
        dark100: '#27272a',
        dark200: '#3f3f46',
        dark300: '#52525b',
        dark400: '#71717a',
        dark500: '#a1a1aa',
        dark600: '#d4d4d8',
        dark700: '#e4e4e7',
        dark800: '#f4f4f5',
        dark900: '#fafafa',
        tertiary50: '#ecfdf5',
        tertiary100: '#d1fae5',
        tertiary200: '#a7f3d0',
        tertiary300: '#6ee7b7',
        tertiary400: '#34d399',
        tertiary500: '#10b981',
        tertiary600: '#059669',
        tertiary700: '#047857',
        tertiary800: '#065f46',
        tertiary900: '#064e3b',
        danger50: '#fff1f2',
        danger100: '#ffe4e6',
        danger200: '#fecdd3',
        danger300: '#fda4af',
        danger400: '#fb7185',
        danger500: '#f43f5e',
        danger600: '#e11d48',
        danger700: '#be123c',
        danger800: '#9f1239',
        danger900: '#881337',
        error00: '#FEE9E9',
        error50: '#FEE2E2',
        error100: '#FECACA',
        error200: '#FCA5A5',
        error300: '#F87171',
        error400: '#EF4444',
        error500: '#E63535',
        error600: '#DC2626',
        error700: '#B91C1C',
        error800: '#7F1D1D',
        error900: '#991B1B',
        error950: '#220808',
        success0: '#E4FFF4',
        success50: '#CAFFE8',
        success100: '#A2F1C0',
        success200: '#84D3A2',
        success300: '#66B584',
        success400: '#489766',
        success500: '#348352',
        success600: '#2A7948',
        success700: '#206F3E',
        success800: '#166534',
        success900: '#14532D',
        success950: '#071F11',
        warning50: '#fff7ed',
        warning100: '#ffedd5',
        warning200: '#fed7aa',
        warning300: '#fdba74',
        warning400: '#fb923c',
        warning500: '#f97316',
        warning600: '#ea580c',
        warning700: '#c2410c',
        warning800: '#9a3412',
        warning900: '#7c2d12',
        muted50: '#fafafa',
        muted100: '#f5f5f5',
        muted200: '#e5e5e5',
        muted300: '#d4d4d4',
        muted400: '#a3a3a3',
        muted500: '#737373',
        muted600: '#525252',
        muted700: '#404040',
        muted800: '#262626',
        muted900: '#171717',
        info50: '#f0f9ff',
        info100: '#e0f2fe',
        info200: '#bae6fd',
        info300: '#7dd3fc',
        info400: '#38bdf8',
        info500: '#0ea5e9',
        info600: '#0284c7',
        info700: '#0369a1',
        info800: '#075985',
        info900: '#0c4a6e',
        light50: '#fafaf9',
        light100: '#f5f5f4',
        light200: '#e7e5e4',
        light300: '#d6d3d1',
        light400: '#a8a29e',
        light500: '#78716c',
        light600: '#57534e',
        light700: '#44403c',
        light800: '#292524',
        light900: '#1c1917',
        primary0: '#E5F1FB',
        primary50: '#CCE9FF',
        primary100: '#ADDBFF',
        primary200: '#7CC2FF',
        primary300: '#4AA9FF',
        primary400: '#1A91FF',
        primary500: '#0077E6',
        primary600: '#005DB4',
        primary700: '#004282',
        primary800: '#002851',
        primary900: '#011838',
        primary950: '#000711',
        secondary0: '#F6F6F6',
        secondary50: '#F3F3F3',
        secondary100: '#E9E9E9',
        secondary200: '#DADADA',
        secondary300: '#B0B0B0',
        secondary400: '#737373',
        secondary500: '#5F5F5F',
        secondary600: '#525252',
        secondary700: '#404040',
        secondary800: '#262626',
        secondary900: '#171717',
        secondary950: '#0C0C0C',
        textLight0: '#FCFCFC',
        textLight50: '#F5F5F5',
        textLight100: '#E5E5E5',
        textLight200: '#DBDBDB',
        textLight300: '#D4D4D4',
        textLight400: '#A3A3A3',
        textLight500: '#8C8C8C',
        textLight600: '#737373',
        textLight700: '#525252',
        textLight800: '#404040',
        textLight900: '#262626',
        textLight950: '#171717',
        textDark0: '#FCFCFC',
        textDark50: '#F5F5F5',
        textDark100: '#E5E5E5',
        textDark200: '#DBDBDB',
        textDark300: '#D4D4D4',
        textDark400: '#A3A3A3',
        textDark500: '#8C8C8C',
        textDark600: '#737373',
        textDark700: '#525252',
        textDark800: '#404040',
        textDark900: '#262626',
        textDark950: '#171717',
        borderDark0: '#FCFCFC',
        borderDark50: '#F5F5F5',
        borderDark100: '#E5E5E5',
        borderDark200: '#DBDBDB',
        borderDark300: '#D4D4D4',
        borderDark400: '#A3A3A3',
        borderDark500: '#8C8C8C',
        borderDark600: '#737373',
        borderDark700: '#525252',
        borderDark800: '#404040',
        borderDark900: '#262626',
        borderDark950: '#171717',
        borderLight0: '#FCFCFC',
        borderLight50: '#F5F5F5',
        borderLight100: '#E5E5E5',
        borderLight200: '#DBDBDB',
        borderLight300: '#D4D4D4',
        borderLight400: '#A3A3A3',
        borderLight500: '#8C8C8C',
        borderLight600: '#737373',
        borderLight700: '#525252',
        borderLight800: '#404040',
        borderLight900: '#262626',
        borderLight950: '#171717',
        backgroundDark0: '#FCFCFC',
        backgroundDark50: '#F5F5F5',
        backgroundDark100: '#F1F1F1',
        backgroundDark200: '#DBDBDB',
        backgroundDark300: '#D4D4D4',
        backgroundDark400: '#A3A3A3',
        backgroundDark500: '#8C8C8C',
        backgroundDark600: '#737373',
        backgroundDark700: '#525252',
        backgroundDark800: '#404040',
        backgroundDark900: '#262626',
        backgroundDark950: '#171717',
        backgroundLight0: '#FCFCFC',
        backgroundLight50: '#F5F5F5',
        backgroundLight100: '#F1F1F1',
        backgroundLight200: '#DBDBDB',
        backgroundLight300: '#D4D4D4',
        backgroundLight400: '#A3A3A3',
        backgroundLight500: '#8C8C8C',
        backgroundLight600: '#737373',
        backgroundLight700: '#525252',
        backgroundLight800: '#404040',
        backgroundLight900: '#262626',
        backgroundLight950: '#171717',
        backgroundLightError: '#FEF1F1',
        backgroundDarkError: '#422B2B',
        backgroundLightWarning: '#FFF4EB',
        backgroundDarkWarning: '#412F23',
        backgroundLightSuccess: '#EDFCF2',
        backgroundDarkSuccess: '#1C2B21',
        backgroundLightInfo: '#EBF8FE',
        backgroundDarkInfo: '#1A282E',
        backgroundLightMuted: '#F6F6F7',
        backgroundDarkMuted: '#252526',
        white: '#FFFFFF',
        black: '#000000',
        ...customGluestackColors,
      },
      space: {
        px: '1px',
        '0': 0,
        '0.5': 2,
        '1': 4,
        '1.5': 6,
        '2': 8,
        '2.5': 10,
        '3': 12,
        '3.5': 14,
        '4': 16,
        '4.5': 18,
        '5': 20,
        '6': 24,
        '7': 28,
        '8': 32,
        '9': 36,
        '10': 40,
        '11': 44,
        '12': 48,
        '16': 64,
        '20': 80,
        '24': 96,
        '32': 128,
        '40': 160,
        '48': 192,
        '56': 224,
        '64': 256,
        '72': 288,
        '80': 320,
        '96': 384,
        '1/2': '50%',
        '1/3': '33.333%',
        '2/3': '66.666%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666%',
        '2/6': '33.333%',
        '3/6': '50%',
        '4/6': '66.666%',
        '5/6': '83.333%',
        full: '100%',
      },
      borderWidths: {
        '0': 0,
        '1': 1,
        '2': 2,
        '4': 4,
        '8': 8,
      },
      radii: {
        none: 0,
        xs: 2,
        sm: 4,
        md: 6,
        lg: 8,
        xl: 12,
        '2xl': 16,
        '3xl': 24,
        full: 9999,
      },
      breakpoints: {
        base: 0,
        xs: 375,
        sm: 480,
        md: 768,
        lg: 992,
        xl: 1280,
      },
      mediaQueries: {
        base: '@media screen and (min-width: 0)',
        xs: '@media screen and (min-width: 375px)',
        sm: '@media screen and (min-width: 480px)',
        md: '@media screen and (min-width: 768px)',
        lg: '@media screen and (min-width: 992px)',
        xl: '@media screen and (min-width: 1280px)',
      },
      letterSpacings: {
        xs: -0.4,
        sm: -0.2,
        md: 0,
        lg: 0.2,
        xl: 0.4,
        '2xl': 1.6,
      },
      lineHeights: {
        '2xs': 16,
        xs: 18,
        sm: 20,
        md: 22,
        lg: 24,
        xl: 28,
        '2xl': 32,
        '3xl': 40,
        '4xl': 48,
        '5xl': 56,
        '6xl': 72,
        '7xl': 90,
      },
      fontWeights: {
        hairline: '100',
        thin: '200',
        light: '300',
        normal: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
        extrabold: '800',
        black: '900',
        extraBlack: '950',
      },
      fonts: {
        heading: 'Sora',
        body: 'PTSerif',
        mono: undefined,
      },
      fontSizes: {
        '2xs': 10,
        xs: 12,
        sm: 14,
        md: 16,
        lg: 18,
        xl: 20,
        '2xl': 24,
        '3xl': 32, // changed from 30
        '4xl': 36,
        '5xl': 48,
        '6xl': 60,
        '7xl': 72,
        '8xl': 96,
        '9xl': 128,
      },
      opacity: {
        0: 0,
        5: 0.05,
        10: 0.1,
        20: 0.2,
        25: 0.25,
        30: 0.3,
        40: 0.4,
        50: 0.5,
        60: 0.6,
        70: 0.7,
        75: 0.75,
        80: 0.8,
        90: 0.9,
        95: 0.95,
        100: 1,
      },
    } as const,
    globalStyle: {
      variants: {
        hardShadow: {
          '1': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: -2,
              height: 2,
            },
            shadowRadius: 8,
            shadowOpacity: 0.5,
            elevation: 10,
          },
          '2': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: 3,
            },
            shadowRadius: 8,
            shadowOpacity: 0.5,
            elevation: 10,
          },
          '3': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 2,
              height: 2,
            },
            shadowRadius: 8,
            shadowOpacity: 0.5,
            elevation: 10,
          },
          '4': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: -3,
            },
            shadowRadius: 8,
            shadowOpacity: 0.5,
            elevation: 10,
          },
          // this 5th version is only for toast shadow
          // temporary
          '5': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: 3,
            },
            shadowRadius: 8,
            shadowOpacity: 0.2,
            elevation: 10,
          },
        },
        softShadow: {
          '1': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowRadius: 10,
            shadowOpacity: 0.1,
            _android: {
              shadowColor: '$backgroundLight500',
              elevation: 5,
              shadowOpacity: 0.05,
            },
          },
          '2': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowRadius: 20,
            elevation: 3,
            shadowOpacity: 0.1,
            _android: {
              shadowColor: '$backgroundLight500',
              elevation: 10,
              shadowOpacity: 0.1,
            },
          },
          '3': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowRadius: 30,
            shadowOpacity: 0.1,
            elevation: 4,
            _android: {
              shadowColor: '$backgroundLight500',
              elevation: 15,
              shadowOpacity: 0.15,
            },
          },
          '4': {
            shadowColor: '$backgroundLight900',
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowRadius: 40,
            shadowOpacity: 0.1,
            elevation: 10,
            _android: {
              shadowColor: '$backgroundLight500',
              elevation: 20,
              shadowOpacity: 0.2,
            },
          },
        },
      },
    },
  },
} as const
type Config = typeof config.theme
declare module '@gluestack-style/react' {
  interface ICustomConfig extends Config {}
}

[reggieofarrell]

@ankit-tailor Any insight on this?

[ankit-tailor]

Hey @reggieofarrell, Example code looks fine to me. I'll have a look once.

[ankit-tailor]

Hey @reggieofarrell, Can you try with the latest version? Also, plugin API is changed in v1. We have deprecated the createStyled function and now you can directly pass plugins in config as plugin array. You can check out here