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 <Chat> component: Error at line, while passing client prop: <Chat client={streamClient}> 'Type 'StreamChat<DefaultGenerics>' is not assignable to type 'StreamChat<DefaultStreamChatGenerics>'. Types of property 'activeChannels' are incompatible. Type '{ [key: string]: Channel<DefaultGenerics>; }' is not assignable to type '{ [key: string]: Channel<DefaultStreamChatGenerics>; }'. 'string' index signatures are incompatible. Type 'Channel<DefaultGenerics>' is not assignable to type 'Channel<DefaultStreamChatGenerics>'. Types of property 'listeners' are incompatible. Type '{ [key: string]: (string | EventHandler<DefaultGenerics>)[]; }' is not assignable to type '{ [key: string]: (string | EventHandler<DefaultStreamChatGenerics>)[]; }'. 'string' index signatures are incompatible. Type '(string | EventHandler<DefaultGenerics>)[]' is not assignable to type '(string | EventHandler<DefaultStreamChatGenerics>)[]'. Type 'string | EventHandler<DefaultGenerics>' is not assignable to type 'string | EventHandler<DefaultStreamChatGenerics>'. Type 'EventHandler<DefaultGenerics>' is not assignable to type 'string | EventHandler<DefaultStreamChatGenerics>'. Type 'EventHandler<DefaultGenerics>' is not assignable to type 'EventHandler<DefaultStreamChatGenerics>'. Types of parameters 'event' and 'event' are incompatible. Type 'Event<DefaultStreamChatGenerics>' is not assignable to type 'Event<DefaultGenerics>'. Type 'Event<DefaultStreamChatGenerics>' is not assignable to type '{ type: EventTypes; channel?: ChannelResponse<DefaultGenerics> | undefined; channel_id?: string | undefined; channel_type?: string | undefined; ... 19 more ...; watcher_count?: number | undefined; }'. Types of property 'channel' are incompatible.

Type 'ChannelResponse | undefined' is not assignable to type 'ChannelResponse | undefined'. Type 'ChannelResponse' is not assignable to type 'ChannelResponse | undefined'.ts(2322) ChatContext.d.ts(21, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & Pick, "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!