refactor: simplify Tabs component #22284
Draft
+1,450
−1,304
Conversation
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
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
metamaskbot
added
the
team-design-system
georgewrmarshall
force-pushed
the
refactor-tabsbar-reduce-complexity
branch
from
b9e821f to
9bf41a3
Compare
georgewrmarshall
commented
Nov 6, 2025
| /** | ||
| * Callback when tab layout changes | ||
| */ | ||
| onLayout?: (event: LayoutChangeEvent) => void; |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
georgewrmarshall
changed the title
georgewrmarshall
commented
Nov 7, 2025
Comment on lines
-28
to
-35
| const handleOnLayout = useCallback( | ||
| (layoutEvent: Parameters<NonNullable<typeof onLayout>>[0]) => { | ||
| if (onLayout) { | ||
| onLayout(layoutEvent); | ||
| } | ||
| }, | ||
| [onLayout], | ||
| ); |
Contributor
Author
There was a problem hiding this comment.
No longer needed
georgewrmarshall
commented
Nov 7, 2025
Comment on lines
+29
to
+43
| useEffect(() => { | ||
| // Skip animation on initial mount - just set the value | ||
| if (isInitialMount.current) { | ||
| isInitialMount.current = false; | ||
| scaleAnim.setValue(isActive && !isDisabled ? 1 : 0); | ||
| return; | ||
| } | ||
|
|
||
| // Animate on subsequent changes | ||
| Animated.timing(scaleAnim, { | ||
| toValue: isActive && !isDisabled ? 1 : 0, | ||
| duration: AnimationDuration.Fast, | ||
| useNativeDriver: true, | ||
| }).start(); | ||
| }, [isActive, isDisabled, scaleAnim]); |
Contributor
Author
There was a problem hiding this comment.
Handles animation of underline
georgewrmarshall
commented
Nov 7, 2025
Comment on lines
-38
to
-41
| <View | ||
| ref={viewRef} | ||
| onLayout={handleOnLayout} | ||
| style={tw.style('flex-shrink-0')} |
Contributor
Author
There was a problem hiding this comment.
Reducing element bloat by removing wrapping View as it's no longer needed
georgewrmarshall
commented
Nov 7, 2025
Comment on lines
+85
to
+93
| {/* Animated underline */} | ||
| <Animated.View | ||
| style={[ | ||
| tw.style('absolute bottom-0 left-0 right-0 h-0.5 bg-icon-default'), | ||
| { | ||
| transform: [{ scaleX: scaleAnim }], | ||
| }, | ||
| ]} | ||
| /> |
Contributor
Author
There was a problem hiding this comment.
Moved underline into the Tab component. A bit of flexibility on the animation style here
georgewrmarshall
commented
Nov 7, 2025
Comment on lines
+17
to
+30
| <RCTScrollView | ||
| contentContainerStyle={ | ||
| { | ||
| "flexDirection": "row", | ||
| "gap": 24, | ||
| "paddingLeft": 16, | ||
| "paddingRight": 16, | ||
| } | ||
| } | ||
| horizontal={true} | ||
| onContentSizeChange={[Function]} | ||
| scrollEnabled={false} | ||
| scrollsToTop={false} | ||
| showsHorizontalScrollIndicator={false} |
Contributor
Author
There was a problem hiding this comment.
Default renders the ScrollView so we get quite large snapshot updates
georgewrmarshall
commented
Nov 7, 2025
| @@ -1,20 +1,10 @@ | |||
| // Third party dependencies. | |||
| import React, { | |||
Contributor
Author
There was a problem hiding this comment.
Here we can remove all the complex logic that handled the underline animation
georgewrmarshall
commented
Nov 7, 2025
Comment on lines
+61
to
81
| <ScrollView | ||
| horizontal | ||
| showsHorizontalScrollIndicator={false} | ||
| scrollEnabled={scrollEnabled} | ||
| style={tw.style('flex-grow-0')} | ||
| contentContainerStyle={tw.style('flex-row px-4 gap-6')} | ||
| scrollsToTop={false} | ||
| onContentSizeChange={handleContentSizeChange} | ||
| > | ||
| {tabs.map((tab, index) => ( | ||
| <Tab | ||
| key={tab.key} | ||
| label={tab.label} | ||
| isActive={index === activeIndex} | ||
| isDisabled={tab.isDisabled} | ||
| onPress={() => handleTabPress(index)} | ||
| testID={`${testID}-tab-${index}`} | ||
| /> | ||
| ))} | ||
| </ScrollView> | ||
| </Box> |
Contributor
Author
There was a problem hiding this comment.
Removing a lot of duplicated code and the scrollEnabled in favor of scrollEnabled via the ScrollView. We check if this is enabled by checking the content of ScrollView against the width of the wrapping Box component which is calculated via the handleContainerLayout
Fixes a bug where the Tab animation would run on initial mount even when already at the target state. This caused unnecessary animation work and potential visual glitches. Changes: - Added isInitialMount ref to track first render - Skip animation on mount, immediately set value instead - Subsequent changes animate normally This ensures underlines appear instantly on first render and only animate when the active state actually changes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
georgewrmarshall
force-pushed
the
refactor-tabsbar-reduce-complexity
branch
from
6eef084 to
17c3018
Compare
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
This PR significantly refactors the Tabs component to reduce complexity improve maintainability. The refactoring removes ~200 lines of complex animation code while introducing a simpler, more performant animation system.
What is the reason for the change?
What is the improvement/solution?
contentContainerStyleso scroll detection works automatically without hardcoded valuesChangelog
CHANGELOG entry: null
Related issues
Fixes: N/A (internal refactoring)
Manual testing steps
Screenshots/Recordings
Before
Complex animation system with manual underline positioning across the entire TabsBar
tabsbefore.mov
After
Simplified animation with each tab handling its own underline, growing from center when active
after480.mov
Performance Impact
Yes, this improves performance:
useNativeDriver: true, which runs animations on the native thread instead of the JS thread, providing 60fps animations even when JS is busyrequestAnimationFrameusage that was previously polling for layout changesCode reduction:
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Reworks Tabs to use per-Tab underline animation and simplified scroll detection, removing complex layout/animation logic from TabsBar.
Tabs/Tab:ViewwithPressableand adds animated underline (Animated.View) usingscaleXwith native driver.isDisabled.onLayouthandling and related props; importsAnimationDuration.Tabs/TabsBar:style, drops...boxProps).ScrollViewwith padding/gap incontentContainerStyleand enables scrolling based on container width vs content size.Tab.types.ts: DropsonLayoutprop andLayoutChangeEventimport.Written by Cursor Bugbot for commit 9bf41a3. This will update automatically on new commits. Configure here.