feat: native-stack + shared transitions

[ajaysehwal]

Description

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

In This PR migrates our navigation setup from @react-navigation/native to @react-navigation/native-stack to enable support for shared transition animations and improved native animations across the app. By using the native stack navigator, we can leverage smoother transitions and better performance compared to the JS-based stack.

Reference

Native Stack Navigator Docs:

https://reactnavigation.org/docs/native-stack-navigator

Shared Transitions Docs:

https://reactnavigation.org/docs/shared-element-transitions/

Screen.Recording.2026-03-02.at.5.56.49.PM.mov

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

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):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• Nostr Wallet Connect
• LndHub

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]

Summary of Changes

Hello @ajaysehwal, 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 modernizes the application's navigation by migrating to @react-navigation/native-stack and integrating react-native-reanimated for shared element transitions. These changes significantly enhance the visual fluidity and performance of screen transitions, particularly when interacting with contact information. The update also includes necessary dependency adjustments and configuration to support the new navigation and animation features.

Highlights

• Navigation Stack Migration: The application's navigation system was upgraded from @react-navigation/stack to @react-navigation/native-stack, leveraging native navigation capabilities for improved performance and a more integrated user experience.
• Shared Element Transitions: Shared element transitions were implemented using react-native-reanimated to create smooth visual continuity when navigating between the contact list and contact detail screens, specifically for contact photos and names.
• Dependency Updates and Configuration: Key navigation dependencies were updated, @react-navigation/native-stack was added, and react-native-reanimated was configured with the ENABLE_SHARED_ELEMENT_TRANSITIONS feature flag.
• Native Screens Optimization: react-native-screens was enabled to optimize the rendering of native screens, contributing to better performance.

Changelog

• App.tsx
  • Replaced createStackNavigator with createNativeStackNavigator for the main navigation stack.
  • Imported and applied DarkTheme from @react-navigation/native to the navigation container.
  • Adjusted animation logic to conditionally apply the animation parameter, ensuring compatibility with shared element transitions.
  • Moved the Stack navigator initialization outside the render method.
• index.js
  • Imported and called enableScreens() from react-native-screens to optimize native screen management.
• package.json
  • Updated @react-navigation/native to version 7.1.28.
  • Added @react-navigation/native-stack as a new dependency at version 7.12.0.
  • Configured reanimated with the ENABLE_SHARED_ELEMENT_TRANSITIONS static feature flag.
• views/ContactDetails.tsx
  • Imported Animated, FadeIn, and SharedTransition from react-native-reanimated.
  • Defined contactSharedTransition and contentEntering constants for animation effects.
  • Extended ContactDetailsProps to include contactName, contactPhoto, and contactHasOnlyCashuPubkey for shared transitions.
  • Extracted contact details from route parameters to facilitate shared element transitions during loading states.
  • Replaced standard Image, View, and Text components with Animated.Image, Animated.View, and Animated.Text for contact photos and names, applying sharedTransitionTag and sharedTransitionStyle.
  • Implemented entering={contentEntering} to delay content appearance until shared transitions are complete.
• views/Settings/Contacts.tsx
  • Imported Animated and SharedTransition from react-native-reanimated.
  • Defined contactSharedTransition to match the transition style in ContactDetails.tsx.
  • Passed contactName, contactPhoto, and contactHasOnlyCashuPubkey as route parameters when navigating to ContactDetails.
  • Replaced standard Image, View, and Text components with Animated.Image, Animated.View, and Animated.Text for contact list items, applying sharedTransitionTag and sharedTransitionStyle.
  • Added removeClippedSubviews={false} to FlatList components to ensure proper rendering with animations.
• yarn.lock
  • Updated the resolved versions for @react-navigation/core and @react-navigation/native.
  • Added new dependency entries for @react-navigation/native-stack.
  • Updated the warn-once dependency.

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.

Footnotes

1. 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 successfully implements native stack navigation and shared element transitions for contact details, which significantly enhances the user experience. The changes are well-implemented using react-native-reanimated. I've identified a couple of areas for improvement: an inconsistent animation duration between screens which could affect the transition's smoothness, and some code duplication in the ContactDetails view that could be refactored for better maintainability. Overall, this is a great feature addition.