r/reactnative • u/PlayfulQuit6159 • Dec 09 '25
Question Before I Commit Months… Can React Native Actually Do Animations Like This?
I have an idea for an app, and in this video I’m seeing some animations and UI elements I really want to recreate (or build my own version of). I’m brand new to programming, so I’ve been researching roadmaps to figure out the right path — but I don’t want to waste months going in the wrong direction.
My question is: With React Native, can I build animations like these? • The blue, glowy, pixelated radius at the bottom • Micro-animations like shimmer effects • The 3 flashing indicator lights • The overall smoothness and timing of the motion
I’m not trying to steal this person’s idea — I just like the animation style. But I also don’t want my version to look like a watered-down knockoff. I want to understand what’s possible so I can build something polished and original.
I really believe the only way we improve as front-end developers is by sharing ideas so those ideas can evolve, so that’s why I’m asking.
If anyone has: • Tips on how to approach this • A roadmap for beginners who want to build animation-heavy apps • Recommended libraries (Reanimated? M? Lottie? Something else?)
5
u/p_syche Dec 09 '25
There's a developer, William Candillon, who focuses on showing how much can be done in react native, with special focus on UI and animations: https://youtube.com/playlist?list=PLkOyNuxGl9jxB_ARphTDoOWf5AE1J-x1r&si=jE7k-xxSXgQ52Ikq
1
2
u/tomater-id Dec 09 '25
Based on the video, you will need combination of things. Reanimated for moving texts, easy stuff. This glaring effect I think I would do by overlaying transparent component on top of text that dims everything except this glare. Need to play around and chose best technique, probably semi-transparent PNG would work best. Its movement you can again animate with Reanimated. Overall, nothing impossible or even too complicated here. Just lots of carefull work, as always is with any nice animations.
-5
u/PlayfulQuit6159 Dec 09 '25
Thanks for the response. I’ll try this approach.
3
u/lovecooledits Dec 09 '25
I will say that, if you want no lags go native way. This kinda animation will require using skia. Which is not beginner friendly at all. Complex computation, shaders logic. And even if you use it and create the flow like this it doesn't guarantee that it will be lag-free. So go on and waste week trying to optimize it and all you get is that rn is not the best for that.
2
u/lovecooledits Dec 09 '25
Jfyi enter word performance in the react native reanimated repo issue And just see how many people struggle with something they couldn't implement
0
1
u/tomater-id Dec 09 '25
Reanimated is native. You don't draw anything yourself in JS, you just set up transitions and everything gets drawed flawlestly with very good FPS. This could be perfectly done with RN. I am using this in my application for very intensive animation (multiple images are moving at the same time), not lags at all. The only lag is loading an image from image library, but that would be the same with native approach. So you just need to cache it in advance.
Also, where exactly you need shaders here? You are overcomplicating things, IMO
1
u/Secure-Humor-5586 Dec 10 '25
You can use Skia for this, Can you tell me where’d you got this video from ?
1
1
1
0
5
Dec 09 '25
[removed] — view removed comment
-20
u/PlayfulQuit6159 Dec 09 '25
First off, I appreciate the response. I’m brand new to all of this — I barely understand components or the native ecosystem — but I’m willing to commit and learn if it means I can bring the vision in my head to life. I’ll keep this in mind and apply it moving forward.
15
Dec 09 '25
[removed] — view removed comment
-23
41
u/CedarSageAndSilicone Dec 09 '25
Yes, definitely, but can you tell me how to make croissants?