React Native Custom Animated tabs - Reanimated
16,504 views 8 months ago
🔥 In this video tutorial we will create a custom animated tab component built with React Native Reanimated, React Native Moti! It’s super customizable and comes packed with cool features. You'll be learning how to: - animated the tab items using React Native Reanimated layout animations, `entering` & `exiting` animations, - use React Native Moti to animate the Lucide Icons - React Native Reanimated LayoutAnimationConfig to skip the entering animation. - Use `motifySvg` to be able to animate the SVG icon colors, as well as `entering` and `exiting` from React Native Reanimated to control the animation for the tab labels. As a small UI/UX touch, we'll be using `LayoutAnimationConfig` from React Native Reanimated to `skipEntering` the tab label, in this way, on initial render, the label will not be animated. It’s the perfect addition for adding smooth, animated counters to your React Native app! ---- 👉👉 Access 120+ React Native Animations, the biggest react native animation collection in the world: https://www.AnimateReactNative.com ---- 👉👉 Have any questions? Join Discord: https://discord.gg/vg7hUDU. You can find me on: - Twitter: http://twitter.com/mironcatalin - Website: https://www.AnimateReactNative.com --- #react-native-reanimated #react-native-animation #react-native-tabs #react-native-animated-tabs #react-native-layout-animation #reanimated-stagger #react-native-moti #reanimated-sequence #reanimated #layout-animation-config
UI Animations and micro-interactions made in React Native. Most of the tutorials have a GitHub repository attached and you can also get the source code.

Shorts