fix(typing): use generic TMessage on GiftedChat props

[habovh]

When using a custom type for message object, GiftedChat component needs to properly use type parameters when defining props.

Following deb4c45, the type parameter from the generic TMessage when declaring the class component props got lost in translation and thus broke previously valid use cases with custom message object types.

Despite some efforts in 39720e3, the type parameter still wasn't used and it did not fix this use-case.

This PR adds back the generic type parameter to GiftedChat's props.

Minimum repro

import { View, Text } from 'react-native'
import {
  GiftedChat,
  IMessage,
} from 'react-native-gifted-chat'

type ChatMessage = IMessage & {
  user: IMessage['user'] & {
    isAdmin: boolean,
  },
}

type Props = {
  messages: ChatMessage[],
}

export const CustomChat = (props: Props) => (
  <GiftedChat
    messages={props.messages}
    renderMessage={(messageProps) => (
      <View>
        {messageProps.currentMessage?.user.isAdmin && ( // Property 'isAdmin' does not exist on type 'User'.ts(2339)
          <Text>Admin</Text>
        )}
        <Text>{messageProps.currentMessage?.text}</Text>
      </View>
    )}
  />
)

Patch

For those who want to quickly fix the typing issue locally, you may use the following patch.

Patch for node_modules

diff --git a/node_modules/react-native-gifted-chat/lib/GiftedChat.d.ts b/node_modules/react-native-gifted-chat/lib/GiftedChat.d.ts
index 0444a70..77f695e 100644
--- a/node_modules/react-native-gifted-chat/lib/GiftedChat.d.ts
+++ b/node_modules/react-native-gifted-chat/lib/GiftedChat.d.ts
@@ -117,7 +117,7 @@ export interface GiftedChatState<TMessage extends IMessage = IMessage> {
     text?: string;
     messages?: TMessage[];
 }
-declare function GiftedChat<TMessage extends IMessage = IMessage>(props: GiftedChatProps): JSX.Element;
+declare function GiftedChat<TMessage extends IMessage = IMessage>(props: GiftedChatProps<TMessage>): JSX.Element;
 declare namespace GiftedChat {
     var propTypes: {
         messages: PropTypes.Requireable<(object | null | undefined)[]>;

[anthonyespirat]

Related issue

src/GiftedChat.tsx:57

export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
  /* Message container ref */
  messageContainerRef?: React.RefObject<FlatList<IMessage>>
  ...

i think should be:

export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
  /* Message container ref */
  messageContainerRef?: React.RefObject<FlatList<TMessage>>
  ...

[habovh]

@anthonyespirat it looks indeed as it would make sense. Do you have a use-case with a minimum repro maybe?

[anthonyespirat]

@habovh repro

import { useRef } from "react";
import { FlatList } from "react-native";
import { GiftedChat, IMessage } from "react-native-gifted-chat";

type ChatMessage = IMessage & {
  user: IMessage["user"] & {
    isAdmin: boolean;
  };
};

type Props = {
  messages: ChatMessage[];
};

export const CustomChat = (props: Props) => {
  const containerRef = useRef<FlatList<ChatMessage>>(null);
  return (
    <GiftedChat<ChatMessage>
      messages={props.messages}
      messageContainerRef={containerRef} // Type 'RefObject<FlatList<ChatMessage>>' is not assignable to type 'RefObject<FlatList<IMessage>>'.
    />
  );
};

[habovh]

@anthonyespirat I've updated this PR to include your suggestion, thanks!

Edit: if you have an open issue that this PR would fix please mention it on this PR as well so it can get automatically closed ☺️

[benny-cloudfm]

Hi, this changes look great, why is this hasn't merged?

[habovh]

@benny-cloudfm very good question indeed. Also it's been open for so long now there are conflicts so I guess someone would have to dive in and address those.

[danilvalov]

I made a new PR including changes from this PR:
#2576