passing Omit<ComponentProps<typeof TextLink>, 'className'> to <TextLink> results in an error

[Elie-A-98]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [X] Not urgent

Current Behavior

If restOfProps is of typeOmit<ComponentProps<typeof TextLink>, 'className'> the below results in an error: <TextLink {...restOfProps}>{children}</TextLink>

Error:

Type '{ children: ReactNode; id?: string | undefined; style?: CSSProperties | undefined; href: string | UrlObject; 'aria-label'?: string | undefined; ... 277 more ...; textProps?: TextProps | undefined; }' is not assignable to type 'IntrinsicAttributes & TextLinkProps'. Type '{ children: ReactNode; id?: string | undefined; style?: CSSProperties | undefined; href: string | UrlObject; 'aria-label'?: string | undefined; ... 277 more ...; textProps?: TextProps | undefined; }' is not assignable to type '{ replace: true; experimental?: { nativeBehavior: "stack-replace"; isNestedNavigator: boolean; } | undefined; }'. Types of property 'replace' are incompatible. Type 'boolean | undefined' is not assignable to type 'true'. Type 'undefined' is not assignable to type 'true'.ts(2322)

Expected Behavior

The below works normally

<TextLink {...restOfProps} >
      {children}
    </TextLink>

Steps To Reproduce

Create solito project using minimal starter template: https://solito.dev/starter Create the below component:

import { ComponentProps } from 'react'
import { TextLink } from 'solito/link'

type IntristicElementsProps = Partial<Pick<Sx, 'color' | 'fontSize'>>

export const Link: React.FC<
  Omit<ComponentProps<typeof TextLink>, 'className'> & IntristicElementsProps
> = (props) => {
  const { children, color, fontSize, ...restOfProps } = props

  return (
    <TextLink {...restOfProps} >
      {children}
    </TextLink>
  )
}

[nandorojo]

Interesting. I wonder if using TextLinkProps would fix it. This is the source code for TextLink:

'use client'
import { TextProps, Text } from 'react-native'

import { LinkCore } from './core'
import { LinkCoreProps } from './LinkCoreProps'

type TextLinkProps = LinkCoreProps & { textProps?: TextProps }

function TextLink({ textProps, ...props }: TextLinkProps) {
  return (
    <LinkCore
      {...props}
      Component={Text}
      componentProps={{ selectable: false, ...textProps }}
    />
  )
}

export { TextLink }
export type { TextLinkProps }

[nandorojo]

I think you can fix it by simply passing props directly to TextLink.