Displaying the list of pictures from downloaded url - react-native

Question

How I can display a list of pictures? I get the list URL ( local address) from DB.
[
{"employeId": 1, "name": "Mariusz", "url": "../assets/servicesIcons/baleyage.png"},
{"employeId": 2, "name": "Mariola", "url": "../assets/servicesIcons/baleyage.png"},
{"employeId": 3, "name": "Rafal", "url": "../assets/servicesIcons/baleyage.png"}
]
const HoursComponent = ({id, time}) => {
const TimewithoutLast3 = time.slice(0, -3);
return (
<View style={{...styles.rootContainer, backgroundColor: bgColor}}>
<TouchableOpacity >
<Text style={styles.buttonText} onPress={onPress}>{TimewithoutLast3}</Text>
</TouchableOpacity>
</View>
);
}
<FlatList
numColumns={3}
data={employee}
keyExtractor={item => item.id}
renderItem={({ item }) => (<EmployeeComponet {...item} />)}></FlatList>
I try using require but it doesn't work

Answer 1

I try add somthing like this but is not working
example url value '../../assets/servicesIcons/test.png'
<Image source={{require:("\'" + url + "\'")}} />
but when I added static value then is ok.
const value = require('../../assets/servicesIcons/test.png');
...
<Image source={value} />

Answer 2

Import Image from react native and use Image tag like
const HoursComponent = ({employeId, name, url}) => {
const TimewithoutLast3 = time.slice(0, -3);
return (
<View style={{...styles.rootContainer, backgroundColor: bgColor}}>
<TouchableOpacity >
<Text style={styles.buttonText} onPress={onPress}>{name}</Text>
<Image source={{uri :url}} />
</TouchableOpacity>
</View>
);
}
<FlatList
numColumns={3}
data={employee}
keyExtractor={item => item.employeId}
renderItem={({ item }) => (<EmployeeComponet {...item} />)}></FlatList>