Skip to content

design system overhaul: migrate to NativeWind/Tailwind#30

Open
stephenhungg wants to merge 2 commits into
mainfrom
stephenhung/design-system-overhaul
Open

design system overhaul: migrate to NativeWind/Tailwind#30
stephenhungg wants to merge 2 commits into
mainfrom
stephenhung/design-system-overhaul

Conversation

@stephenhungg

@stephenhungg stephenhungg commented Mar 13, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Full migration from StyleSheet to NativeWind/Tailwind CSS across all screens and components
  • Consolidated scattered color values into a semantic token system (colors.ts)
  • Added custom font families (Lato, Plus Jakarta Sans, Inter) with proper Tailwind config
  • Replaced inline StyleSheet objects with className-based styling throughout
  • Extracted reusable components: FormInput, AnimatedEntry, Skeleton, PickupCard, TaskCard, PageHeader, ProfileField, ErrorBoundary, FadeTransition, ReplateLogo
  • Removed all old StyleSheet files (authStyles.ts, typography.ts, page-specific style files)
  • Refactored API layer with parseErrorResponse helper and cleaner error handling
  • Added dateHelpers.ts and formatAddress.ts utilities
  • Shadow colors now use neutral.900 instead of raw black for semantic consistency
  • Fixed eslint/prettier configs to ignore vendor/ directory

Test plan

  • Verify all screens render correctly (login, signup, forgot/reset password, onboarding, landing)
  • Verify tab navigation and tab bar styling
  • Verify available pickups, my tasks, my account screens
  • Verify pickup details and donation details flows
  • Verify form inputs, validation, and error states
  • Verify animations (skeleton shimmer, pressable feedback, segmented control)
  • Verify on both iOS and Android
  • Confirm no regressions in API calls

- set up nativewind infrastructure (metro.config, tailwind.config, babel, global.css)
- convert all pages and components from StyleSheet to className syntax
- replace TouchableOpacity with AnimatedPressable throughout
- extract reusable components (FormInput, PickupCard, TaskCard, PageHeader,
  Skeleton, PickupDetailSkeleton, ProfileField, PasswordRequirements, etc.)
- consolidate API error handling in config.ts (parseErrorResponse helper)
- add accessibility attributes (accessibilityRole, accessibilityLabel)
- replace @rneui/themed, react-native-paper with nativewind
- add Inter and PlusJakartaSans font families
- move date/time helpers and address formatting to shared utils
- remove mock data fallbacks in pickup-details (show error state instead)
- wire up real partner dropdown and submit in donation-details
- add activity tab placeholder, hide my-account from tab bar
- fix signup password_confirmation bug (was sending password instead of confirmPassword)
- fix getPartners type safety with defensive runtime validation
- fix duplicate nativewind-env.d.ts in tsconfig.json
- remove dead shadows.ts, unused style files, and old component files
- add vendor/ to .prettierignore and eslint ignores
keeps all shadow tinting within the semantic color system
stephenhungg added a commit that referenced this pull request Apr 10, 2026
CI's pnpm install --frozen-lockfile was failing across PRs #30, #32,
#33 because pnpm-lock.yaml had react-native-svg pinned at ^15.15.3 but
package.json says 15.12.1. Regenerated the lockfile so the specifier
matches. Drift is pre-existing on the design-system-overhaul branch
and just propagated up the stack.
stephenhungg added a commit that referenced this pull request Apr 10, 2026
CI's pnpm install --frozen-lockfile was failing across PRs #30, #32,
#33 because pnpm-lock.yaml had react-native-svg pinned at ^15.15.3 but
package.json says 15.12.1. Regenerated the lockfile so the specifier
matches. Drift is pre-existing on the design-system-overhaul branch
and just propagated up the stack.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant