[4.0.2] Changing Carousel width dynamically with useWindowDimensions has inconsistent behavior

[sambouchard-newforma]

Describe the bug
I have a carousel that need to take the whole width of the device. I use width from the hook useWindowDimensons as the carousel width. When changing the orientation(and naturally, changing the width) the Carousel width revert to the width of only one item instead of the width of the screen. Even going back to the original orientation, the width is not the same as it was in the beginning.

[import { Text } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import { useWindowDimensions, View } from 'react-native';
import { useCallback } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';


export default function App() {
    const {height, width} = useWindowDimensions();
    const data = new Array(30).fill(0).map((_, index)=> {
      return `${index}th item`
    })
    const renderImage = useCallback(
    (item: number) => {
      return (
        <View style={{backgroundColor: 'red', height: 300, width: 120}}>
          <Text>{item}</Text>
        </View>
      );
    },
    [],
  );
  


return (
  <GestureHandlerRootView>
    <View style={{flex: 1, height: height, width: width, justifyContent: 'center', alignItems: 'center' }}>
      <Carousel
      overscrollEnabled={false}
        width={width/5}
        loop={false}
        style={{
          width: width,
        }}
        height={300}
        data={data}
        scrollAnimationDuration={100}
        renderItem={({ item, index }) => renderImage(item, index)}
      />
      </View>
    </GestureHandlerRootView> 
)

}](height: height)

To Reproduce
Here is a snack with the bug : https://snack.expo.dev/@samuelbouchard/carousel-bug-4-0-2
Steps to reproduce the behavior:

1. Render the carousel
2. Change the phone Orientation
3. See the width not being correct

Expected behavior
The width should follow the value we give in the styles.width props of the carousel. If the width change, the carousel should change

Screenshots

Versions (please complete the following information):

• react: v18.3.1
• react-native: v0.75.7
• react-native-reanimated: v3.16.17
• react-native-reanimated-carousel: v4.0.2
• react-native-gesture-handler: v2.21.2

Smartphone (please complete the following information):
Happens on all evices

[dosubot]

Hey there, @sambouchard-newforma! 👋 I'm here to help you out with any bugs, questions, or contributions you might have. Let's squash those bugs together!

To address the issue where the carousel width does not update correctly when changing device orientation using useWindowDimensions in react-native-reanimated-carousel, you can try the following solutions:

1. Remove the height prop from the Carousel component and wrap it in a View with the desired height:

   <View style={[styles.carouselContainer, { height: itemHeight }]}>
     <Carousel
       width={PAGE_WIDTH}
       // ... other props
     />
   </View>

2. Set the style prop with overflow: "visible" on the Carousel component to ensure the inner content is always displayed regardless of the width.

3. Ensure you are using react-native-reanimated-carousel version 4.0.2 or higher, as this version includes a fix for dynamically updating the carousel width without breaking pagination functionality. If you are using an older version, update the package to benefit from this fix.

4. Utilize the useCommonVariables hook from react-native-reanimated-carousel to handle size changes effectively. This hook includes logic to recompute the carousel's offset when the size changes, ensuring that the carousel updates correctly with orientation changes. This is achieved through the useAnimatedReaction which recalculates the handler offset when the size changes ^[1][2][3].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[sambouchard-newforma]

@dosu I cant use the hook useCommonVariables since the library is not exporting it + the implemetention of the Carousel is already using this hook, I should not have to use it.

Wrapping in a view with the height prop in its style does nothing

Putting the overflow : 'visible' in the style show the correct width, but there is an overscroll, even with the props overscrollEnabled set to false

[dosubot]

The overscrollEnabled prop is intended to control the overscroll behavior of the carousel, but it seems like there might be an issue with it not working as expected when overflow: 'visible' is set. Unfortunately, I couldn't find specific documentation on how overscrollEnabled interacts with overflow: 'visible' in the react-native-reanimated-carousel library.

As a workaround, you might want to try manually managing the overscroll behavior by adjusting the carousel's boundaries or using additional logic to limit the scroll position. This could involve using the onScroll event to detect and correct any overscroll manually. If the issue persists, it might be worth checking if there are any updates or patches available for the library that address this specific behavior.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}