Custom tolbar with buttons GiftedChat

Question

I used library 'GiftedChat' .I want to make the bottom of the chat with this - InputToolBar , and below the container with 5 buttons, one of them is the button to send a message

How do I distribute this properly among the components ?

Answer 1

if I understood you correctly, you want to know how you could organize this code

first, you don't need a <View> at all to wrapper your content you should import GiftedChat from the library itself, then you can use all the props from there

for example

import {GiftedChat, InputToolbar} from 'react-native-gifted-chat';

 <GiftedChat
          renderInputToolbar={props => {
            return (
              <InputToolbar
                {...props}
                containerStyle={styles.chatWithoutBorder}
                renderComposer={() => <CustomComposer {...props} />}
                renderActions={() => {
                  return (
                        <CustomAction />
                      )
                  );
                }}
                renderSend={() => <CustomSend {...props} />}
              />
            );
          }}
        /> 

all these custom components are actually normal components you can create it on your own,all you need is to send props for it and for the footer below the message box, you will need this renderAccessory as described here in the https://github.com/FaridSafi/react-native-gifted-chat