Skip to content

Comments

chore(js-ts): Convert TabBar.js to TypeScript#308

Open
devin-ai-integration[bot] wants to merge 2 commits intomainfrom
devin/1770310264-convert-tabbar-to-typescript
Open

chore(js-ts): Convert TabBar.js to TypeScript#308
devin-ai-integration[bot] wants to merge 2 commits intomainfrom
devin/1770310264-convert-tabbar-to-typescript

Conversation

@devin-ai-integration
Copy link

@devin-ai-integration devin-ai-integration bot commented Feb 5, 2026

Summary

Converts app/components/Base/TabBar.js to TypeScript following the established migration patterns in the codebase.

Changes:

  • Rename TabBar.jsTabBar.tsx
  • Type createStyles function with Theme['colors'] parameter from @metamask/design-tokens
  • Add TabBarProps interface with index signature for flexible prop passing to DefaultTabBar
  • Let TypeScript infer style types from StyleSheet.create (avoids type conflicts with multiple @types/react-native versions in node_modules)

Review & Testing Checklist for Human

  • Verify TabBar renders correctly in screens that use it (e.g., scrollable tab views in the app)
  • Confirm no TypeScript errors in consuming components after this change
  • Check that tab styling (underline, colors, text) appears correctly

Test Plan

  1. Navigate to any screen using TabBar (e.g., wallet tabs, notification tabs)
  2. Verify tabs display correctly with proper styling
  3. Confirm tab switching works as expected

Notes

  • TypeScript check (yarn lint:tsc) verified locally - passes successfully
  • The typing approach follows the pattern used in app/components/UI/Notification/List/index.tsx which also uses DefaultTabBar
  • CI lint:tsc check was cancelled due to unrelated audit:ci failure (pre-existing dependency vulnerabilities), but all unit tests pass

Link to Devin run: https://app.devin.ai/sessions/d658aedd9ce948b9b0b4057e04304fa6
Requested by: @bcmake


Open with Devin

- Convert app/components/Base/TabBar.js to TabBar.tsx
- Add proper TypeScript interfaces for styles
- Use Theme['colors'] type from @metamask/design-tokens
- Use TabBarProps<DefaultTabBarProps> from react-native-scrollable-tab-view
- Follow established patterns from other migrated components

Co-Authored-By: benc@cognition.ai <Benc@windsurf.com>
@devin-ai-integration
Copy link
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

…ab-view

- Remove explicit ViewStyle/TextStyle imports to avoid type conflicts
- Use index signature interface for props to allow pass-through
- Import DefaultTabBar directly from submodule path
- Let TypeScript infer style types from StyleSheet.create

Co-Authored-By: benc@cognition.ai <Benc@windsurf.com>
Copy link
Author

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 1 additional finding.

Open in Devin Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants