Getting component props in typescript

[haruki-m]

Description

I'm trying to forward a prop to a gluestack component, but it gives me, for example, "Property 'as' does not exist on type 'IIconProps & (StyledComponentProps<false | ViewStyle...'." A workaround would be much appreciated!

CodeSandbox/Snack link

No response

Steps to reproduce

tsconfig.json:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "noUnusedLocals": true
  },
}

SampleComponent.tsx:

import type { FC, ComponentProps } from 'react'
import { Icon } from '@gluestack-ui/themed'

type IconProps = ComponentProps<typeof Icon>

type Props = {
  as: IconProps['as']
}

const SampleComponent: FC<Props> = props => {
  return <Icon as={props.as} /> // simplified
}

Error: Property 'as' does not exist on type 'IIconProps & (StyledComponentProps<false | ViewStyle | ImageStyle | TextStyle | RegisteredStyle<ViewStyle> | ... 6 more ... | undefined, unknown, StyledComponentProps<...>, string> | { ...; })'.

gluestack-ui Version

1.1.3

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

No response

[surajahmed]

@haruki-m Thanks for reporting this. We'll look into this.

[surajahmed]

Closing this issue since it has been resolved in the latest version. If the problem continues, please feel free to reopen it.