[pull] main from MetaMask:main#421
Merged
Merged
Conversation
## **Description** This PR introduces utility functions that wrap the new header components (`HeaderCenter`, `HeaderWithTitleLeft`, `HeaderWithTitleLeftScrollable`) to return React Navigation-compatible screen options. These utilities will enable gradual deprecation of the `Navbar/index.js` file by providing a cleaner, more consistent API for navigation headers. **Motivation:** - The current `Navbar/index.js` contains 40+ functions with inconsistent patterns and mixed concerns - The new header components provide a more composable and maintainable approach - These utility functions bridge the gap between the new components and React Navigation's expected format **Changes:** - Added `getHeaderCenterNavbarOptions` - for centered titles with optional back/close buttons - Added `getHeaderWithTitleLeftNavbarOptions` - for left-aligned large titles with optional back button - Added `getHeaderWithTitleLeftScrollableNavbarOptions` - for collapsing headers that respond to scroll - Added unit tests for all utility functions - Updated each component's `index.ts` to export the new utilities ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/MDP-652 ## **Manual testing steps** ```gherkin Feature: Header Navigation Options Utilities Scenario: Developer uses getHeaderCenterNavbarOptions Given a React Navigation stack screen When developer passes getHeaderCenterNavbarOptions({ title: "Settings", onBack: () => navigation.goBack() }) to screen options Then the screen displays a HeaderCenter component with the title and back button Scenario: Developer uses getHeaderWithTitleLeftNavbarOptions Given a React Navigation stack screen When developer passes getHeaderWithTitleLeftNavbarOptions({ onBack, titleLeftProps: { title: "NFT", topLabel: "Collection" } }) to screen options Then the screen displays a HeaderWithTitleLeft component with large left-aligned title Scenario: Developer uses getHeaderWithTitleLeftScrollableNavbarOptions Given a React Navigation stack screen with a ScrollView When developer uses the hook and utility together Then the header collapses smoothly as the user scrolls ``` ## **Screenshots/Recordings** ### **Before** N/A - New utility functions, no visual changes ### **After** N/A - These are developer-facing utilities that wrap existing components ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Add utilities to wrap header components into React Navigation `header` options, with tests and updated exports. > > - **Component Library**: > - **New utilities**: Add `getHeaderCenterNavbarOptions`, `getHeaderWithTitleLeftNavbarOptions`, and `getHeaderWithTitleLeftScrollableNavbarOptions` that return React Navigation-compatible `header` options. > - **Tests**: Unit tests for each utility covering rendering, callbacks, and prop forwarding. > - **Exports**: Update `index.ts` files to export the new utilities. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 5c9b9d8. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )