反应原生图像裁剪选择器在平面列表上显示（渲染）图像时出现问题

Question

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

   const selectImage = async () => {
    const ImageList = [];
    ImagePicker.openPicker({
      multiple: true,
      waitAnimationEnd: false,
      includeExif: false,
      forceJpg: true,
      compressImageQuality: 0.3,
      maxFiles: 10,
      mediaType: 'photo',
      includeBase64: true,
    }).then(response => {
        response.map(image => {
          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) => {
        console.log('ERROR ' + e.message);
        Alert.alert('ERROR ', e.message);
      });
  };

the result of the object is this

so a simple way to show the images is this

            Object.keys(Images).length !== 0 ? Images && (
              Images.map((value, index) => {
                return (
                  <View key={index.key}>
                    <Text>{value.filename}</Text>
                    <Image style={{width: 200, height: 200}} source={{uri: `data:${value.type};base64,${value.data}`}}/>
                  </View>
                );
              })
            )
: null

so that works flawless, but this doesn't...

      <FlatList
        data={Images}
        horizontal={true}
        decelerationRate="fast"
        bounces={false}
        renderItem={(item, index) => {
          <View style={styles.alignView}>
            <View style={styles.titleTextView}>
              <Text>{item.filename}</Text>
              <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
            </View>
          </View>;
        }}
        keyExtractor={(item, index) => item.id}
      />

at first i thought it was the key extractor, but it doesn't seem to be the problem

EDIT: Solved, i was missing a {} inside the render item plus a return

                renderItem={({item, index}) => {
              return                   <View style={styles.alignView}>
              <View style={styles.titleTextView}>
                <Text>{item.filename}</Text>
               <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
              </View>
            </View> //<Text>{item.filename}</Text>; /**/
            }

Answer 1

I'd suggest you to optimise selectImage

const selectImage = async () => {
    await ImagePicker.openPicker({
      multiple: true,
      waitAnimationEnd: false,
      includeExif: false,
      forceJpg: true,
      compressImageQuality: 0.3,
      maxFiles: 10,
      mediaType: 'photo',
      includeBase64: true,
    }).then(response => {
        const ImageList = response.map((image, index) => ({
            id: index,
            filename: image.filename || Moment().toString(),
            path: image.path,
            type: image.mime,
            data: image.data,
        }));
        setImages(ImageList);
        console.log(ImageList);
      }).catch((e) => {
        console.log('ERROR ' + e.message);
        Alert.alert('ERROR ', e.message);
      });
  };

and your renderItem function returns undefined.

This is correct version

<FlatList
    data={Images}
    horizontal={true}
    decelerationRate="fast"
    bounces={false}
    renderItem={(item, index) => (
      <View style={styles.alignView}>
        <View style={styles.titleTextView}>
          <Text>{item.filename}</Text>
          <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
        </View>
      </View>
    )}
    keyExtractor={(item, index) => item.id}
/>

use parentheses instead of curly braces after =>

Answer 2

                  renderItem={({item, index}) => {
                  return (
                    <View style={styles.alignView}>
                      <View style={styles.titleTextView}>
                        <Text>{item.filename}</Text>
                        <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
                      </View>
                    </View>
                  );                   
                  }