intergalacticspacehighway / react-native-reanimated-zoom

Component for zooming react native views. 🔎
MIT License
313 stars 19 forks source link

Using with react-native-reanimated-carousel #18

Open FadiAboMsalam opened 1 year ago

FadiAboMsalam commented 1 year ago

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 (

  );
},
[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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

I've added PR for support react-native-reanimated-carousel, but it will work only for screen without scrolling yet https://github.com/intergalacticspacehighway/react-native-reanimated-zoom/pull/19

intergalacticspacehighway commented 1 year ago

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