title: How to make text message clickable with react-native-gifted-chat
body: <p>I'm developing a mobile chat app with <code>react-native-gifted-chat</code>, and I would like to make the system messages clickable to execute a function.</p>
  
  <p>My code is below, but somehow it doesn't work.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Image, ImageBackground, Text, Linking, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
  import { Body, Container, Header, Icon, Left, Right, Thumbnail } from "native-base";
  import { Button, List } from 'react-native-paper';
  import { GiftedChat, Composer } from 'react-native-gifted-chat';
  
  export default class ChatScreen extends Component {
  
    messages = [
      {
        _id: 1,
        text: &lt;Text onClick={() =&gt; { alert('hello')}} style={{ color: 'red' }}&gt;This message can not be clickable&lt;/Text&gt;,
        createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
        system: true,
      }
    ];
  
    renderComposer = props =&gt; {
      return (
        &lt;View style={{flexDirection: 'row'}}&gt;
          &lt;Icon type='SimpleLineIcons' name='paper-clip' style={{ fontSize: 20, justifyContent: 'center', paddingTop: 10, paddingLeft: 5 }}/&gt;
          &lt;Composer {...props} /&gt;
          &lt;Button&gt;Submit&lt;/Button&gt;
        &lt;/View&gt;
      );
    };
  
    render() {
      return (
        &lt;Container&gt;
          &lt;GiftedChat
            renderComposer={this.renderComposer}
            messages={this.messages}
          /&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  });
  </code></pre>
  
  <p>And this is the screenshot of my simulator.
  <a href="https://gyazo.com/bc1facffffcbe868fbce5cb15385890d" rel="nofollow noreferrer">https://gyazo.com/bc1facffffcbe868fbce5cb15385890d</a></p>
  
  <p>I expect the system message 'This message cannot be clickable' should be clickable and it shows up the alert message 'hello' when clicking it.
  But it doesn't work.</p>