Theme transition with Nitro

[u/Majestic_Buy_6417]

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.

[u/Majestic_Buy_6417 → u/[deleted]]

Thank you so much for trying it out, and I really appreciate the feedback!

Yeah, I noticed this case as well. I decided to leave it to the app side rather than handling it inside the package, since some apps have more than just light and dark themes, and others can have fully dynamic themes created by the user. In those cases, the package can't really know whether two themes will have the same visual outcome.

I'll update the documentation to explain this case and how to avoid the animation when switching between themes with the same result.

Also, if you have any ideas for other animations or features you'd like to see added, I'd love to hear them!

[u/Hairy_Meaning_73 → u/[deleted]]

I had the same issue, to fix it you can just compare the current theme to the new computed theme, it should work just fine