react-native-snap-carousel icon indicating copy to clipboard operation
react-native-snap-carousel copied to clipboard

ParallaxImage does not load image

Open fdelavra opened this issue 11 months ago • 1 comments

Hello.

After updating react native and libraries to last version, the carousel doesn't show any image

My code:

`const renderItem = ({item, index}, parallaxProps) => {

    const even = false;

    return (
        <TouchableOpacity
            activeOpacity={0.5}
            style={sliderStyles.slideInnerContainer}
            onPress={() => {
                snapTo(index);
                console.log(item)
                dispatch(getCategory(item.id));
            }}
        >
            <View style={sliderStyles.shadow} />
            <View style={[sliderStyles.imageContainer, even ? sliderStyles.imageContainerEven : {}]}>
                <ParallaxImage
                    source={{uri: 'https://i.goopics.net/whg4hg.jpg'}}
                    containerStyle={[sliderStyles.imageContainer, even ? sliderStyles.imageContainerEven : {}]}
                    style={sliderStyles.image}
                    parallaxFactor={0.35}
                    showSpinner={true}
                    spinnerColor={even ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.25)'}
                    onLoad={onLoadEnd}
                    {...parallaxProps}
                />
                <View style={[sliderStyles.radiusMask, even ? sliderStyles.radiusMaskEven : {}]} />
            </View>
            <View style={[sliderStyles.textContainer, even ? sliderStyles.textContainerEven : {}]}>
                <Text style={{fontSize: wp('1.4%'), fontStyle: "italic"}}>{item.name}</Text>
            </View>
        </TouchableOpacity>
    );
}

return (
    <RNCarousel
        ref={carouselRef}
        data={_.orderBy(categoryCarousel, 'name', 'asc')}
        renderItem={renderItem}
        sliderWidth={sliderWidth}
        itemWidth={itemWidth}
        inactiveSlideScale={0.7}
        inactiveSlideOpacity={0.7}
        containerCustomStyle={styles.slider}
        contentContainerCustomStyle={styles.sliderContentContainer}
        loop={true}
        loopClonesPerSide={8}
        autoplay={true}
        autoplayDelay={3000}
        autoplayInterval={3000}
        lockScrollWhileSnapping = {true}
        hasParallaxImages={true}
    />
);`

the render:

Image

fdelavra avatar Mar 06 '25 16:03 fdelavra

For information, I have tested to change ParallaxImage by react native Image and everything works great

fdelavra avatar Mar 06 '25 16:03 fdelavra