Using with react-native-reanimated-carousel

[FadiAboMsalam]

Greetings,

I am trying to use this library with react-native-reanimated-carousel the issue is when adding Zoom component it breaks the horizontal scroll of the carousel.

I have tried both createZoomListWithReanimatedComponent and createZoomListComponent to achieve the same result as shown in the Flatlist example but luck.

here is the code am trying

const IMAGES_DATA = [...new Array(50).keys()].map( (item, index) => "https://picsum.photos/id/${index + 1}/200/300", ); // had to change ` to "

const renderItem = React.useCallback( ({ item }) => { return ( <View> <Zoom > <Image source={{ uri: item, }} style={{ width: dimension.width, height: dimension.width, }} /> </Zoom> </View> ); }, [dimension], );

<Carousel width={APP_SCREEN_WIDTH} height={150} data={IMAGES_DATA} renderItem={renderItem} />

any help is highly appreciated

PS:- I can't use Flatlist component due to horizontal issue when paginating on RTL and this has been an issue since ages

[intergalacticspacehighway]

Hi @FadiAboMsalam i can look into, can you share a minimal repro with the carousel?

Flatlist component due to horizontal issue when paginating on RTL

Didn't know about it. Can you try FlashList?

[Navipro70]

@FadiAboMsalam
I think you can wrap your Carousel component (If element is full screen) with Zoom from this lib and add overflow: 'hidden' for container.

[Navipro70]

Or another option is to resolve react-native-gesture-handler conflicts form this library with others that use RNGH API, but it's requires some research

UPD: I also need workaround to archive that feature, react-native-reanimated-carousel is using RNGH v1 API and we should create function similar to createZoomListComponent but for Carousel or add function as second param which will select props for components besides FlatList/ScrollView, because props form Carousel and FlatList/ScrollView are different and we should manually select which gesture present based on scrollEnabled flag

[Navipro70]

I've added PR for support react-native-reanimated-carousel, but it will work only for screen without scrolling yet
#19

[intergalacticspacehighway]

Thanks for the PR @Navipro70 ❤️ I'll try it out soon. Will update.