Question

0

411

Views

React native How to add Images with map()

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;

IconSelection.js How do I add images inside my const Icons? 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.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T11:36:45.485Z

IconSelectionis a reference to an array containing returned JSX.

Convert it into a functional component

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;

0

411

React native How to add Images with map()

1 answers

0

Find remote jobs

Andres GPT