How to require image in react-native-CodePudding

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}
        />
    );
}

CodePudding user response：

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.

CodePudding user response：

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"),
  },
];

CodePudding user response：

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>
              
                
              )}
            />