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
Смотрите видео React Native Animated Tabs & Animated Indicator using FlatList онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Catalin Miron 03 Ноябрь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 72,892 раз и оно понравилось 2.2 тысяч людям.