I would like to dynamically make an image appear on a "ImageBackground".
I have a JSON data file which it contains all the paths of the images.
I use a flatlist to use all the data from the data file and I use a custom component to format my visualization (integrated as item on the flatist).
My problem is that my images do not appears when I use the data from the JSON file, but when I use a static path, it's all ok.
What am I doing wrong? When I console.log my item.poster_path are correctly posted. It's probably something I don't do correctly on the
source={{uri: item.poster_path}}
but I haven't found it by myself
// Helpers/filmsData.js
export default data = [
{
id: 1,
{...}
poster_path: "../Images/photo1.jpg",
},
{
id: 181809,
{...}
poster_path: "../Images/photo2.jpg",
{...}
}
]
// custom component Item import React from 'react'; import { StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity } from 'react-native';
class test extends React.Component {
render() {
return (
<TouchableOpacity
style={styles.item_content}
onPress={() => {(...)}}>
<ImageBackground
// source={require('../Images/photo1.jpg')} => Working OK
source={{uri: item.poster_path }} => Not Working
style={styles.ImageBackground}>
<View
{...}
</View>
</ImageBackground>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
event_content: {
height: 120,
margin: 1
},
ImageBackground: {
width: '100%',
height: '100%'
}
})
export default test