React Native scrollToIndex - Dynamic size item scroll inside FlatList

🔥 In this video tutorial you will learn about React Native scrollToIndex and how to scroll to an item inside a FlatList, ListView, ScrollView, SectionList even if you don't know the item position, size or layout in general.

We'll go through:
- What React Native scrollToIndex is
- How to use scrollToIndex
- What is scrollToIndex viewPosition role
- How to scroll to an item inside a list
- How to animate the active item using moti

________________________________________________________________________________
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
______
▔▔▔

Want to support me?

----

You can find me on:

---

Timeline:
- 00:00 Intro
- 00:50 Awesome React Native animations
- 01:35 VSCode + code walkthrough
- 03:10 What is scrollToIndex and how to use it
- 03:44 Integrate scrollToIndex in FlatList
- 04:45 Implement navigation +/-
- 06:18 scrollToIndex when changing the index
- 07:00 showcase scrolling to an index
- 07:30 integrate viewPosition in scrollToIndex
- 07:50 showcase different viewPosition
- 08:35 modify viewPosition using Navigation
- 10:00 scrollToIndex viewOffset
- 11:34 change index when pressing on FlatList item
- 11:50 showcase change index
- 12:05 animate active item with React Native Moti
- 13:25 Recap React Native scrollToIndex
- 13:56 Final words

PS: This might be my last video from 2021. Thanks everyone!
-

#ReactNative #scrollToIndex #DynamicItemScroll #uberEats #uberEatsMenu #ReactNativeFlatList #ReactNativeScrollView #ScrollToItem

[alexkey]

Please never stop posting youtube videos! Honestly I improved my react native apps based on your animation techniques!

[kashyapkarkar]

Love to see you back on track doing your thing, after that sad emotional video ;)

Love from India 🧡🤍💚
Keep doing what you love.

[leehoemun]

I think it is nice to add that:
You do need to know the item size when your list is larger, or more specifically, when your list is larger than the rendered window (configurable in FlatList). You won't meet any problem if all you do is scrolling index one by one, because your next/previous item is always within the rendered window. Try to scroll from index 0 to index 250, and you should see a warning in dev mode.

[joelthierry]

My favourite react native tutorials channel, Thks a lot

[egyjohn]

Thank you Mr Catalin Miron, I am a newbie in React Native, I have high hopes to become a programmer like you. I have even recommended this channel to my other friends. You really inspire us, very easy to understand explanations, Live coding, and very rare content for other people to create. now you and this channel are like a teacher to me. thank you very much sir. good luck

greetings from Indonesia

[hiimaustin]

It’s been 9 months already but I’m still waiting for you. I learn a lot from you🙏🏻❤️ thank you so much

[nikilarigela]

i never understood offset till now, but you made it so simple, now i know what is offset, thanks miron

[ELHAUKEZ]

you had many helpful infos in here! I made a FlatList scroll for dates with buttons to the sides. Even though I centered my items and had them on full width they were not centered, but your information on the viewPosition (7:50) helped me here ✔💖 I set it to 0.5 and it helped!

[user_ahfvppkjb]

Your way of explanation is simple and fun, thanks for your time.

[atheerapeter]

an addition to this I worked on before and would be cool is that you specify a "select" area like start, center, or end and when you scroll and the item comes I that area it snaps and gets selected so you can select by tapping or scrolling the item to snap and get selected

[sanaullahamir]

You really know how to put a smile on someone’s face and knowledge in someone’s head. Thank you very much for your efforts!

[kia]

Your videos are amazing, please continue creating awesome videos and tutorials!!!

[absolute-commander]

Thank u very much....ur videos always teach me new things

[eddiewilliams]

How does this guy have just 21.8k subs?? This channel honestly needs more attention

[zakaandreactnative]

Чувак, не остановиливайся! Продолжай у тебя очень классный контент. I love you

[facundofernandez]

Thank you Catalin Miron for sharing knowledge and taking the time to make the videos.
I'm also subscribed to patreon and I learn a lot from your examples.
Greetings from Argentina!

[FunwithIndra]

Thanks a ton!!!! your tutorial really helped me.. Please keep posting videos .. its a great learning for us.. Thank you for sharing your learning

[benabernethy]

Love your vids as always, and I'm really happy that you've got Francis Ford Coppola directing the vid edits!

[luisbrazilva]

EXCELLENT!!! I like your style man. Definitely subscribed. By the way, can you amend this with a swipe event? Most people nowadays don't use navigational arrows. They just swipe. And also maybe making the Flatlist inifinite scroll? So that even the first item in the list is always in the center?

[kugathajkangeswaran]

Sir, your videos are awesome. Please upload more videos every month. Please