feat(ui): add smooth circular animation for theme switching by ajaysehwal · Pull Request #3846 · ZeusLN/zeus

ajaysehwal · 2026-03-16T13:24:01Z

Description

Please enter a description and screenshots, if appropriate, of the work covered in this PR

Screen.Recording.2026-03-16.at.6.48.09.PM.mov

This pull request is categorized as a:

Checklist

I’ve run yarn run tsc and made sure my code compiles correctly
I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
I’ve run yarn run prettier and made sure my code is formatted correctly
I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

No, I’m a fool
Yes
N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

Android
iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

Locales

I’ve added new locale text that requires translations
I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

Contributors will need to run yarn after this PR is merged in
3rd party dependencies have been modified:
- verify that package.json and yarn.lock have been properly updated
- verify that dependencies are installed for both iOS and Android platforms

Other:

Changes were made that require an update to the README
Changes were made that require an update to onboarding

gemini-code-assist · 2026-03-16T13:24:17Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience by introducing a visually appealing circular animation when switching themes. It integrates a new animation library and refactors the theme application logic to support synchronous UI updates, ensuring a fluid and modern interface transition.

Highlights

New Dependency Added: The react-native-theme-switch-animation library was introduced to enable smooth UI transitions during theme changes.
Immediate Theme Update Action: A new setThemeImmediate action was added to SettingsStore to allow synchronous in-memory theme updates, which is crucial for animation libraries to capture before and after states effectively.
Circular Theme Switching Animation: The theme selection mechanism in the Display settings view was updated to utilize the new animation library, providing a smooth circular transition effect when changing themes.

Changelog

package.json
- Added react-native-theme-switch-animation dependency.
stores/SettingsStore.ts
- Introduced setThemeImmediate action for synchronous theme updates.
views/Settings/Display.tsx
- Imported react-native-theme-switch-animation and settingsStore.
- Modified onValueChange handler for theme selection to incorporate switchTheme animation.
- Updated theme update logic to use setThemeImmediate and then updateSettings asynchronously.
yarn.lock
- Updated the lock file to reflect the new react-native-theme-switch-animation dependency.

Activity

No specific activity (comments, reviews, progress updates) was provided in the context for this pull request.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a circular animation for theme switching by adding the react-native-theme-switch-animation library. The implementation involves a synchronous theme update in the settings store to allow the animation library to capture UI changes correctly. The logic is sound, but I've suggested a small improvement in Display.tsx to maintain consistency in how the MobX store is accessed.

views/Settings/Display.tsx

kaloudis · 2026-03-16T14:50:48Z

views/Settings/Display.tsx

+                            updateSettings({
                                display: {
                                    ...settings.display,
                                    theme: value
                                }
+                            }).then(() => {
+                                SystemNavigationBar.setNavigationColor(
+                                    themeColor('background'),
+                                    isLightTheme() ? 'dark' : 'light'
+                                );
+                                SystemNavigationBar.setNavigationBarDividerColor(
+                                    themeColor('secondary')
+                                );
                            });


Let's add a catch here:

updateSettings({ ... }).then(() => { SystemNavigationBar.setNavigationColor(...); SystemNavigationBar.setNavigationBarDividerColor(...); }).catch(() => { // Revert in-memory theme on failure SettingsStore.setThemeImmediate(theme); // previous value this.setState({ theme }); });

be sure to test on iOS not sure nav bar color setting throws or is a no-op

kaloudis · 2026-03-16T14:52:42Z

package.json

    "react-native-svg-transformer": "1.5.3",
    "react-native-system-navigation-bar": "2.8.0",
    "react-native-tcp-socket": "6.2.0",
+    "react-native-theme-switch-animation": "0.8.0",


not sure we want to pull in a new dependency just for this. maybe it wouldn't be so bad if we pulled it into zeus_modules

gemini-code-assist bot reviewed Mar 16, 2026

View reviewed changes

views/Settings/Display.tsx Outdated Show resolved Hide resolved

feat(ui): add smooth circular animation for theme switching

14f37a0

ajaysehwal force-pushed the theme-change-animations branch from acd949c to 14f37a0 Compare March 16, 2026 13:32

kaloudis added Themes UI labels Mar 16, 2026

kaloudis requested changes Mar 16, 2026

View reviewed changes

kaloudis force-pushed the master branch from f260099 to b544cc6 Compare March 26, 2026 23:52

ajaysehwal marked this pull request as draft April 1, 2026 08:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): add smooth circular animation for theme switching#3846

feat(ui): add smooth circular animation for theme switching#3846
ajaysehwal wants to merge 1 commit intoZeusLN:masterfrom
ajaysehwal:theme-change-animations

ajaysehwal commented Mar 16, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Mar 16, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

kaloudis Mar 16, 2026

Uh oh!

kaloudis Mar 16, 2026

Uh oh!

kaloudis Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ajaysehwal commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Testing

Locales

Third Party Dependencies and Packages

Other:

Uh oh!

gemini-code-assist bot commented Mar 16, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

kaloudis Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

kaloudis Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

kaloudis Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ajaysehwal commented Mar 16, 2026 •

edited

Loading