(3.2.2) Custom Composer Rerending

[iM-GeeKy]

Hi @kesha-antonov, first off awesome work on the new version! I appreciate all the hard work you've been doing recently to upgrade Gifted Chat!

After seeing all the improvements you've been making, I'm trying to upgrade from 2.6.5 to 3.2.2 and things are looking pretty good so far in my migration. I haven't made it all the way through, but one thing has jumped out to me so far. I'm noticing my custom composer rendering a lot in the latest version compared to 2.6.5. Any insight on this? The problem happens on ios and android, but for this demonstration I'm only providing iOS. See the videos below.

2.6.5

2.6.5.mov

3.2.2

3.2.2.mov

Code Snippet

renderComposer={(props: SendProps<IMessage>) => (
  <ChatComposer
    onSend={props.onSend}
    props={props}
  />
)}

import { ReactElement, useState } from "react";
import { Composer, ComposerProps, IMessage } from "react-native-gifted-chat";
import { TextInput, useTheme } from "react-native-paper";

export default function ChatComposer({
  conversation,
  onSend,
  props,
}: {
  conversation: Conversation | undefined;
  onSend:
    | ((
        messages: Partial<IMessage> | Partial<IMessage>[],
        shouldResetInputToolbar: boolean,
      ) => void)
    | undefined;
  props: ComposerProps;
}): ReactElement<typeof Composer> {
  const theme = useTheme();

  const [message, setMessage] = useState("");

  const handleOnPress = () => {
    if (onSend) {
      onSend({ text: message }, true);
      setMessage("");
    }
  };

  return (
    <TextInput
      {...props}
      autoFocus
      label="Message"
      maxLength={1000}
      mode="flat"
      multiline
      numberOfLines={3}
      onChangeText={(text) => {
        setMessage(text);
      }}
      placeholder=""
      right={
        <TextInput.Icon
          color={theme.colors.primary}
          disabled={message.trim().length === 0}
          icon="send"
          onPress={handleOnPress}
          testID="sendMessageButton"
        />
      }
      testID="messagesComposerInput"
      value={message}
    />
  );
}

[kesha-antonov]

Hi

Did you try to comment/uncomment some props to find what's causing the issue?

On video it looks like text input loses focus and receives it

[iM-GeeKy]

I'm still working on identifying the root cause, but was curious if you had any ideas off the top of your head. If I don't pass a custom Composer the problem goes away, so I've narrowed it down that much. I'll report back if I make a breakthrough.

[iM-GeeKy]

Update - I tried to remove as much as I could to isolate the problem and I'm still seeing the same behavior with a simplified GiftedChat and ChatComposer.

<GiftedChat
  messages={messages}
  onSend={(messages) => onSend(messages)}
  renderComposer={(props: SendProps<IMessage>) => (
    <ChatComposer
      onSend={props.onSend}
    />
  )}
  renderSend={() => null}
  user={
    {
      _id: Id,
      avatar: avatar,
      name: name,
    }
  }
/>

import { ReactElement, useState } from "react";
import { Composer, IMessage } from "react-native-gifted-chat";
import { TextInput } from "react-native-paper";

export default function ChatComposer({
  onSend,
}: {
  onSend:
    | ((
        messages: Partial<IMessage> | Partial<IMessage>[],
        shouldResetInputToolbar: boolean,
      ) => void)
    | undefined;
}): ReactElement<typeof Composer> {
  const [message, setMessage] = useState("");

  const handleOnPress = () => {
    if (onSend) {
      onSend({ text: message }, true);
      setMessage("");
    }
  };

  return (
    <TextInput
      label="Message"
      onChangeText={(text) => {
        setMessage(text);
      }}
      right={
        <TextInput.Icon
          icon="send"
          onPress={handleOnPress}
        />
      }
      value={message}
    />
  );
}

[kesha-antonov]

@iM-GeeKy

Did you try this PR?

https://github.com/FaridSafi/react-native-gifted-chat/pull/2683/files

[iM-GeeKy]

@kesha-antonov I'll give it a try and report back 👍🏻

[iM-GeeKy]

@kesha-antonov I applied the patch below and it doesn't seem like the send works at all now. Here is a video.

patch.mov

Patch

diff --git a/src/GiftedChat/index.tsx b/src/GiftedChat/index.tsx
index 586c321c1b7066ad631bb536d0a52e51f49014f5..3c7a936aa4d32e730f2ed62db417c74429b46b8a 100644
--- a/src/GiftedChat/index.tsx
+++ b/src/GiftedChat/index.tsx
@@ -201,6 +201,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   [isInitialized, initialText, notifyInputTextReset, getTextFromProp]
 )

+  const memoizedTextInputProps = useMemo(() => ({
+    ...textInputProps,
+    onChangeText: _onChangeText,
+    ref: textInputRef,
+  }), [textInputProps, _onChangeText, textInputRef])
+
+
 const inputToolbarFragment = useMemo(() => {
   if (!isInitialized)
     return null
@@ -209,11 +216,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     ...props,
     text: getTextFromProp(text!),
     onSend: _onSend,
-      textInputProps: {
-        ...textInputProps,
-        onChangeText: _onChangeText,
-        ref: textInputRef,
-      },
+      textInputProps: memoizedTextInputProps,
   }

   if (renderInputToolbar)
@@ -227,9 +230,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   props,
   text,
   renderInputToolbar,
-    textInputRef,
-    textInputProps,
-    _onChangeText,
+    memoizedTextInputProps,
 ])

 const contextValues = useMemo(
diff --git a/src/InputToolbar.tsx b/src/InputToolbar.tsx
index d88f2fe829ad497634883b99ef79555c364df908..74678053901a68a5faa4bf20864dbb34ae9d0dbf 100644
--- a/src/InputToolbar.tsx
+++ b/src/InputToolbar.tsx
@@ -1,8 +1,9 @@
import React, { useMemo } from 'react'
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
+import { StyleSheet, View, StyleProp, ViewStyle, TextStyle } from 'react-native'

import { Actions, ActionsProps } from './Actions'
import { Color } from './Color'
+import { TouchableOpacityProps } from './components/TouchableOpacity'
import { Composer, ComposerProps } from './Composer'
import { useColorScheme } from './hooks/useColorScheme'
import { IMessage } from './Models'
@@ -22,6 +23,21 @@ export interface InputToolbarProps<TMessage extends IMessage> {
 onPressActionButton?: () => void
 icon?: () => React.ReactNode
 wrapperStyle?: StyleProp<ViewStyle>
+  // ComposerProps
+  composerHeight?: number
+  text?: string
+  textInputProps?: ComposerProps['textInputProps']
+  // SendProps
+  label?: string
+  sendContainerStyle?: StyleProp<ViewStyle>
+  sendTextStyle?: StyleProp<TextStyle>
+  sendChildren?: React.ReactNode
+  isSendButtonAlwaysVisible?: boolean
+  sendButtonProps?: Partial<TouchableOpacityProps>
+  onSend?(
+    messages: Partial<TMessage> | Partial<TMessage>[],
+    shouldResetInputToolbar: boolean,
+  ): void
}

export function InputToolbar<TMessage extends IMessage = IMessage> (
@@ -38,6 +54,19 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   icon,
   wrapperStyle,
   containerStyle,
+    primaryStyle,
+    // ComposerProps
+    composerHeight,
+    text,
+    textInputProps,
+    // SendProps
+    label,
+    sendContainerStyle,
+    sendTextStyle,
+    sendChildren,
+    isSendButtonAlwaysVisible,
+    sendButtonProps,
+    onSend,
 } = props

 const colorScheme = useColorScheme()
@@ -70,20 +99,31 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
 ])

 const composerFragment = useMemo(() => {
-    const composerProps = props as ComposerProps
+    const composerProps: ComposerProps = { composerHeight, text, textInputProps }

   if (renderComposer)
     return renderComponentOrElement(renderComposer, composerProps)

   return <Composer {...composerProps} />
-  }, [renderComposer, props])
+  }, [renderComposer, composerHeight, text, textInputProps])

 const sendFragment = useMemo(() => {
+    const sendProps: SendProps<TMessage> = {
+      text,
+      label,
+      containerStyle: sendContainerStyle,
+      textStyle: sendTextStyle,
+      children: sendChildren,
+      isSendButtonAlwaysVisible,
+      sendButtonProps,
+      onSend,
+    }
+
   if (renderSend)
-      return renderComponentOrElement(renderSend, props)
+      return renderComponentOrElement(renderSend, sendProps)

-    return <Send {...props} />
-  }, [renderSend, props])
+    return <Send {...sendProps} />
+  }, [renderSend, text, label, sendContainerStyle, sendTextStyle, sendChildren, isSendButtonAlwaysVisible, sendButtonProps, onSend])

 const accessoryFragment = useMemo(() => {
   if (!renderAccessory)
@@ -96,7 +136,7 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   <View
     style={[getColorSchemeStyle(styles, 'container', colorScheme), containerStyle]}
   >
-      <View style={[getColorSchemeStyle(styles, 'primary', colorScheme), props.primaryStyle]}>
+      <View style={[getColorSchemeStyle(styles, 'primary', colorScheme), primaryStyle]}>
       {actionsFragment}
       {composerFragment}
       {sendFragment}

[iM-GeeKy]

@kesha-antonov Okay, I think I found the problem or at least was able to solve it with the issue I was experiencing.

This small patch seems to resolve the issue.

Patch

diff --git a/src/utils.ts b/src/utils.ts
index 676202a38c1d03e6234abfebed0c05e4bc640c54..86f1328dc82227d82ad963c58f65623b47b85ef9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -14,9 +14,9 @@ export function renderComponentOrElement<TProps extends Record<string, any>>(
   return React.cloneElement(component, props as any)

 if (typeof component === 'function') {
-    // If it's a component or render function
-    const Component = component as React.ComponentType<TProps>
-    return React.createElement(Component, props as any)
+    // FIX: Call it as a render function, NOT as a component
+    // Using React.createElement causes remounting when function reference changes
+    return component(props)
 }

 // If it's neither, return it as-is

v3.x switched to React.createElement(renderComposer, props) — this treats your render function as a Component type. Since inline arrow functions create a new reference every render, React interprets this as a different component each time, causing it to unmount and remount the entire subtree instead of just updating it. So I switched it back to the old behavior in 2.6.5 where it worked for me and it seemed to do the trick.

[kesha-antonov]

@kesha-antonov Okay, I think I found the problem or at least was able to solve it with the issue I was experiencing.

This small patch seems to resolve the issue.

Patch
diff --git a/src/utils.ts b/src/utils.ts
index 676202a38c1d03e6234abfebed0c05e4bc640c54..86f1328dc82227d82ad963c58f65623b47b85ef9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -14,9 +14,9 @@ export function renderComponentOrElement<TProps extends Record<string, any>>(
return React.cloneElement(component, props as any)

if (typeof component === 'function') {

• // If it's a component or render function
• const Component = component as React.ComponentType
• return React.createElement(Component, props as any)

• // FIX: Call it as a render function, NOT as a component
• // Using React.createElement causes remounting when function reference changes
• return component(props)
  }

// If it's neither, return it as-is
v3.x switched to React.createElement(renderComposer, props) — this treats your render function as a Component type. Since inline arrow functions create a new reference every render, React interprets this as a different component each time, causing it to unmount and remount the entire subtree instead of just updating it. So I switched it back to the old behavior in 2.6.5 where it worked for me and it seemed to do the trick.

Great finding! Thanks