React Native Animated Tabs & Animated Indicator using FlatList
🔥 Create a React Native Animated Tabs indicator / Dynamic Tabs indicator that will dynamically change its width and position based on React Native FlatList scrollX.
In this video tutorial we'll learn how to create:
learn how to create an animated tabs using React Native FlatList
learn how to animate a tabs indicator
learn how to create an animated tabs indicator using Animated API
learn how to measureLayout and use React Native findNodeHandle
Built using @expo, vanilla React Native Animated API and FlatList.
This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList in order to create a React Native Animated Tabs and Animated tabs indicator that will scale and position according to the active slide from the FlatList.
----
⚠️ Access full source code: https://www.patreon.com/bePatron?u=20...
----
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 Introduction + What we’re going to build
00:56 Boilerplate + starter code link
02:19 Create the Animated FlatList
05:15 Create Animated.Value ref for FlatList
06:20 Create Tabs component
07:10 Create Tab component
09:30 Create Tabs Indicator component
10:30 Get the Tabs measurements using measureLayout and findNodeHandle
12:40 How React Native ref measureLayout works
16:50 Animated Indicator width and x based on FlatList scrollX position
20:10 Last part, press on tab to modify FlatList scrollOffset
23:14 Final words and thanks
#react-native-tabs #react-native-flatlist #react-native-tabs-animation #react-native-dynamic-underline-animation #react-native-animated-tabs-indicator
Watch video React Native Animated Tabs & Animated Indicator using FlatList online without registration, duration hours minute second in high quality. This video was added by user Catalin Miron 03 November 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 72,892 once and liked it 2.2 thousand people.