fix: auto complete input changes

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -65,11 +65,7 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
   }, [channel]);
 
   const numberOfLines = useMemo(() => {
-    if (props.numberOfLines) {
-      return props.numberOfLines;
-    }
-
-    return MAX_NUMBER_OF_LINES;
+    return props.numberOfLines ?? MAX_NUMBER_OF_LINES;
   }, [props.numberOfLines]);
 
   useEffect(() => {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -1,15 +1,41 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { CommandVariants } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
 
+export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
+  const {
+    theme: {
+      colors: { white },
+    },
+  } = useTheme();
+
+  if (name === 'ban') {
+    return <UserDelete height={16} pathFill={white} width={16} />;
+  } else if (name === 'flag') {
+    return <Flag pathFill={white} />;
+  } else if (name === 'giphy') {
+    return <GiphyIcon />;
+  } else if (name === 'imgur') {
+    return <Imgur />;
+  } else if (name === 'mute') {
+    return <Mute height={16} pathFill={white} width={16} />;
+  } else if (name === 'unban') {
+    return <UserAdd height={16} pathFill={white} width={16} />;
+  } else if (name === 'unmute') {
+    return <Sound pathFill={white} />;
+  } else {
+    return <Lightning fill={white} size={16} />;
+  }
+};
+
 export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: {
-      colors: { accent_blue, white },
+      colors: { accent_blue },
       messageInput: {
         suggestions: {
           command: { iconContainer },
@@ -18,32 +44,6 @@ export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVaria
     },
   } = useTheme();
 
-  const renderIcon = useCallback(
-    (name: CommandVariants) => {
-      switch (name) {
-        case 'ban':
-          return <UserDelete height={16} pathFill={white} width={16} />;
-        case 'flag':
-          return <Flag pathFill={white} />;
-        case 'giphy':
-          return <GiphyIcon />;
-        case 'imgur':
-          return <Imgur />;
-        case 'mute':
-          return <Mute height={16} pathFill={white} width={16} />;
-        case 'unban':
-          return <UserAdd height={16} pathFill={white} width={16} />;
-        case 'unmute':
-          return <Sound pathFill={white} />;
-        default:
-          return <Lightning fill={white} size={16} />;
-      }
-    },
-    [white],
-  );
-
-  const icon = renderIcon(name);
-
   return (
     <View
       style={[
@@ -54,7 +54,7 @@ export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVaria
         iconContainer,
       ]}
     >
-      {icon}
+      <SuggestionCommandIcon name={name} />
     </View>
   );
 };

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -92,7 +92,13 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   );
 };
 
-const renderSuggestionItem = (item: TextComposerSuggestion, triggerType?: string) => {
+const SuggestionItem = ({
+  item,
+  triggerType,
+}: {
+  item: TextComposerSuggestion;
+  triggerType?: string;
+}) => {
   switch (triggerType) {
     case 'mention':
       return <MentionSuggestionItem {...(item as UserSuggestion)} />;
@@ -127,9 +133,9 @@ export const AutoCompleteSuggestionItem = ({
   return (
     <Pressable
       onPress={handlePress}
-      style={({ pressed }) => [{ opacity: pressed ? 0.2 : 1 }, itemStyle]}
+      style={({ pressed }) => [{ opacity: pressed ? 0.8 : 1 }, itemStyle]}
     >
-      {renderSuggestionItem(itemProps, triggerType)}
+      <SuggestionItem item={itemProps} triggerType={triggerType} />
     </Pressable>
   );
 };