wrap component with createAnimatedComponent

[francescovenica]

Hello

I'm trying to dynamically change the width & height of the component, in order to do so I'm wrapping the carousel in the Animated.createAnimatedComponent

const AnimatedGallery =
  Animated.createAnimatedComponent<TCarouselProps>(Carousel);

the issue with this is that once I wrap it I get this error:

Argument appears to not be a ReactComponent. Keys: next,prev,getCurrentIndex,scrollTo

Expected behavior
No error thrown

Versions (please complete the following information):
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native-reanimated": "~3.3.0",
"react-native-reanimated-carousel": "3.5.1",
"react-native": "0.72.6",
"react-native-gesture-handler": "~2.12.0",

[dosubot]

🤖

Hey there @francescovenica! 😄 Long time no see in the issue tracker! How have you been?

The error you're encountering is due to the fact that the Carousel component in the react-native-reanimated-carousel library is already a complex component that internally uses the react-native-reanimated library. Wrapping it with Animated.createAnimatedComponent is not necessary and can lead to unexpected behavior or errors.

The Animated.createAnimatedComponent function is typically used to create a component that has animated values and can respond to gestures. However, the Carousel component already has these capabilities. It uses the useDerivedValue hook from react-native-reanimated to create an animated value for the carousel's offset, and it uses the ScrollViewGesture component to respond to gestures.

If you need to animate the Carousel component or respond to its gestures in a specific way, you should do so within the Carousel component itself or by using the Carousel's props and methods. For example, you can use the onScrollEnd and onScrollStart props to respond to the carousel's scroll events, and you can use the scrollTo method to programmatically scroll the carousel.

You can refer to the Carousel component source code for more details.

If you need further assistance or if there's something specific you're trying to achieve with the Carousel component, please provide more details so I can assist you better.

Sources

• src/components/Carousel.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[francescovenica]

would I be able to animate the height & width of the carousel using a sharedValue?