React Native Custom Image Carousel using Reanimated 2 and ScrollView From Scratch

[@rakhawibowo]

Hello, you can watch part 2 on the following link kzbin.info/www/bejne/Z4mnfn1_bpijZqs, In part 2 i will show you how to create a Pagination and an Auto Play feature, Thanks

[@ph9757]

Ok Thanks

[@godeons]

Create a a different version of this tutorial fetching Image from either Firebase or supabase so that carousel image can be update in Realtime without editing the code and can be easily changed during festive period. Thanks

[@godeons]

Create a a different version of this tutorial fetching Image from either Firebase or supabase so that carousel image can be update in Realtime without editing the code and can be easily changed during festive period. Thanks

[@ph9757]

Very helpful. Thanks

[@nemila4904]

I love u man 🔥

[@DimasKurniawan]

mantabb kang

[@rakhawibowo]

Makasih kang sudah mampirr!!

[@rommyarb]

Thank you mas bro

[@rakhawibowo]

Thankyou juga mas bro sudah nonton videonyaa

[@oriolologaray6572]

Nice tutorial! I have a dynamic data array and I get a hooks error, how could I fix this?

[@rakhawibowo]

Hey thankyou!!, can you tell me about the details of the error you got ?

[@oriolologaray6572]

When I change the number of images displayed I get the error: "rendered more hooks than in the previous render"

[@rakhawibowo]

@@oriolologaray6572 oh yeah I also got that error, thanks for pointing it out, I'm working on a fix now

[@rakhawibowo]

@@oriolologaray6572 Hey, I've pushed the fix to this repo, please try it with the data you have, if there are other bugs, please tell me again, thank you github.com/Rakha112/react-native-animation/tree/main/src/03-React-Native-Custom-Image-Carousel

[@marcmallol1600]

Hi, would it work if instead of images, i want a component to be shown on the carrousel?

[@rakhawibowo]

Hey, yes, this can work well with your own components

[@akashp4863]

also try creating pagination dots for the same. i see weird behaviour in ios , it shows wrong pagination sometimes

[@rakhawibowo]

Hello, I've tried to create pagination with this carousel and it looks normal on both ios and android. i have pushed it to gihub, you can see it now and i will make a video about it soon. Thanks

[@akashp4863]

@@rakhawibowo it looked the same, but after reaching 3rd index and above it doesn't go well. I'll check the video that you'll make

[@haseebkambohh]

Please make tutorial on animated and Reanimated basic to advance . Thanks Love from Pakistan 🇵🇰

[@rakhawibowo]

Thank you for the very kind comments and thank you for watching this video, I will do the best I can to make tutorial videos

[@028-manikandan3]

Usestate you data will be spread.but i am using typescript so i got a error

[@rakhawibowo]

Does it happen in usestate newData ? if so, you can use the type like this. for data interface MyData { image: ImageSourcePropType; } and for newData you can extends from MyData like this interface NewData extends MyData { keys: strings; }

[@028-manikandan3]

@@rakhawibowo please put typescript in react native same slider but left and silder is opacity 0.5

[@movieexpert5737]

Hello, very good tutorial, can you complete with the navigation for change pages on your Custom Input please ?

[@rakhawibowo]

Hello, thanks for watching this video. to navigate to the next screen you can wrap the image in a Touchable component and use the onPress function to handle it

[@028-manikandan3]

What will i do please tell bro

[@monnuvibes]

I don't need the smallest size of cut off image, how to do that?

[@rakhawibowo]

Hey, sorry I don't understand your question. do you mean you don't want the image to be scaled down for the right and left images and the images have the same size ?

[@subramanian232]

Hi how to make autoplay carousel at 2 seconds interval

[@rakhawibowo]

Hello, thanks for watching this video, autoplay can be obtained by using the scrollTo function in the scrollView, I've added the autoplay feature you can see it on my github

[@SantiLucero098]

I think the animation doesn't work on iOS

[@rakhawibowo]

Hello, on my side the animation is working fine, are you using ios simulator or real device ?

[@SantiLucero098]

@@rakhawibowo hey, I could fix it, the problem was that the animated styles should come last on the array of styles

[@FauziJabbar]

How to make it automatic scroll?

[@rakhawibowo]

Halo bro terimakasih udah nonton video ini, untuk fitur auto scroll bisa dilihat di github saya bro

[@FauziJabbar]

@@rakhawibowo kirain orang luar bro hahha.. keren-keren, nanti saya mampir..

[@rakhawibowo]

@@FauziJabbar hahaha iya bro, mau bikin versi bahasa indonesia juga, cuma belum sempat