Use FlatList to render array of items and it has lazy loading so it will be good when you use large amount of data.

In your case use this code and it will be working fine:

  var [data, setData] = useState([
        {
            id: 1,
            src: require("../assets/image.jpg"),
        },
        {
            id: 2,
            src: require("../assets/image2.jpg"),
        },
    ])
  return (
 <SafeAreaView>
   <FlatList
       data={data}
       showsVerticalScrollIndicator={false}
       renderItem={({item}) => (
            <Image
             source={item.src}
             style={styles.imageStyle}
            />
       )}
       keyExtractor={item => item.id.toString()}
     />
  </SafeAreaView>

Q2) How i can display image from web not in project folder?

answer:

<Image source={{uri: 'https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg'}} style={{width: 400, height: 400}} />

Q1) For your first question. You are not getting value correctly. Please try this answer.

    var [data, setData] = useState([
  {
    src: require("../assets/image.jpg"),
  },
  {
    src: require("../assets/image2.jpg"),
  },
]);

return (
  <SafeAreaView>
    <View>
      {data.map((image) => {
        return (
          <View>
            <Image source={image["src"])} /> //THIS WILL WORK
          </View>
        );
      })}
    </View>
  </SafeAreaView>
);

had this problem and I solved it like this

../src/assets/images -> create index.js file and add your images in images folder. Your index.js should be like this

import firstImg from "./image_1.png";
import secondImg from "./image_2.png";

const images = {
  firstImg,
  secondImg,
};

export default images;

then, in your component, import images.js and create your object.

import images from "../../assets/images";

const imagesBlock = [
    {
       imgSrc: images.firstImage
    },
    {
       imgSrc: images.secondImage
    }
]

and then use .map() function. Also you can add a custom class for each image.

imagesBlocks.map((source, index) => {
  const { imgSrc } = source;
  return (
    <img src={imgSrc} key={index} alt="image" />
  )
})