React Native scrollToIndex - Dynamic size item scroll inside FlatList

Veröffentlicht am: 15 Dezember 2021
auf dem Kanal: 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

Auf dieser Seite können Sie das Online-Video React Native scrollToIndex - Dynamic size item scroll inside FlatList mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Catalin Miron 15 Dezember 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 79,425 Mal angesehen und es wurde von 1.8 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

130