title: Having issues with react native image crop picker to display (render) images on flatlist
body: <p>So i got this component to pick or select multiple images and save it (or not) in this empty array to display them in a sort of carousel, at least this my idea, anyways, this is my function</p>
  <pre><code>   const selectImage = async () =&gt; {
      const ImageList = [];
      ImagePicker.openPicker({
        multiple: true,
        waitAnimationEnd: false,
        includeExif: false,
        forceJpg: true,
        compressImageQuality: 0.3,
        maxFiles: 10,
        mediaType: 'photo',
        includeBase64: true,
      }).then(response =&gt; {
          response.map(image =&gt; {
            setImages(ImageList.push({
              id: ImageList.length,
              filename: image.filename || Moment().toString(),
              path: image.path,
              type: image.mime,
              data: image.data,
            }));
          });
          setImages(ImageList);
          console.log(ImageList);
        }).catch((e) =&gt; {
          console.log('ERROR ' + e.message);
          Alert.alert('ERROR ', e.message);
        });
    };
  </code></pre>
  <p>the result of the object is this</p>
  <p><a href="https://i.stack.imgur.com/7qGXx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7qGXx.png" alt="enter image description here" /></a></p>
  <p>so a simple way to show the images is this</p>
  <pre><code>            Object.keys(Images).length !== 0 ? Images &amp;&amp; (
                Images.map((value, index) =&gt; {
                  return (
                    &lt;View key={index.key}&gt;
                      &lt;Text&gt;{value.filename}&lt;/Text&gt;
                      &lt;Image style={{width: 200, height: 200}} source={{uri: `data:${value.type};base64,${value.data}`}}/&gt;
                    &lt;/View&gt;
                  );
                })
              )
  : null
  </code></pre>
  <p>so that works flawless, but this doesn't...</p>
  <pre><code>      &lt;FlatList
          data={Images}
          horizontal={true}
          decelerationRate=&quot;fast&quot;
          bounces={false}
          renderItem={(item, index) =&gt; {
            &lt;View style={styles.alignView}&gt;
              &lt;View style={styles.titleTextView}&gt;
                &lt;Text&gt;{item.filename}&lt;/Text&gt;
                &lt;Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/&gt;
              &lt;/View&gt;
            &lt;/View&gt;;
          }}
          keyExtractor={(item, index) =&gt; item.id}
        /&gt;
  </code></pre>
  <p>at first i thought it was the key extractor, but it doesn't seem to be the problem</p>
  <p>EDIT: Solved, i was missing a {} inside the render item plus a return</p>
  <pre><code>                renderItem={({item, index}) =&gt; {
                return                   &lt;View style={styles.alignView}&gt;
                &lt;View style={styles.titleTextView}&gt;
                  &lt;Text&gt;{item.filename}&lt;/Text&gt;
                 &lt;Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/&gt;
                &lt;/View&gt;
              &lt;/View&gt; //&lt;Text&gt;{item.filename}&lt;/Text&gt;; /**/
              }
  </code></pre>