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

[@bekirasmcelik2934]

Great work man! Thanks for that.

[@lunedamkingsway2276]

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

[@collinsk8754]

Great tutorial, as always! 👏👏

[@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!

[@brunobordon6211]

Excelente tutorial amigo

[@SandeepSingh-ye5fh]

Very nice Pradip ji 🙏🏻

[@itzpradip]

Thanks 🙏

[@zawadbinsharif]

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

[@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

[@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

[@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?