React Native scrollToIndex - Dynamic size item scroll inside FlatList

Published: 15 December 2021
on channel: Catalin Miron

79,425

1.8k

🔥 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

________________________________________________________________________________
⚠️ Access full source code: https://www.animatereactnative.com/po...
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
______
React Native ScrollToIndex starter code: https://gist.github.com/catalinmiron/...
▔▔▔

👉👉 Have any questions? Join Discord:   / discord  .

Want to support me?

Patreon:   / catalinmiron
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
Paypal: https://paypal.me/catalinmiron
----

You can find me on:

Github: http://github.com/catalinmiron
Twitter:   / mironcatalin
Website: http://batman.codes

---

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

On this page of the site you can watch the video online React Native scrollToIndex - Dynamic size item scroll inside FlatList with a duration of hours minute second in good quality, which was uploaded by the user Catalin Miron 15 December 2021, share the link with friends and acquaintances, this video has already been watched 79,425 times on youtube and it was liked by 1.8 thousand viewers. Enjoy your viewing!

164