fix: send button and audiorecordingbutton re-renders

Author: khushal87

package/src/components/MessageInput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Modal, SafeAreaView, StyleSheet, View } from 'react-native';
 
 import {
@@ -266,13 +266,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 
   const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
 
-  /**
-   * Mounting and un-mounting logic are un-related in following useEffect.
-   * While mounting we want to pass maxNumberOfFiles (which is prop on Channel component)
-   * to AttachmentPicker (on OverlayProvider)
-   *
-   * While un-mounting, we want to close the picker e.g., while navigating away.
-   */
   useEffect(() => {
     attachmentManager.maxNumberOfFilesPerMessage = maxNumberOfFiles;
     if (doFileUploadRequest) {
@@ -542,16 +535,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     waveformData,
   } = useAudioController();
 
-  const isSendingButtonVisible = () => {
-    if (!(audioRecordingEnabled && isAudioRecorderAvailable())) {
-      return true;
-    }
+  const asyncAudioEnabled = audioRecordingEnabled && isAudioRecorderAvailable();
+  const hasText = !!text;
+  const showSendingButton = hasText || attachments.length;
 
-    if ((text && text.trim()) || attachments.length) {
-      return true;
-    }
-    return !recording;
-  };
+  const isSendingButtonVisible = useMemo(() => {
+    return asyncAudioEnabled && showSendingButton && !recording;
+  }, [asyncAudioEnabled, recording, showSendingButton]);
 
   const micPositionX = useSharedValue(0);
   const micPositionY = useSharedValue(0);
@@ -753,7 +743,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 
               {shouldDisplayStopAIGeneration ? (
                 <StopMessageStreamingButton onPress={stopGenerating} />
-              ) : isSendingButtonVisible() ? (
+              ) : isSendingButtonVisible ? (
                 cooldownRemainingSeconds ? (
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import type { GestureResponderEvent } from 'react-native';
+import { Pressable } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';
 
 export type MoreOptionsButtonProps = {
   /** Function that opens attachment options bottom sheet */
-  handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
+  handleOnPress?: () => void;
 };
 
 export const MoreOptionsButton = (props: MoreOptionsButtonProps) => {
@@ -21,14 +20,14 @@ export const MoreOptionsButton = (props: MoreOptionsButtonProps) => {
   } = useTheme();
 
   return (
-    <TouchableOpacity
+    <Pressable
       hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
       onPress={handleOnPress}
-      style={[moreOptionsButton]}
+      style={({ pressed }) => [moreOptionsButton, { opacity: pressed ? 0.8 : 1 }]}
       testID='more-options-button'
     >
       <CircleRight pathFill={accent_blue} />
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 

package/src/components/MessageInput/SendButton.tsx

@@ -15,16 +15,19 @@ import { Search } from '../../icons/Search';
 import { SendRight } from '../../icons/SendRight';
 import { SendUp } from '../../icons/SendUp';
 
-type SendButtonPropsWithContext = Pick<MessageInputContextValue, 'sendMessage'> & {
-  /** Disables the button */ disabled: boolean;
+export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
+  /** Disables the button */
+  disabled: boolean;
 };
 
 const customComposerDataSelector = (state: CustomDataManagerState) => ({
   command: state.custom.command,
 });
 
-const SendButtonWithContext = (props: SendButtonPropsWithContext) => {
-  const { disabled = false, sendMessage } = props;
+export const SendButton = (props: SendButtonProps) => {
+  const { disabled = false, sendMessage: propsSendMessage } = props;
+  const { sendMessage: sendMessageFromContext } = useMessageInputContext();
+  const sendMessage = propsSendMessage || sendMessageFromContext;
   const messageComposer = useMessageComposer();
   const { customDataManager } = messageComposer;
   const { command } = useStateStore(customDataManager.state, customComposerDataSelector);
@@ -53,43 +56,4 @@ const SendButtonWithContext = (props: SendButtonPropsWithContext) => {
   );
 };
 
-const areEqual = (prevProps: SendButtonPropsWithContext, nextProps: SendButtonPropsWithContext) => {
-  const { disabled: prevDisabled, sendMessage: prevSendMessage } = prevProps;
-  const { disabled: nextDisabled, sendMessage: nextSendMessage } = nextProps;
-
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) {
-    return false;
-  }
-
-  const sendMessageEqual = prevSendMessage === nextSendMessage;
-  if (!sendMessageEqual) {
-    return false;
-  }
-
-  return true;
-};
-
-const MemoizedSendButton = React.memo(
-  SendButtonWithContext,
-  areEqual,
-) as typeof SendButtonWithContext;
-
-export type SendButtonProps = Partial<SendButtonPropsWithContext>;
-
-/**
- * UI Component for send button in MessageInput component.
- */
-export const SendButton = (props: SendButtonProps) => {
-  const { sendMessage } = useMessageInputContext();
-
-  return (
-    <MemoizedSendButton
-      {...{ sendMessage }}
-      {...props}
-      {...{ disabled: props.disabled || false }}
-    />
-  );
-};
-
 SendButton.displayName = 'SendButton{messageInput}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -10,9 +10,8 @@ import { useTranslationContext } from '../../../../contexts/translationContext/T
 import { Mic } from '../../../../icons/Mic';
 import { AudioRecordingReturnType, NativeHandlers } from '../../../../native';
 
-type AudioRecordingButtonPropsWithContext = Pick<
-  MessageInputContextValue,
-  'asyncMessagesMinimumPressDuration'
+export type AudioRecordingButtonProps = Partial<
+  Pick<MessageInputContextValue, 'asyncMessagesMinimumPressDuration'>
 > & {
   /**
    * The current voice recording that is in progress.
@@ -40,16 +39,21 @@ type AudioRecordingButtonPropsWithContext = Pick<
   startVoiceRecording?: () => Promise<void>;
 };
 
-const AudioRecordingButtonWithContext = (props: AudioRecordingButtonPropsWithContext) => {
+export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
   const {
-    asyncMessagesMinimumPressDuration,
+    asyncMessagesMinimumPressDuration: propsAsyncMessagesMinimumPressDuration,
     buttonSize,
     handleLongPress,
     handlePress,
     permissionsGranted,
     recording,
     startVoiceRecording,
   } = props;
+  const { asyncMessagesMinimumPressDuration: contextAsyncMessagesMinimumPressDuration } =
+    useMessageInputContext();
+
+  const asyncMessagesMinimumPressDuration =
+    propsAsyncMessagesMinimumPressDuration || contextAsyncMessagesMinimumPressDuration;
 
   const {
     theme: {
@@ -116,51 +120,6 @@ const AudioRecordingButtonWithContext = (props: AudioRecordingButtonPropsWithCon
   );
 };
 
-const areEqual = (
-  prevProps: AudioRecordingButtonPropsWithContext,
-  nextProps: AudioRecordingButtonPropsWithContext,
-) => {
-  const {
-    asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
-    recording: prevRecording,
-  } = prevProps;
-  const {
-    asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
-    recording: nextRecording,
-  } = nextProps;
-
-  const asyncMessagesMinimumPressDurationEqual =
-    prevAsyncMessagesMinimumPressDuration === nextAsyncMessagesMinimumPressDuration;
-  if (!asyncMessagesMinimumPressDurationEqual) {
-    return false;
-  }
-
-  const recordingEqual = prevRecording === nextRecording;
-  if (!recordingEqual) {
-    return false;
-  }
-
-  return true;
-};
-
-const MemoizedAudioRecordingButton = React.memo(
-  AudioRecordingButtonWithContext,
-  areEqual,
-) as typeof AudioRecordingButtonWithContext;
-
-export type AudioRecordingButtonProps = Partial<AudioRecordingButtonPropsWithContext> & {
-  recording: AudioRecordingReturnType;
-};
-
-/**
- * Component to display the mic button on the Message Input.
- */
-export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
-  const { asyncMessagesMinimumPressDuration } = useMessageInputContext();
-
-  return <MemoizedAudioRecordingButton {...{ asyncMessagesMinimumPressDuration }} {...props} />;
-};
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',