Displaying custom UI controls in the React Native Gifted chat messages
Alexey Korepanov
by Alexey Korepanov
~1 min read



A brief tutorial on how to render custom UI componenets inside the chat messages if you use Gifted Chat library for React Native.

Gifted Chat for React Native is a very powerful library which allows you to implement chat UI real easy.

You can customize virtually everything. Say you want a Switch to be displayed inside your messages if the message contains [x] text.

In order to do it you need to provide renderBubble attribute to the GiftedChat component:


Now you need to implement renderMessageText function:

const renderMessageText = (props) => {
  const {
  } = props;
  const { text: currText } = currentMessage;
  if (currText.indexOf('[x]') === -1) {
    return <MessageText {...props} />;
  return (
    <View style={styles.checkboxView}>
      <Switch value={checked} onValueChange={(value) => setChecked(value) } style={ {flex: 1} }/>
      <MessageText {...props}/>

This function checks if the message text contains [x] and if not, just returns the default message UI. Oherwise it customezes the UI and adds a Switch component next to the message text.

Below you can find the full working example: