Question about replacing Badge's root with `Badge.compose({...})`

[Shawn Thye]

Willing to submit a PR to fix?

• I am willing to submit a PR to fix

Requested priority

High

Products/applications affected

No response

Package version(s)

0.42.3

OS version(s)

No response

Platform

• iOS
• macOS
• win32
• windows
• android

Xcode version

No response

Please provide a reproduction of the bug

Based on the new Compose Framework and Slot docs.

I am trying to make Badge Pressable

export const PressableBadge = Badge.compose({
    slots: {
        root: Pressable,
        text: Text
    }
    // ... other code here
})

export const Usage: FC = () => {
    return (
        <PressableBadge
            // ❗❗❗TYPE ERROR❗❗❗
            onPress={() => {console.log('Badge pressed')}}
        />
    )
}

How do I make Typescript happy? or am I doing it wrong?

Actual behavior

Typescript not happy

Expected behavior

Should we have something like Badge.compose<PressableBadgeType> to override the Props?

[Ruriko Araki]

Even if you change the slot of a component, it doesn't change the props that are exposed by it. onPress is not a prop on Badge, so that's why it's complaining about it.

The Chip component might serve your purposes better - it's meant to be more interactive than Badge, which is not an interactive component. Otherwise, you'll need to wrap your Badge in a Pressable instead.

[Shawn Thye]

Thanks @rurikoaraki for the explanation, sound cool