import React from "react";
import { View, Text, StyleSheet, ScrollView, Image } from "react-native";

const Icons = [
  { name: "Food", uri: require("./images/Food.png") },
  { name: "Mart", uri: require("./images/mart.png") },
  { name: "Car",  uri: require("./images/car.png")  }
];

const IconSelection = Icons.map((icons) => (
  <View>
    <Image source={icons.uri} />
    <Text style={{ textAlign: "center" }}>{icons.name}</Text>
  </View>
));

const styles = StyleSheet.create({});

export default IconSelection;

Is my way of adding images to my const Icons correct? Basically I want to create like a list of Icons using images and able to call them. Previously my method is basically handcode them but I found it is very messy. I think maps() could help me but I'm not really sure how to use it too. Thank you.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import IconSelection from "./icons";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <IconSelection />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

It says Check the render method of app. The error source is pointing require().