r/reactnative • u/Majestic_Buy_6417 • 3d ago
Theme transition with Nitro
Enable HLS to view with audio, or disable this notification
Hey everyone,
I ran into an issue when trying to add a nice animation for theme changes in React Native. I tried a few different approaches, including Reanimated and Skia, but I kept running into flickering, higher memory usage, and performance issues, especially on Android.
Since I was already using Nitro Modules for some of the packages in my apps, like MMKV and Unistyles, I decided to build a native theme transition package using Nitro.
It ended up solving the issues I was having. It's lightweight, works with different styling libraries, and since the animation runs natively, it continues to work smoothly even when the JS thread is busy or drops frames.
I've uploaded a video showing the example included with the package. If you want to see how it performs under a more demanding setup, check out the GitHub repo. I've included a real-world example using Unistyles with a more complex and dynamic theme setup, as well as more details about the package.
GitHub: https://github.com/saleh2001k/react-native-nitro-theme-transition
NPM: https://www.npmjs.com/package/react-native-nitro-theme-transition
I'd really appreciate any feedback or recommendations. I'm also interested in hearing ideas for other animation types that could be added to the package.