No need to specify height prop

[7dp]

Is your feature request related to a problem? Please describe.
I'm always frustrated when this lib requires the height prop.
The problem is i can't determine the height of my items. Slightly dynamic, maybe 2 px or 5 px difference between items.

Describe the solution you'd like
Just like snap-carousel, no need to specify height prop. The lib will handle it automagically.

Describe alternatives you've considered
For now i just rollback to my previous implementation using snap-carousel.

Additional context
I hope this very nice lib can handle that in the near future.
Thank you so much 🐐. 🙏🔥

[dosubot]

Hey @7dp! 👋 I'm here to help you with any bugs, questions, or contributions you have for the library. Let's squash those bugs together!

The react-native-reanimated-carousel currently requires the height prop, especially for vertical carousels, to avoid errors. If the height prop is omitted in vertical mode, an error will be thrown ^[1].

However, you can achieve dynamic height adjustments by using custom animations. Implement a callback function of type TAnimationStyle and pass it to the customAnimation property of the Carousel. This allows you to manipulate the height of items dynamically based on their position ^[2].

Here's an example:

const animationStyle: TAnimationStyle = React.useCallback((value: number) => {
    'worklet';

    const height = interpolate(value, [-1, 0, 1], [100, 200, 100]); // Adjust heights dynamically

    return {
        height,
    };
}, []);

<Carousel
    style={{ width: screen.width, height: 240 }}
    width={screen.width}
    data={[...new Array(6).keys()]}
    customAnimation={animationStyle}
    renderItem={({ index, animationValue }) => {
        return (
            <CustomItem
                key={index}
                index={index}
                animationValue={animationValue}
            />
        );
    }}
/>;

const CustomItem = ({ index, animationValue }) => {
    const maskStyle = useAnimatedStyle(() => {
        const backgroundColor = interpolateColor(
            animationValue.value,
            [-1, 0, 1],
            ['#000000dd', 'transparent', '#000000dd']
        );

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

    return (
        <View style={{ flex: 1 }}>
            <SBItem key={index} index={index} style={{ borderRadius: 0 }} />
            <Animated.View
                pointerEvents="none"
                style={[
                    {
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                    },
                    maskStyle,
                ]}
            />
        </View>
    );
};

This approach allows for dynamic height adjustments without explicitly setting the height prop for each item.

To continue talking to Dosu, mention @dosu.

[7dp]

My use case is horizontal carousel.
Thus, i'm not able to tell explicitly which item that has more/less height than the others.
What i want is just like the snap-carousel did.

[jony89]

If I set fixed height, and users has different font size and different display size, the content can get overflow the height of the carousel.

This is forcing me to add ScrollView in each render item, or unneeded extra height, eventually I get two scrolls one for the rendered item and one of the page it self which obviously is not the expected result.