I need to show images as carousel and I can't require them properly. I tried to require them in json like this {"Image": require("$PATH")} or in js file in ParalaxImage tag but nothing....
item creator
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={item.landscapeImage}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
</View>
);
}
JSON file
[
{
"name": "snydercut",
"image": "../../assets/moviePictures/snydercut.jpeg",
"landscapeImage": "../../assets/moviePictures/snydercutLandscape.jpeg"
},
{
"name": "batman",
"image": "../../assets/moviePictures/batman.jpeg",
"landscapeImage": "../../assets/moviePictures/batmanLandscape.jpeg"
},
{
"name": "avatar",
"image": "../../assets/moviePictures/avatar.jpeg",
"landscapeImage": "../../assets/moviePictures/avatarLandscape.jpeg"
}
]
and here is my carousel code
render () {
return (
<Carousel
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={moviePicturesInfo}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
);
}
I haven't used this with the ParallaxImage component before but in my case for an Image component I just added the uri, for cases such as yours, where the path is coming as variable from an external resource, use the uri. So, that would be something like this:
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{uri: item.landscapeImage}}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
</View>
);
}
I am sorry if I made a mistake or you weren't able to understand something this is my first answer on stackoverflow. Feel free to ask something if I wasn't able to make it clear.
React Native doesn't support requiring images dynamically at run-time.
Refactor your code as below:
[
{
name: "snydercut",
image: require("../../assets/moviePictures/snydercut.jpeg"),
landscapeImage: require("../../assets/moviePictures/snydercutLandscape.jpeg"),
},
{
name: "batman",
image: require("../../assets/moviePictures/batman.jpeg"),
landscapeImage: require("../../assets/moviePictures/batmanLandscape.jpeg"),
},
{
name: "avatar",
image: require("../../assets/moviePictures/avatar.jpeg"),
landscapeImage: require("../../assets/moviePictures/avatarLandscape.jpeg"),
},
];
for images in carousel use flatlist by adding horizontal={true} in your flatlist such like
<FlatList
horizontal={true}
data={crldata}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<TouchableOpacity
style={{backgroundColor:"white",margin:12,borderRadius:15}}
onPress={() => {
navigation.navigate('detail', {
pid: item.id,
purl: url,
name: item.pname,
price: item.price,
des: item.des,
dc: item.dc,
img: item.img,
});
}}>
<Image
source={{uri:item.img}}
style={{ width: '100%',height:250,padding:120}}>
</Image>
<Text style={{color:"black",marginLeft:12}}>{item.pname}</Text>
<Text style={{color:"black",marginLeft:12}}>Price= Rs {item.price}</Text>
</TouchableOpacity>
)}
/>