React Native Animated Tabs & Animated Indicator using FlatList
Catalin Miron
View ChannelAbout
The creator of AnimateReactNative.com, a collection of Premium and custom React Native animations, that's going to save your time, make your app shine and increase User Experience (UX). Previously I was Senior Engineer working at ElevenLabs, Microsoft, Skype and Hootsuite I'm building React Native tutorials, React Native animations using React Native Animated API, FlatList, React Native Animatable and React Native Reanimated. --- If you'd like to have access to all my video source code, you need to become a Patreon. I'm posting a new source code every week. 👉 Access Premium and Custom React Native animations https://www.AnimateReactNative.com --- I have also created a Discord server where we can chat or help you with any issues that you might have. 👉Join my Discord server: https://discord.gg/vg7hUDU
Latest Posts
Video Description
🔥 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=20582060 ---- Starter code: https://gist.github.com/catalinmiron/31fec63eecf0af2e45a01cca15205cae 👉👉 Have any questions? Join Discord: https://discord.gg/vg7hUDU. Want to support me? - Patreon: https://patreon.com/catalinmiron - BuyMeACoffee: https://www.buymeacoffee.com/catalinmiron - Paypal: https://paypal.me/catalinmiron ---- You can find me on: - Github: http://github.com/catalinmiron - Twitter: http://twitter.com/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
You May Also Like
Essential Camera Gear
AI-recommended products based on this video
COOWPS Switch Case for Nintendo Switch and Switch OLED Model, Portable Full Protection Carrying Travel Bag with 18 Game Cards Storage for Switch Console Pro Controller Accessories Black
UGREEN Revodok Pro 210 Docking Station 10 in 1 USB C Dock Dual HDMI 4K@60Hz Single 8K@30Hz 100W PD 5Gbps USB C and USB A Data Ports Gigabit Ethernet, SD/TF Card Reader USB Hub Compatible for HP, Dell
ANKER 737 Power Bank, 24,000mAh 3-Port Laptop Portable Charger with 140W Fast Charging, Smart Display, for Outdoor Work, Compatible with iPhone 16/15/14 Series, Vision Pro, Samsung, MacBook, and More
Anker iPhone 16 Charger, 2-Pack 20W Fast USB C Charger Block, for iPhone 16/16 Pro Max/15 Series/iPad Pro and More (White, 2 Pack & 2 Cable)
Anker Power Bank(PowerCore 10K),Compact Travel-Ready 10,000mAh Battery Pack with PowerIQ Charging Technology,5V/3A High-Speed Charging for iPhone,iPad,and More (USB-C Input and Output（Black），1pack) ClimatePartner certified
