How to add image as a message in react native gifted chat

Question

I am a fellow new developer. I was using react native gifted chat with Firebase, Expo, I successfully added test message in my app, but I was having problem in adding image as a message please help me.

Well, I tried to look on the docs of react native gifted chat, but they were not helpful. I also tried to lookup on YouTube but still I got no help.

This is my New Message.js File

import { TouchableOpacity, Text,View,Image} from 'react-native';
import {React,useState,useEffect,useLayoutEffect,useCallback} from 'react'
import { auth, database} from '../firebase';
import { GiftedChat,InputToolbar,Send,Bubble } from 'react-native-gifted-chat';
import {
  collection,
  addDoc,
  orderBy,
  query,
  onSnapshot
} from 'firebase/firestore';
const NewMessage = () => {
    var nameMatch = auth?.currentUser?.email.match(/^([^@]*)@/);
  var name = nameMatch ? nameMatch[1] : null;
    const [messages, setMessages] = useState([]);
    useLayoutEffect(() => {

      const collectionRef = collection(database, 'chats');
      const q = query(collectionRef, orderBy('createdAt', 'desc'));

  const unsubscribe = onSnapshot(q, querySnapshot => {
      console.log('querySnapshot unsusbscribe');
        setMessages(
          querySnapshot.docs.map(doc => ({
            _id: doc.data()._id,
            createdAt: doc.data().createdAt.toDate(),
            text: doc.data().text,
            user: doc.data().user
          }))
        );
      });
  return unsubscribe;
    }, []);

  const onSend = useCallback((messages = []) => {
      setMessages(previousMessages =>
        GiftedChat.append(previousMessages, messages)
      );
      // setMessages([...messages, ...messages]);
      const { _id, createdAt, text, user } = messages[0];    
      addDoc(collection(database, 'chats'), {
        _id,
        createdAt,
        text,
        user
      });
    }, []);
    
      const customtInputToolbar = props => {
        return (
          <InputToolbar
            {...props}
            containerStyle={{
              backgroundColor: "white",
              border:"none",
              padding: 5,
              
            }}
          />
        );
      };
      const customSend = props => {
        return (<><Send {...props} >
          <View style={{justifyContent: 'center', height: '100%', marginRight: 10}}>
            <Image source={require("../assets/send.png")} style={{width:25,height:25,}}/>
          </View>
          
          
      </Send><View style={{justifyContent: 'center', height: '100%', marginRight: 10}}>
            <Image source={require("../assets/play.png")} style={{width:25,height:25,}}/>
          </View>
          <View style={{justifyContent: 'center', height: '100%', marginRight: 10}}>
            <Image source={require("../assets/picture.png")} style={{width:25,height:25,}}/>
          </View></>)
      }
     const renderBubble = props => {
        return (
          <Bubble
            {...props}
            wrapperStyle={{
              left: {
                backgroundColor: '#f0f0f0',
              },
            }}
          />
        )
      }
  return (
    <View style={{flex:1}}>
      <GiftedChat
        messages={messages}
        renderBubble={this.renderBubble}
        showAvatarForEveryMessage={true}
        showUserAvatar={true}
        
        renderUsernameOnMessage={true}
        onSend={messages => onSend(messages)}
        alwaysShowSend={true}
        renderInputToolbar={props => customtInputToolbar(props)}
        messagesContainerStyle={{
          backgroundColor: '#ffff'
        }}
        renderSend={props=>customSend(props)}
        textInputStyle={{
          backgroundColor: '#fff',
          borderRadius: 20,
        }}
        renderMessageImage={
          null
        }
        user={{
          _id: auth?.currentUser?.email,
          name:name,
          avatar: 'https://i.pravatar.cc/300'
        }}
        
      />
      
    </View>
  )
}

export default NewMessage