React-native-gifted-chat: Type instantiation is excessively deep and possibly infinite [repro provided]

[jamonholmgren]

Issue Description

Unless you cast the generic Bubble in TypeScript, it will fail with:

error TS2589: Type instantiation is excessively deep and possibly infinite.

Steps to Reproduce / Code Snippets

1. git clone https://github.com/jamonholmgren/BubbleGenericError.git
2. npm or yarn
3. Run tsc -p .
4. Observe type error

Expected Results

At the least, expected a better error message. But there's possibly something wrong with either the included types, or TypeScript itself.

Additional Information

• Nodejs version: 13.5.0
• React version: 16.13.0
• React Native version: 0.61.5
• react-native-gifted-chat version: 0.13.0
• Platform(s) (iOS, Android, or both?): both
• TypeScript version: 3.8.2

[OskarJuszczyk]

Same with:

GiftedChat:
```
...
renderBubble={props => {
return this.renderBubble(props, props.currentMessage.image != undefined)
}}
...

Custom function:
   ```
renderBubble = (props: any, isImage: boolean) => {
        return (
            <Bubble
                {...props}
                renderMessageImage={imageProps => this.renderImage(imageProps, props.position)}
                renderUsernameOnMessage={true}
                usernameStyle={{
                    fontFamily: 'SofiaProRegular',
                    fontSize: 10
                }}
                wrapperStyle={{
                    left: {
                        borderRadius: 6,
                        backgroundColor: isImage ? 'clear' : ColorsForm.Gray.cloud
                    },
                    right: {
                        borderRadius: 6,
                        backgroundColor: isImage ? 'clear' : ColorsForm.Green.grass
                    }
                }}
            />
        )
    }

[starjet]

Same issue here. All I want to do is set background colour of the bubbles, and thanks to this issue, it's a bit of a problem.

[arafatzahan]

The Code Works, so here's my workaround at ignoring the ts error.

        const textStyle = {
        right: {
            color: 'yellow'
        }
    };
    const wrapperStyle = {
        left: {
            backgroundColor: 'red'
        }
    };

    const customBubble = (props) => {
        // @ts-ignore - It works, so ignoring the TypeScript warning.
        return <Bubble {...props} textStyle={textStyle} wrapperStyle={wrapperStyle} />;
    };

[OskarJuszczyk]

return <Bubble<IMessage> ... />
That helps

[arafatzahan]

But then there's a prettier warning about a missing '>'

[OskarJuszczyk]

But then there's a prettier warning about a missing '>'

I ain't got no warning :/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.