add a optional panel below the bottom bar which can be used for some additional use

example/src/App.tsx

@@ -2,6 +2,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'
 import { Chat, MessageType } from '@flyerhq/react-native-chat-ui'
 import { PreviewData } from '@flyerhq/react-native-link-preview'
 import React, { useState } from 'react'
+import {Dimensions, View} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import FileViewer from 'react-native-file-viewer'
 import { launchImageLibrary } from 'react-native-image-picker'
@@ -126,6 +127,23 @@ const App = () => {
       onPreviewDataFetched={handlePreviewDataFetched}
       onSendPress={handleSendPress}
       user={user}
+
+      // onAttachmentPress={() => {
+      //   this.setState ({bShowOption : true})
+      // }}
+
+      renderOptionPanel={() => {
+
+        // if (!this.state.bShowOption) return ;
+
+        // we can show it now 
+        return (
+          <View style={{width : Dimensions.get('screen').width,height : 40,backgroundColor : 'lightblue'}}>
+            {/* render anything you want  */}
+          </View>
+        )
+      }}
+
     />
   )
 }

src/components/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
 import { MessageType, Theme } from '../../types'
 import { getUserAvatarNameColor, getUserInitials } from '../../utils'
@@ -11,12 +11,14 @@ export const Avatar = React.memo(
     showAvatar,
     showUserAvatars,
     theme,
+    onAvatarPress,
   }: {
     author: MessageType.Any['author']
     currentUserIsAuthor: boolean
     showAvatar: boolean
     showUserAvatars?: boolean
-    theme: Theme
+    theme: Theme,
+    onAvatarPress?: () => void
   }) => {
     const renderAvatar = () => {
       const color = getUserAvatarNameColor(
@@ -27,15 +29,17 @@ export const Avatar = React.memo(
 
       if (author.imageUrl) {
         return (
-          <Image
-            accessibilityRole='image'
-            resizeMode='cover'
-            source={{ uri: author.imageUrl }}
-            style={[
-              styles.image,
-              { backgroundColor: theme.colors.userAvatarImageBackground },
-            ]}
-          />
+          <TouchableOpacity onPress={onAvatarPress} activeOpacity={0.95}>
+            <Image
+              accessibilityRole='image'
+              resizeMode='cover'
+              source={{ uri: author.imageUrl }}
+              style={[
+                styles.image,
+                { backgroundColor: theme.colors.userAvatarImageBackground },
+              ]}
+            />
+          </TouchableOpacity>
         )
       }
 

src/components/Chat/Chat.tsx

@@ -122,6 +122,14 @@ export const Chat = ({
   onPreviewDataFetched,
   onSendPress,
   renderBubble,
+
+  renderInputPanel,
+  renderOptionPanel,
+  renderLeftPanel,
+  renderMidPanel,
+  renderRightPanel,
+  onAvatarPress,
+
   renderCustomMessage,
   renderFileMessage,
   renderImageMessage,
@@ -294,6 +302,14 @@ export const Chat = ({
             onMessagePress: handleMessagePress,
             onPreviewDataFetched,
             renderBubble,
+
+            renderInputPanel,
+            renderOptionPanel,
+            renderLeftPanel,
+            renderMidPanel,
+            renderRightPanel,
+            onAvatarPress,
+
             renderCustomMessage,
             renderFileMessage,
             renderImageMessage,
@@ -314,6 +330,14 @@ export const Chat = ({
       onMessageLongPress,
       onPreviewDataFetched,
       renderBubble,
+
+      renderInputPanel,
+      renderOptionPanel,
+      renderLeftPanel,
+      renderMidPanel,
+      renderRightPanel,
+      onAvatarPress,
+
       renderCustomMessage,
       renderFileMessage,
       renderImageMessage,
@@ -423,6 +447,11 @@ export const Chat = ({
                     isAttachmentUploading,
                     onAttachmentPress,
                     onSendPress,
+                    renderInputPanel,
+                    renderOptionPanel,
+                    renderLeftPanel,
+                    renderMidPanel,
+                    renderRightPanel,
                     renderScrollable,
                     sendButtonVisibilityMode,
                     textInputProps,

src/components/Input/Input.tsx

@@ -29,6 +29,20 @@ export interface InputTopLevelProps {
    * `TextInput` state. Defaults to `editing`. */
   sendButtonVisibilityMode?: 'always' | 'editing'
   textInputProps?: TextInputProps
+
+  renderInputPanel?: () => React.ReactNode
+
+  /** Render a optional panel  */
+  renderOptionPanel?: () => React.ReactNode
+
+  /** Render left panel */
+  renderLeftPanel?: () => React.ReactNode
+
+  /** Render middle panel */
+  renderMidPanel?: () => React.ReactNode
+
+  /** Render right panel */
+  renderRightPanel?: () => React.ReactNode
 }
 
 export interface InputAdditionalProps {
@@ -46,6 +60,13 @@ export const Input = ({
   isAttachmentUploading,
   onAttachmentPress,
   onSendPress,
+
+  renderInputPanel,
+  renderOptionPanel,
+  renderLeftPanel,
+  renderMidPanel,
+  renderRightPanel,
+
   sendButtonVisibilityMode,
   textInputProps,
 }: InputProps) => {
@@ -77,40 +98,58 @@ export const Input = ({
     }
   }
 
+  if (renderInputPanel) {
+    return (
+      <View>
+        {renderInputPanel ()}
+      </View>
+    );
+  }
+
   return (
-    <View style={container}>
-      {user &&
-        (isAttachmentUploading ? (
-          <CircularActivityIndicator
-            {...{
-              ...attachmentCircularActivityIndicatorProps,
-              color: theme.colors.inputText,
-              style: marginRight,
-            }}
-          />
-        ) : (
-          !!onAttachmentPress && (
-            <AttachmentButton
-              {...unwrap(attachmentButtonProps)}
-              onPress={onAttachmentPress}
+    <View style={{flexDirection : 'column'}}>
+      <View style={container}>
+        {user &&
+          (isAttachmentUploading ? (
+            <CircularActivityIndicator
+              {...{
+                ...attachmentCircularActivityIndicatorProps,
+                color: theme.colors.inputText,
+                style: marginRight,
+              }}
             />
-          )
-        ))}
-      <TextInput
-        multiline
-        placeholder={l10n.inputPlaceholder}
-        placeholderTextColor={`${String(theme.colors.inputText)}80`}
-        underlineColorAndroid='transparent'
-        {...textInputProps}
-        // Keep our implementation but allow user to use these `TextInputProps`
-        style={[input, textInputProps?.style]}
-        onChangeText={handleChangeText}
-        value={value}
-      />
-      {sendButtonVisibilityMode === 'always' ||
-      (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
-        <SendButton onPress={handleSend} />
-      ) : null}
+          ) : (
+            renderLeftPanel ? renderLeftPanel () :
+              !!onAttachmentPress && (
+                <AttachmentButton
+                  {...unwrap(attachmentButtonProps)}
+                  onPress={onAttachmentPress}
+                />
+              )
+          ))
+        }
+        {
+          renderMidPanel ? renderMidPanel () :
+            (<TextInput
+              multiline
+              placeholder={l10n.inputPlaceholder}
+              placeholderTextColor={`${String(theme.colors.inputText)}80`}
+              underlineColorAndroid='transparent'
+              {...textInputProps}
+              // Keep our implementation but allow user to use these `TextInputProps`
+              style={[input, textInputProps?.style]}
+              onChangeText={handleChangeText}
+              value={value}
+            />)
+        }
+        {sendButtonVisibilityMode === 'always' ||
+        (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
+          renderRightPanel ? renderRightPanel () : <SendButton onPress={handleSend} />
+        ) : null}
+      </View>
+      <View>
+        {(() => {return renderOptionPanel && renderOptionPanel ()})()}
+      </View>
     </View>
   )
 }

src/components/Message/Message.tsx

@@ -53,6 +53,8 @@ export interface MessageTopLevelProps extends TextMessageTopLevelProps {
   ) => React.ReactNode
   /** Show user avatars for received messages. Useful for a group chat. */
   showUserAvatars?: boolean
+
+  onAvatarPress? :() => void
 }
 
 export interface MessageProps extends MessageTopLevelProps {
@@ -81,6 +83,7 @@ export const Message = React.memo(
     renderFileMessage,
     renderImageMessage,
     renderTextMessage,
+    onAvatarPress,
     roundBorder,
     showAvatar,
     showName,
@@ -189,6 +192,7 @@ export const Message = React.memo(
             showAvatar,
             showUserAvatars,
             theme,
+            onAvatarPress,
           }}
         />
         <Pressable