Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.

Devon Govett

41,155 subscribers

22,905 views • 9 months ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

What's cool about using native platform components is that they integrate seamlessly with other UI elements✨ React Native Bottom Tabs handles Picture-in-picture avoiding automatically 😄 Here is a comparison of JS vs Native Tabs:

What's cool about using native platform components is that they integrate seamlessly with other UI elements✨ React Native Bottom Tabs handles Picture-in-picture avoiding automatically 😄 Here is a comparison of JS vs Native Tabs:

Oskar

19,395 views • 1 year ago

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

Devon Govett

41,687 views • 8 months ago

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 views • 8 months ago

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.

Oliver Lopez

18,097 views • 1 year ago

Synchronous TextField coming soon in Expo UI! This would enable JS controlled synchronous flicker free TextInputs with React native.

Synchronous TextField coming soon in Expo UI! This would enable JS controlled synchronous flicker free TextInputs with React native.

nishan (o^▽^o)

45,310 views • 4 months ago

Flow Effect, now in Framer. Automatically animate sections along with any interaction or component with transitions you control. No more nested components needed.

Flow Effect, now in Framer. Automatically animate sections along with any interaction or component with transitions you control. No more nested components needed.

benjamin

28,878 views • 6 months ago

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view

Solarin

32,485 views • 1 year ago

Introducing (React) Native Bottom Tabs! 🎉 First Bottom Tab Navigator using Native Platform primitives for both Android and iOS. The API surface is almost a drop-in replacement for JS Bottom Tabs! ➡ `npm i react-native-bottom-tabs`

Introducing (React) Native Bottom Tabs! 🎉 First Bottom Tab Navigator using Native Platform primitives for both Android and iOS. The API surface is almost a drop-in replacement for JS Bottom Tabs! ➡ `npm i react-native-bottom-tabs`

Oskar

82,831 views • 1 year ago

🛑I'm Live coding - React Native - Animations Trying to recreate this animation? and chat about React Native YouTube: Twitch:

🛑I'm Live coding - React Native - Animations Trying to recreate this animation? and chat about React Native YouTube: Twitch:

Catalin Miron - AnimateReactNative.com

14,721 views • 1 year ago

hear me out you don’t need js to create a marquee animation just a couple of lines of css and duplicated children with `aria-hidden`

hear me out you don’t need js to create a marquee animation just a couple of lines of css and duplicated children with `aria-hidden`

dmytro

159,814 views • 1 year ago

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Solarin

20,995 views • 1 year ago

Say hi to the Kibo UI QR Code shadcn component! 🔠 Pass in any string 💪 Adjustable level of robustness 🎨 Customizable styling 🧠 Works with the new OKLCH CSS variables 💻 React Server Component available ↔️ Infinitely scalable SVG Link 👇🧵

Say hi to the Kibo UI QR Code shadcn component! 🔠 Pass in any string 💪 Adjustable level of robustness 🎨 Customizable styling 🧠 Works with the new OKLCH CSS variables 💻 React Server Component available ↔️ Infinitely scalable SVG Link 👇🧵

Hayden Bleasel

21,110 views • 1 year ago

This is a HeroUI native toast component I was working on during the past week. I might be mistaken, but I don't recall a React Native toast library that manages a stack with dynamic height. More interesting details are in the comments 👇

This is a HeroUI native toast component I was working on during the past week. I might be mistaken, but I don't recall a React Native toast library that manages a stack with dynamic height. More interesting details are in the comments 👇

Volodymyr

27,943 views • 6 months ago

onboarding checklist component UI showcase animation. JS, built with Claude Code

onboarding checklist component UI showcase animation. JS, built with Claude Code

Juliette

16,628 views • 4 months ago

This is built using Gradio 6's super easy new HTML component! You can play with the demo here:

This is built using Gradio 6's super easy new HTML component! You can play with the demo here:

Gradio

15,512 views • 5 months ago

Added a glow feature to my shadcn cards with tailwind v4, no component duplication, just blendmode and css shananigans ✨

Added a glow feature to my shadcn cards with tailwind v4, no component duplication, just blendmode and css shananigans ✨

Dev Ed

60,593 views • 1 year ago

React Aria has built-in support for drag and drop. This kanban board is only ~100 lines, and even supports keyboard accessibility with no additional code needed! 🙂

React Aria has built-in support for drag and drop. This kanban board is only ~100 lines, and even supports keyboard accessibility with no additional code needed! 🙂

Devon Govett

54,731 views • 5 months ago

Oops, we did it again! Turn your logo into an Apple-like animation, play with controls, export as a React component or video file Try Paper, no invite needed🤫 live: all paper shaders: #AppleLaunch

Ksenia Kondrashova

45,930 views • 9 months ago

Hey React Native devs 👋 I recently built a very cool app with React Native Expo—it’s amazing how powerful and easy it is! 🚀 Everything you can do with React Native CLI, you can do with Expo too. If you haven’t tried it yet, now’s the time! #buildinpublic Expo React Native

Hey React Native devs 👋 I recently built a very cool app with React Native Expo—it’s amazing how powerful and easy it is! 🚀 Everything you can do with React Native CLI, you can do with Expo too. If you haven’t tried it yet, now’s the time! #buildinpublic Expo React Native

Syed Noman

13,150 views • 1 year ago

I think I found a way to make a React Native list component with significantly better performance than FlashList, with 100% javascript. I'm still testing it but as far as I can tell there’s no pitfalls or issues… It just requires the new architecture for synchronous onLayout.

I think I found a way to make a React Native list component with significantly better performance than FlashList, with 100% javascript. I'm still testing it but as far as I can tell there’s no pitfalls or issues… It just requires the new architecture for synchronous onLayout.

Jay Meistrich

95,344 views • 1 year ago