Bug of React Native FlatList - react-native

Question

I have a problem with React Native FlatList,
export default class PoolList extends Component {
constructor(props) {
super(props)
this.state = {
data: [
{key: 1, img: './resources/image1.png', txt: 'Text 1'},
{key: 2, img: './resources/image2.png', txt: 'Text 2'},
{key: 3, img: './resources/image3.png', txt: 'Text 3'}
]
}
}
render() {
return (
<View style={styles.view}>
<FlatList
data={this.state.data}
renderItem={({item}) =>
<View style={styles.flatListItem}>
<Image source={require(item.img)} />
<Text>{item.txt}</Text>
</View>
}
/>
</View>
);
}
}
I got a bug when run it
require() must have a single string literal argument
But when I change <Image source={require(item.img)} /> to <Image source={require('./resources/image1.png')} />, It works. Can someone explain to me why. I need to make a FlatList with Image dynamic, Thanks

Answer 1

It took me quite a while to figure out a workaround to this problem. Don't worry, require() must have a single string literal argument is a really common problem in the JavaScript community because require has a lot of issues with variables being passed in as the string argument.
This is the best workaround I could come up with.
So instead of using a flatlist, I decided to use a map. First off, you need to create constants for each of the images you want to dynamically import from a local directory. Then you need to create an array of objects so each object will be one of your image constants. Now, iterate through each entry using the map and generate your <Image> components. Finally, render the variable with all the components you just created.
To view the full code for the solution I wrote, visit the ExpoSnack I created.
https://snack.expo.io/HyNO-pLQG
SnackExpo also has an in-browser device simulator included.
To run this app on your physical device, you can download the Expo app and then scan the QR code provided by the ExpoSnack.
import React, {Component} from 'react';
import {View, Image, StyleSheet} from 'react-native';
const image1 = require('./resources/image1.png');
const image2 = require('./resources/image2.png');
const image3 = require('./resources/image3.png');
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 200,
height: 200,
},
});
var dataArray = [
{data: image1},
{data: image2},
{data: image3},
];
var theReturnData = dataArray.map((item) => (
<View key={item}>
<Image
style={styles.image}
source={item.data}
/>
</View>
));
export default class App extends Component {
render() {
return (
<View style={styles.container}>
{theReturnData}
</View>
);
}
}