title: Display custom image and link to a sectionList item on react native
body: <p>I'm a newbie on react-native.
  I want to build personalized data from array to populate sectionLists.</p>
  <p>My actual code, extracted from <a href="https://reactnative.dev/docs/sectionlist" rel="nofollow noreferrer">react-native docs</a> is</p>
  <pre><code>import React from &quot;react&quot;;
  import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar } from &quot;react-native&quot;;
  
  const DATA = [
    {
      title: &quot;Main dishes&quot;,
      data: [&quot;Pizza&quot;, &quot;Burger&quot;, &quot;Risotto&quot;],
    },
    {
      title: &quot;Sides&quot;,
      data: [&quot;French Fries&quot;, &quot;Onion Rings&quot;, &quot;Fried Shrimps&quot;]
    },
    {
      title: &quot;Drinks&quot;,
      data: [&quot;Water&quot;, &quot;Coke&quot;, &quot;Beer&quot;]
    },
    {
      title: &quot;Desserts&quot;,
      data: [&quot;Cheese Cake&quot;, &quot;Ice Cream&quot;]
    }
  ];
  
  const Item = ({ title }) =&gt; (
    &lt;View style={styles.item}&gt;
      &lt;Text style={styles.title}&gt;{title}&lt;/Text&gt;
    &lt;/View&gt;
  );
  
  const App = () =&gt; (
    &lt;SafeAreaView style={styles.container}&gt;
      &lt;SectionList
        sections={DATA}
        keyExtractor={(item, index) =&gt; item + index}
        renderItem={({ item }) =&gt; &lt;Item title={item} /&gt;}
        renderSectionHeader={({ section: { title } }) =&gt; (
          &lt;Text style={styles.header}&gt;{title}&lt;/Text&gt;
        )}
      /&gt;
    &lt;/SafeAreaView&gt;
  );
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: StatusBar.currentHeight,
      marginHorizontal: 16
    },
    item: {
      backgroundColor: &quot;#f9c2ff&quot;,
      padding: 20,
      marginVertical: 8
    },
    header: {
      fontSize: 32,
      backgroundColor: &quot;#fff&quot;
    },
    title: {
      fontSize: 24
    }
  });
  
  export default App;
  </code></pre>
  <p>Here, we have only 2 dimensions to data array. I want to personalize that DATA array sending an image source, and a link to a screen on itemclick, for example.</p>
  <p>I mean, I have actually title, data on DATA array. I want to add image and link columns to this DATA array and I want to have a solution to parse it in order to associate the link to props and display an image by its source content on image field.</p>
  <p>Could you please tell me how to present that for the array and render it ?</p>
  <p>Thanks.</p>
  <p>EDIT :</p>
  <p>I want to add 2 columns image and link on the DATA array like that :</p>
  <pre><code>const DATA = [
    {
      title: &quot;Main dishes&quot;,
      data: [&quot;Pizza&quot;, &quot;Burger&quot;, &quot;Risotto&quot;],
      image: [require('../assets/Aquarium.png'), require('../assets/Aquarium.png'), require('../assets/Aquarium.png')]
      link: [&quot;Pizza&quot;, &quot;Burger&quot;, &quot;Risotto&quot;]
    },
    {
      title: &quot;Sides&quot;,
      data: [&quot;French Fries&quot;, &quot;Onion Rings&quot;, &quot;Fried Shrimps&quot;]
      image: [require('../assets/Aquarium.png'), require('../assets/Aquarium.png'), require('../assets/Aquarium.png')]
      link: [&quot;FrenchFries&quot;, &quot;OnionRings&quot;, &quot;FriedShrimps&quot;]
    },
    {
      title: &quot;Drinks&quot;,
      data: [&quot;Water&quot;, &quot;Coke&quot;, &quot;Beer&quot;]
      image: [require('../assets/Aquarium.png'), require('../assets/Aquarium.png'), require('../assets/Aquarium.png')],
      link: [&quot;Water&quot;, &quot;Coke&quot;, &quot;Beer&quot;]
    },
    {
      title: &quot;Desserts&quot;,
      data: [&quot;Cheese Cake&quot;, &quot;Ice Cream&quot;]
      image: [require('../assets/Aquarium.png'), require('../assets/Aquarium.png')]
      link: [&quot;CheeseCake&quot;, &quot;IceCream&quot;]
    }
  ];
  </code></pre>
  <p>And I want to change my code like this to present image and link to a stackscreen name but it gives me errors.</p>
  <pre><code>return (
          &lt;SafeAreaView style={styles.container}&gt;
            &lt;SectionList
              sections={DATA}
              keyExtractor={(item, index) =&gt; item + index}
              renderItem={({ item }) =&gt; 
                &lt;TouchableWithoutFeedback 
                  activeOpacity={0.4}
                  onPress={ () =&gt; navigation.navigate(item.link)}&gt;
                  &lt;View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'transparent', marginTop: 15, marginBottom: 15}}&gt;
                    &lt;Image source={item.image}/&gt;
                    &lt;Item title={item.title} /&gt;
                    
                  &lt;/View&gt;
                &lt;/TouchableWithoutFeedback&gt;
              }
              renderSectionHeader={({ section: { title } }) =&gt; (
                &lt;View&gt;
                  &lt;Text style={styles.header}&gt;{title}&lt;/Text&gt;
                &lt;/View&gt;
              )}
            /&gt;
          &lt;/SafeAreaView&gt;
        );
  </code></pre>
  <p>Could you please help me ?</p>