Help with missing props when migrating from react-native-snap-carousel to this library

[danidaryaweesh]

I have tried to implement the new library you are suggesting, but I am unable to get it working with my current code due to some missing UI features. I am not finding the following props in the this library in Parallax mode:

        itemWidth
        sliderWidth
        itemHeight
        sliderHeight
        activeSlideAlignment
        inactiveSlideScale
        inactiveSlideOpacity
        containerCustomStyle
        contentContainerCustomStyle

Any help or guidance will be very appreciated. Thanks!

[danidaryaweesh]

@dohooo I apologize if tagging you in this message is inappropriate. I was unable to add you to the ticket, and I would appreciate any advice or recommendations you may have for my issue above.

Thank you for your continued support of this library.

[sntg-p]

With mode='parallax', the size of your items is the size of the component returned by your renderItem function (mine is called CarouselSlide) affected by the modeConfig object properties. I recommend setting your CarouselSlide to the full width and using an aspect ratio, then playing around with parallaxScrollingScale, parallaxScrollingOffset and parallaxAdjacentItemScale properties.

As you no longer have the inactive state props, you can use the animationValue that the Carousel component passes to your render item function.

const renderItem: CarouselRenderItem<CarouselItem> = ({ item, animationValue }) => (
  <CarouselSlide animationValue={animationValue} />
);

And your CarouselSlide component can use that animationValue to compute an animated style. Here I use it to animate the opacity of the slides:

const CarouselSlide = (props) => {
  const { animationValue } = props;

  const animatedStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      animationValue.value,
      [-1, 0, 1],
      [.4, 1, .4],
    );

    return { opacity };
  }, [animationValue]);

  return (
    <Animated.View style={animatedStyle}>
      <HighlightButton style={styles.container} />
    </Animated.View>
  );
};

Also, I don't think you should be bothering the developer if you are not reading the documentation.