Just wanted to share.

I was finding it difficult to customize the default UI for this package. The official documentation wasn't that helpful.

Luckily, I was able to solve it.

See answer

Just wanted to share.

I was finding it difficult to customize the default UI for this package. The official documentation wasn't that helpful.

Luckily, I was able to solve it.

See answer

• javascript
• react-native
• react-native-gifted-chat

1 Answer 1

Make your imports

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

Customizing the InputToolbar

Note: InputToolbar must be imported since we want to customize it

Create a function called customInputToolbar that will return the custom UI

const customtInputToolbar = props => {
  return (
    <InputToolbar
      {...props}
      containerStyle={{
        backgroundColor: "white",
        borderTopColor: "#E8E8E8",
        borderTopWidth: 1,
        padding: 8
      }}
    />
  );
};

Note: props must be an argument.

Tip: Since all props for the InputToolbar were not listed in the official github page (https://github.com/FaridSafi/react-native-gifted-chat), you can Cmd + Left Click on the InputToolbar tag while in your editor. This will navigate you to the source file within which all props are listed. Be careful not to edit anything !!

Include the renderInputToolbar as a prop in the GiftedChat component

<GiftedChat
    messages={chatMessages.messages}
    onSend={messages => sendMessage(messages)}
    renderInputToolbar={props => customtInputToolbar(props)}
    ...
 />

Note: Remember to pass props as an argument to the function. Without this, the UI will not display

You're done !!

Customizing the SystemMessage component or using an absolutely custom UI

Include SystemMessage in your import

Create a function called customSystemMessage

  const customSystemMessage = props => {
    return (
      <View style={styles.ChatMessageSytemMessageContainer}>
        <Icon name="lock" color="#9d9d9d" size={16} />
        <Text style={styles.ChatMessageSystemMessageText}>
          Your chat is secured. Remember to be cautious about what you share
          with others.
        </Text>
      </View>
    );
  };

Include renderSystemMessage as a prop in your GiftedChat component

You're done

Hope this helps!