React Native Animated Carousel Tutorial | FlatList | Image Slider | Swiper

[@lunedamkingsway2276]

Your demos are great, but a link to repo with the finished code would be a great addition?

[@actualmortgage7122]

Great walkthrough, really appreciate it! There is one small bug though at 22:00, when using the useAnimatedStyle hook inside the map function, at least for me it gives the 'Rendered fewer hooks than expected' error. I'm implementing it into a larger application where one can remove images from the array so maybe that's why it shows up on my end but runs fine in this example. Good luck out there coding everybody!

[@bekirasmcelik2934]

Great work man! Thanks for that.

[@collinsk8754]

Great tutorial, as always! 👏👏

[@geiselsantos3291]

Thank you so much, good job

[@MuhammadAhmad-sb6ns]

left and right item only visible when and are being scrolled toward.!! they are not visible on idle state. any solution for this.?

[@NIKHILSHARMA-zt9us]

Very good tutorial...just a one question is there any way to slow down the speed of transition between slide...like animation speed of slide?

[@brunobordon6211]

Excelente tutorial amigo

[@zawadbinsharif]

Would you mind providing us with the project's source code via the GitHub link?

[@StudyMaterial-bh9tj]

In Android it is only shows one flat list item in the screen (not showing previous and after items) and in the ios simulator iPhone x it works fine but in iPhone 8 gap there is no gap between flat list items

[@duirron]

Solution for this:
(

)}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
onScroll={OnScrollHandler}
scrollEventThrottle={16}
viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
onEndReached={() => setData([...data, ...itemList])}
onEndReachedThreshold={0.5}
onScrollBeginDrag={() => {
setIsAutoPlay(false)
}}
onScrollEndDrag={() => {
setIsAutoPlay(true)
}}
removeClippedSubviews={false}
getItemLayout={(data, index) => ({
length: width,
offset: width * index,
index,
})}

/>

[@Patanahikahakahaseaajatehai]

Set "removeClipedSubviews" to false in your component like this
This will set the cards to render even they are off the screen. (CAUTION: Only do this if the slider has only a few items (cards))

[@aboubakrsenouci1073]

@@Patanahikahakahaseaajatehai thank you 👏

[@jayeshsawant3827]

Did the below solution work for you? I am still getting a single card

[@meshamanth]

@@Patanahikahakahaseaajatehai Worked for me. Thank you

[@SandeepSingh-ye5fh]

Very nice Pradip ji 🙏🏻

[@itzpradip]

Thanks 🙏

[@alexavilez2664]

Can you try this method with API data? Im my case i have errors with hooks calls

[@pastiille7467]

hello from France, do u have the repo of the projects pls

[@sampawria]

Can you please make a video on how to do authentication in expo router

[@itzpradip]

Thanks for the suggestion, I'll definitely create a tutorial on this topic soon.

[@sampawria]

Please also include jwts storing and renewing jwts when jwt expires

[@angerbadge773]

@@itzpradip yes Please do this " also include jwts storing and renewing jwts when jwt expires" how to load app based on the token

[@Saikumar-s5g]

did u find the solution for the pagination animation

[@Kazuki_007]

change this: scrollX.value, to this: scrollX.value % (items.length * screenWidth), under const dotWidth = interpolate( at pagination.tsx

[@MUSMAN-r]

please sir github code

[@duirron]

Niceeeeeeeeeeeeeeee, link for git this man?