Mapping in React Native
Map Method with variable data in React Native
To display multiple values along with images in React Native, you can use the .map() method or FlatList with Image components. Here’s a guide to do it:
Sample Data with Images
Assume your data has URLs for images along with other properties:
const data = [
{
id: 1,
name: 'Item One',
description: 'This is item one',
price: '$10',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 2,
name: 'Item Two',
description: 'This is item two',
price: '$20',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 3,
name: 'Item Three',
description: 'This is item three',
price: '$30',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 1,
name: 'Item One',
description: 'This is item one',
price: '$10',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 2,
name: 'Item Two',
description: 'This is item two',
price: '$20',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 3,
name: 'Item Three',
description: 'This is item three',
price: '$30',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 1,
name: 'Item One',
description: 'This is item one',
price: '$10',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 2,
name: 'Item Two',
description: 'This is item two',
price: '$20',
imageUrl: 'https://via.placeholder.com/150',
},
{
id: 3,
name: 'Item Three',
description: 'This is item three',
price: '$30',
imageUrl: 'https://via.placeholder.com/150',
},
];
Using
.map() to Render Items with Images
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
{data.map((item) => (
<View key={item.id} style={styles.itemContainer}>
<Image source={{ uri: item.imageUrl }} style={styles.itemImage} />
<View style={styles.textContainer}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemDescription}>{item.description}</Text>
<Text style={styles.itemPrice}>{item.price}</Text>
</View>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
itemContainer: {
flexDirection: 'row',
padding: 15,
marginBottom: 10,
backgroundColor: '#f0f0f0',
borderRadius: 5,
},
itemImage: {
width: 60,
height: 60,
borderRadius: 5,
marginRight: 15,
},
textContainer: {
flex: 1,
justifyContent: 'center',
},
itemName: {
fontSize: 18,
fontWeight: 'bold',
},
itemDescription: {
fontSize: 14,
color: '#555',
},
itemPrice: {
fontSize: 16,
color: 'green',
marginTop: 5,
},
});
export default App;
Using
Using FlatList with Images (Recommended for Performance with Larger Lists)
Using FlatList is more efficient for larger lists, especially when
working with images.
import React from 'react';
import { View, Text, Image, FlatList, StyleSheet } from 'react-native';
const App = () => {
return (
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<Image source={{ uri: item.imageUrl }} style={styles.itemImage} />
<View style={styles.textContainer}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemDescription}>{item.description}</Text>
<Text style={styles.itemPrice}>{item.price}</Text>
</View>
</View>
)}
/>
);
};
const styles = StyleSheet.create({
itemContainer: {
flexDirection: 'row',
padding: 15,
marginBottom: 10,
backgroundColor: '#f0f0f0',
borderRadius: 5,
},
itemImage: {
width: 60,
height: 60,
borderRadius: 5,
marginRight: 15,
},
textContainer: {
flex: 1,
justifyContent: 'center',
},
itemName: {
fontSize: 18,
fontWeight: 'bold',
},
itemDescription: {
fontSize: 14,
color: '#555',
},
itemPrice: {
fontSize: 16,
color: 'green',
marginTop: 5,
},
});
export default App;
