While passing the stream client to the Chat component of stream-chat-react-native getting the error: Type 'StreamChat<DefaultGenerics>' is not assignable to type 'StreamChat<DefaultStreamChatGenerics>'.

[vinaygregoryjohn183]

BUG: Implementing 'Multiple conversations' referring the doc: https://getstream.io/chat/react-native-chat/tutorial/#:~:text=your%20Camera%20Roll.-,Multiple%20conversations,-Most%20chat%20applications getting the following error when passing client to component: Error at line, while passing client prop: 'Type 'StreamChat' is not assignable to type 'StreamChat'. Types of property 'activeChannels' are incompatible. Type '{ [key: string]: Channel; }' is not assignable to type '{ [key: string]: Channel; }'. 'string' index signatures are incompatible. Type 'Channel' is not assignable to type 'Channel'. Types of property 'listeners' are incompatible. Type '{ [key: string]: (string | EventHandler)[]; }' is not assignable to type '{ [key: string]: (string | EventHandler)[]; }'. 'string' index signatures are incompatible. Type '(string | EventHandler)[]' is not assignable to type '(string | EventHandler)[]'. Type 'string | EventHandler' is not assignable to type 'string | EventHandler'. Type 'EventHandler' is not assignable to type 'string | EventHandler'. Type 'EventHandler' is not assignable to type 'EventHandler'. Types of parameters 'event' and 'event' are incompatible. Type 'Event' is not assignable to type 'Event'. Type 'Event' is not assignable to type '{ type: EventTypes; channel?: ChannelResponse | undefined; channel_id?: string | undefined; channel_type?: string | undefined; ... 19 more ...; watcher_count?: number | undefined; }'. Types of property 'channel' are incompatible.

          Type 'ChannelResponse<DefaultStreamChatGenerics> | undefined' is not assignable to type 'ChannelResponse<DefaultGenerics> | undefined'.
                              Type 'ChannelResponse<DefaultStreamChatGenerics>' is not assignable to type 'ChannelResponse<DefaultGenerics> | undefined'.ts(2322)

ChatContext.d.ts(21, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & Pick<ChatContextValue, "client"> & { closeConnectionOnBackground?: boolean | undefined; i18nInstance?: Streami18n | undefined; style?: DeepPartial<...> | undefined; } & { ...; }'

ENVIRONMENT: Im using the stream-chat-react-native version 4.4.0 stream-chat version 6.5.1 react-native version 0.63.4

[vanGalilea]

Duplicate of 1038 right @vinaygregoryjohn183 ?

[vinaygregoryjohn183]

@vanGalileaIn the 1038 issue, the error is occurring at the same point in code as my code. But i'm getting a different type error message. Is the error caused by the same reason? If so this is a duplicate issue.

[vanGalilea]

@vinaygregoryjohn183 they're similar and contain each other partially, leaving both open, and we're going to handle them together. Thank you!

[kcaaashir]

@vinaygregoryjohn183 I was facing the same problem. This issue is occurring due to import of StreamChat from stream-chat library and DefaultGenerics from stream-chat-react-native.

[vanGalilea]

Hey team! Please add your planning poker estimate with ZenHub @Enigma-I-am @khushal87 @madsroskar @santhoshvai @vishalnarkhede

[billnbell]

Can someone walk us thru the proper example?

[MaxAst]

any updates or workarounds for this?

[JosefBud]

@vanGalilea As a developer at a startup, I was looking into Stream Chat as a possible alternative to rolling our own chat system. While doing the spike card to look into this, I created a trial account and was following your own quickstart guide line for line when I ran into this issue very early on. I can't even use the starting, base <Chat> component without immediately hitting this TypeScript error. Starting off with a new library and having to use // @ts-expect-error right off the bat is not a great look.

I hope you understand, from this point of view, it doesn't make Stream Chat look like a great option, especially when I saw this has been an issue since December 2021.

This isn't meant to be a mean-spirited complaint by any means and I hope it doesn't come off that way, I just hoped this "user story" would maybe bring light to this from the customer side. Hope this gets fixed soon, as this otherwise seems like a fantastic product.

[GregAtFramework]

I used to suffer from this, but don't seem to anymore. Not sure if this was how I fixed it, but it might be a workaround that helps others:

Use the same version of stream-chat that is used by stream-chat-react-native (or stream-chat-expo). e.g. when I look in my yarn.lock file I see that stream-chat-react-native-core 4.15.0 (the version I am using) depends on stream-chat ~6.7.3. Therefore if I need to directly use stream-chat, this is the version that I install, rather than the latest and greatest.

[vanGalilea]

@vanGalilea As a developer at a startup, I was looking into Stream Chat as a possible alternative to rolling our own chat system. While doing the spike card to look into this, I created a trial account and was following your own quickstart guide line for line when I ran into this issue very early on. I can't even use the starting, base <Chat> component without immediately hitting this TypeScript error. Starting off with a new library and having to use // @ts-expect-error right off the bat is not a great look.

I hope you understand, from this point of view, it doesn't make Stream Chat look like a great option, especially when I saw this has been an issue since December 2021.

This isn't meant to be a mean-spirited complaint by any means and I hope it doesn't come off that way, I just hoped this "user story" would maybe bring light to this from the customer side. Hope this gets fixed soon, as this otherwise seems like a fantastic product.

Thanks for sharing your experience. It's super essential for us to deliver a top-notch experience with our UI components. Yet the mentioned tutorial is a JS tutorial and not a TS one.

Please see our typescript messaging example to see a TS working solution.

I used to suffer from this, but don't seem to anymore. Not sure if this was how I fixed it, but it might be a workaround that helps others:

Use the same version of stream-chat that is used by stream-chat-react-native (or stream-chat-expo). e.g. when I look in my yarn.lock file I see that stream-chat-react-native-core 4.15.0 (the version I am using) depends on stream-chat ~6.7.3. Therefore if I need to directly use stream-chat, this is the version that I install, rather than the latest and greatest.

Also, make sure never to install stream-chat as its already a dependency of stream-chat-react-native!