React Native Animated Tabs & Animated Indicator using FlatList
70.5 هزار بار بازدید -
4 سال پیش
-
🔥 Create a React Native
🔥 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: discord.
Want to support me?
- Patreon: Patreon: catalinmiron
- BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
- Paypal: https://paypal.me/catalinmiron
----
You can find me on:
- Github: http://github.com/catalinmiron
- Twitter: 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
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: discord.
Want to support me?
- Patreon: Patreon: catalinmiron
- BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
- Paypal: https://paypal.me/catalinmiron
----
You can find me on:
- Github: http://github.com/catalinmiron
- Twitter: 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
4 سال پیش
در تاریخ 1399/08/13 منتشر شده
است.
70,539
بـار بازدید شده