title: React Native FlatList Touchable Opacity
body: <p>I used <code>FlatList</code> to display the title that is in the data. I added in <code>TouchableOpacity</code> for the <code>FlatList</code>. So for example, when I click 'First', I want to show the the data from 'mood' and it will show the list of <code>passionate,rousing</code> and confident. I want to show the list on a new file/screen and show purely the mood of list.</p>
  
  <p>This is my data:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Mock = 
  [
  { title: 'First', 
    mood: 
  [
    {name: 'passionate'},
    {name: 'rousing'},
    {name: 'confident'},
  ],
  },
  { title: 'Second', 
    mood: 
  [
    {name: 'rollicking'},
    {name: 'cheerful'},
    {name: 'fun'},
    {name: 'sweet'},
    {name: 'amiable'},
    {name: 'natured'}
  ],
  </code></pre>
  
  <p>This is my <code>FlatList</code> code:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>export default class Cluster1 extends Component{
      render() {
  
        return (
          &lt;View&gt;
            &lt;FlatList
              data={Mock}
              renderItem={({ item, index }) =&gt; {
                return &lt;FlatListItem item={item} index={index} /&gt;;
              }}
            /&gt;
          &lt;/View&gt;
        );
      }
    }
  
    class FlatListItem extends Component {
      render() {
        return (
          &lt;View style={styles.list}&gt;
            &lt;View&gt;
                &lt;TouchableOpacity&gt;
              &lt;Text style={styles.itemTitle}&gt;{this.props.item.title}&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        );
      }
    }
  </code></pre>
  
  <p>What should I do with the <code>TouchableOpacity</code> when I want to show the mood name when I click the title?</p>
  
  <p>This is my style code</p>
  
  <pre><code>const styles = StyleSheet.create({  
   itemTitle:{
      fontSize: 25,
      fontWeight: 'bold',
      color: 'white',
      margin: 20,
  },
  },
  list:{
      flex: 1,
      backgroundColor: '#00BCD4',
      alignItems: 'center',
      justifyContent: 'space-between',
      flexDirection: 'row',
  },
  });
  </code></pre>