NostrContacts: fix layout and multiple bugs

[myxmaster]

Description

Multiple layout and bug fixes:

• Clean layout concept for contact rows
  • No more negative positioning/margin hacks
  • Long contacts are no longer cut off, but wrap correctly
• Using LayoutAnimation instead of Animated/Easing (lets the OS handle layout transitions natively, no manual width interpolation needed)
• Fix white checkbox background
• Selected checkbox uses themeColor('highlight')
• SelectButton icon in header uses themeColor, correct height and is vertically centered
• Close icon in header removed -> Back icon (and hardware back button) now handle everything: first clear loaded data, then navigate back
• Fixed identification bug for selecting contacts -> now using npub instead of banner (before: when you selected a contact without banner, all contacts without banner were selected)

Please test if behavior is fine on iOS!

Before	After

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, 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 and stability of the NostrContacts screen. It addresses several layout inconsistencies and visual bugs, particularly improving how contact rows are displayed and selected. A key architectural change involves leveraging native layout animations for smoother UI transitions and refining the back navigation flow to be more intuitive and robust. Additionally, a critical bug affecting contact selection logic has been resolved, ensuring accurate identification of contacts.

Highlights

• Layout Refinement: Refactored contact row layout to eliminate negative positioning and ensure long contact names wrap correctly, significantly improving visual consistency.
• Animation System Update: Migrated animation logic from the manual Animated/Easing API to the native LayoutAnimation for smoother and more performant UI transitions.
• Checkbox Styling and Functionality: Corrected the checkbox background to be transparent, updated the selected checkbox color to themeColor('highlight'), and adjusted its container styling.
• Header Icon Improvements: Adjusted the SelectButton icon in the header to use themeColor, have correct dimensions, and be vertically centered for better aesthetics.
• Unified Back Navigation: Replaced the explicit 'Close' icon in the header with a unified 'Back' navigation mechanism that first clears loaded data and then navigates back, also integrating with the hardware back button.
• Contact Selection Bug Fix: Fixed a critical bug in contact selection by using npub for identification instead of banner, preventing incorrect multi-selection when contacts lacked a banner.
• Global Back Button Handling: Integrated the NostrContacts screen into the app's global hardware back button handling for consistent navigation behavior.

Changelog

• App.tsx
  • Added 'NostrContacts' to the list of screens handled by the global handleBackPress function.
• views/NostrContacts.tsx
  • Updated imports to include BackHandler and LayoutAnimation, while removing Animated and Easing.
  • Removed the fadeAnim state property and related animation logic.
  • Implemented componentDidMount and componentWillUnmount to manage a hardware back button listener.
  • Introduced handleBackPress and resetSearch methods to manage navigation and state clearing.
  • Replaced Animated.timing with LayoutAnimation.configureNext for selection mode transitions.
  • Modified contact selection logic to identify contacts by npub instead of banner.
  • Refactored the _renderItem method's TouchableOpacity and View styles to improve layout, alignment, and remove negative margins, ensuring text wrapping.
  • Configured CheckBox to use themeColor('highlight') for checked state and transparent background/border.
  • Adjusted SelectButton component's height, width, fill color, and removed marginTop styling.
  • Removed the explicit 'close' Icon from the header's rightComponent.
  • Integrated conditional onBack and navigateBackOnBackPress props into the Header component for dynamic back navigation behavior.

Activity

• The author confirmed that tsc, lint, prettier, and test commands passed.
• The changes were tested on Android and with LND (REST).
• The author requested testing on iOS to ensure compatibility.

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 provides a solid set of fixes and refactorings for the NostrContacts screen. The move from Animated to LayoutAnimation is a good simplification, and the layout cleanup removes previous hacks, improving maintainability. The fix for contact selection using npub instead of banner is a critical correction. Overall, the changes enhance both the user experience and the code quality. I have one suggestion regarding the FlatList implementation to ensure robustness.

[shubhamkmr04]

we should see a smooth transition when we toggle the checkboxes

reference:

Simulator.Screen.Recording.-.iPhone.17.-.2026-03-02.at.13.04.53.mov

[myxmaster]

ah ok, turns out this animation was never visible on android (even in a compiled release build, so not just a debugging performance issue).

so i went back to Animated and now it works an android as well (tested by temporarily increasing the duration), because the Animated.View is always mounted (no conditional rendering) and extraData ensures FlatList re-renders items when state changes -> so the Animated system can actually reach the views.

[shubhamkmr04]

ah ok, turns out this animation was never visible on android (even in a compiled release build, so not just a debugging performance issue).

so i went back to Animated and now it works an android as well (tested by temporarily increasing the duration), because the Animated.View is always mounted (no conditional rendering) and extraData ensures FlatList re-renders items when state changes -> so the Animated system can actually reach the views.

still can't see that transition in both android and iOS

[myxmaster]

during debugging i cannot see any animation as well. try using duration: 2000 to make sure it generally works.

but i did change duration: 100 to 200, because i think 100 ms is a bit short anyway.

[myxmaster]

(rebased)

[shubhamkmr04]

@myxmaster please rebase again

[myxmaster]

done

[shubhamkmr04]

during debugging i cannot see any animation as well. try using duration: 2000 to make sure it generally works.

but i did change duration: 100 to 200, because i think 100 ms is a bit short anyway.

changing it to 2000 does make it visible while transition but its not smooth

[myxmaster]

Alright, I now tested on a physical device (not emulator). Turns out the original implementation was already problematic on older hardware (noticeable latency when entering selection mode and when tapping individual checkboxes).

Clean fix: Extracted ContactItem as a React.memo component with stable prop references, so only the one item whose isSelected changes actually re-renders. Combined with useNativeDriver: true for the slide animation, performance is now significantly improved.

Please test again.