Implementation Phases

Detailed breakdown of the Big Bang migration phases with specific tasks, files, and acceptance criteria.

Note: @digiwedge/react-native-paper has been removed from the workspace; legacy screens/hooks now live in @digiwedge/mobile-auth. References below capture the migration record.

Phase 1: Foundation & Setup (Week 1-2)

Objectives

Initialize Gluestack UI v3 in the monorepo
Configure NativeWind across all mobile applications
Create the new @digiwedge/gluestack-ui library scaffold
Port core primitive components

Task Breakdown

1.1 Create Library Scaffold

Files to Create:

libs/ui/gluestack-ui/
├── src/
│   ├── index.ts
│   ├── components/
│   │   ├── index.ts
│   │   └── primitives/
│   │       ├── index.ts
│   │       ├── Box.tsx
│   │       ├── Text.tsx
│   │       ├── Icon.tsx
│   │       ├── Divider.tsx
│   │       └── Spinner.tsx
│   ├── theme/
│   │   ├── index.ts
│   │   ├── Provider.tsx
│   │   ├── tokens.ts
│   │   └── tailwind.config.js
│   ├── utils/
│   │   ├── index.ts
│   │   ├── icons.ts
│   │   └── migration.ts
│   ├── hooks/
│   │   └── index.ts          # Re-export from react-native-paper
│   ├── stores/
│   │   └── index.ts          # Re-export from react-native-paper
│   └── types/
│       └── index.ts          # Re-export from react-native-paper
├── package.json
├── tsconfig.json
├── project.json
└── global.css

package.json:

{
  "name": "@digiwedge/gluestack-ui",
  "version": "0.1.0",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "exports": {
    ".": "./src/index.ts",
    "./global.css": "./global.css"
  },
  "dependencies": {
    "@digiwedge/react-native-paper": "workspace:*",
    "@gluestack-ui/config": "^1.1.20",
    "@gluestack-ui/themed": "^1.1.73",
    "nativewind": "~4.1.0",
    "lucide-react-native": "^0.400.0"
  },
  "peerDependencies": {
    "react": "^19.0.0",
    "react-native": "~0.81.0",
    "expo": "~54.0.0"
  }
}

1.2 Configure NativeWind in Each App

Apps to configure:

apps/teetime/teetime-mobile
apps/teetime/teetime-country-club
apps/scl/scl-mobile
apps/messaging/messaging_mobile

Files per app:

metro.config.js (Nx + NativeWind):

const { withNxMetro } = require('@nx/expo');
const { getDefaultConfig } = require('@expo/metro-config');
const { mergeConfig } = require('metro-config');
const { withNativeWind } = require('nativewind/metro');

const defaultConfig = getDefaultConfig(__dirname);
const baseConfig = withNxMetro(mergeConfig(defaultConfig, {}), {
  watchFolders: [],
  extensions: [],
});

module.exports = withNativeWind(baseConfig, {
  input: './global.css',
  configPath: './tailwind.config.js',
});

.babelrc.* (NativeWind enabled outside tests):

module.exports = function (api) {
  api.cache(true);
  const isTest =
    process.env.BABEL_ENV === 'test' || process.env.NODE_ENV === 'test';

  return {
    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }]],
    plugins: isTest ? [] : ['nativewind/babel'],
  };
};

tailwind.config.js:

const { hairlineWidth } = require('nativewind/theme');

module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    '../../libs/ui/gluestack-ui/src/**/*.{js,jsx,ts,tsx}',
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f3e5f5',
          100: '#e1bee7',
          200: '#ce93d8',
          300: '#ba68c8',
          400: '#ab47bc',
          500: '#6200ee',  // Main primary
          600: '#5600d4',
          700: '#4a00ba',
          800: '#3e00a0',
          900: '#320086',
        },
        secondary: {
          500: '#03dac6',
        },
        error: {
          500: '#b00020',
        },
        background: '#ffffff',
        surface: '#ffffff',
        outline: '#79747e',
      },
      borderWidth: {
        hairline: hairlineWidth(),
      },
    },
  },
  plugins: [],
};

global.css (import in index.js):

@tailwind base;
@tailwind components;
@tailwind utilities;

tsconfig.json: Do not add compilerOptions.paths. Keep workspace package deps + project references only.

Note: NativeWind may auto-generate nativewind-env.d.ts and update tsconfig.json to include it. Keep those changes.

1.3 Port Primitive Components

Box.tsx:

import { View, ViewProps } from 'react-native';
import { styled } from 'nativewind';

export interface BoxProps extends ViewProps {
  className?: string;
}

export const Box = styled(View);

Text.tsx:

import { Text as RNText, TextProps as RNTextProps } from 'react-native';
import { styled } from 'nativewind';

export interface TextProps extends RNTextProps {
  className?: string;
  variant?: string;
}

const StyledText = styled(RNText);

export const Text = ({ variant, className, ...props }: TextProps) => {
  const variantClass = variant ? getTextVariantClass(variant) : '';
  return <StyledText className={`${variantClass} ${className || ''}`} {...props} />;
};

Spinner.tsx (ActivityIndicator replacement):

import { ActivityIndicator, ActivityIndicatorProps } from 'react-native';
import { styled } from 'nativewind';

export interface SpinnerProps extends ActivityIndicatorProps {
  className?: string;
}

export const Spinner = styled(ActivityIndicator);

// Paper-compatible alias
export const ActivityIndicator = ({
  animating = true,
  ...props
}: SpinnerProps & { animating?: boolean }) => {
  if (!animating) return null;
  return <Spinner {...props} />;
};

Acceptance Criteria

@digiwedge/gluestack-ui library scaffolded in workspace
NativeWind wiring added in all 4 apps (Metro + Babel + Tailwind + global.css)
Box, Text, Icon, Divider, Spinner components exported
Apps wrapped in new provider (QA pending)
Dev clients validated on SDK 54 (all 4 apps export successfully)

Estimated Effort

Library scaffold: 4 hours
NativeWind config per app: 2 hours x 4 = 8 hours
Primitive components: 4 hours
Testing & debugging: 4 hours
Total: ~20 hours (2-3 dev days)

Phase 2: Form Components (Week 3-4)

Status

In progress: form wrappers added in @digiwedge/gluestack-ui (Button, IconButton, TextInput, Switch, Checkbox, Radio, Searchbar, Chip, SegmentedButtons). Initial app/library migrations underway (mobile-booking, tee-time-ui-mobile, scl-ui-mobile-components, mobile-auth, teetime/mobile apps).
Form control animations and feedback primitives delivered (Switch/Checkbox/Radio, Skeleton, StaggeredList, SwipeableRow).

Objectives

Migrate Button and IconButton (119 total usages)
Migrate TextInput with validation (27 usages)
Migrate other form controls (Switch, Checkbox, Radio)
Update all form screens
Add motion + feedback primitives for common list/loading states

Task Breakdown

2.1 Button Components

Files to create:

libs/ui/gluestack-ui/src/components/forms/
├── index.ts
├── Button.tsx
├── IconButton.tsx
└── ButtonGroup.tsx

Button.tsx implementation: See apps/docs/digi-docs/docs/mobile/component-mapping.md

Files to update (Button/IconButton usage):

libs/ui/react-native-paper/src/  (68 files - wrapper components)
libs/ui/tee-time-ui-mobile/src/  (36 files)
apps/teetime/teetime-mobile/src/
apps/teetime/teetime-country-club/src/
apps/scl/scl-mobile/src/
apps/messaging/messaging_mobile/src/

2.2 TextInput Component

Files to create:

libs/ui/gluestack-ui/src/components/forms/
├── TextInput.tsx
├── FormControl.tsx
└── HelperText.tsx

TextInput.tsx implementation: See apps/docs/digi-docs/docs/mobile/component-mapping.md

2.3 Other Form Controls

Files to create:

libs/ui/gluestack-ui/src/components/forms/
├── Switch.tsx
├── Checkbox.tsx
├── Radio.tsx
├── Searchbar.tsx
├── Chip.tsx
└── SegmentedButtons.tsx

2.4 Motion + Feedback Enhancements

Files to create/update:

libs/ui/gluestack-ui/src/components/layout/StaggeredList.tsx
libs/ui/gluestack-ui/src/components/layout/SwipeableRow.tsx
libs/ui/gluestack-ui/src/components/feedback/Skeleton.tsx
libs/ui/gluestack-ui/src/components/forms/Switch.tsx
libs/ui/gluestack-ui/src/components/forms/Checkbox.tsx
libs/ui/gluestack-ui/src/components/forms/Radio.tsx

Acceptance Criteria

Estimated Effort

Button/IconButton: 8 hours
TextInput/FormControl: 8 hours
Other controls: 4 hours
Screen updates: 16 hours
Testing: 8 hours
Total: ~44 hours (5-6 dev days)

Phase 3: Overlay Components (Week 5-6)

Objectives

Migrate Portal and Dialog components
Migrate Menu and Popover
Update toast notification system
Migrate all modal screens

Task Breakdown

Files to create:

libs/ui/gluestack-ui/src/components/overlays/
├── index.tsx
├── Portal.tsx
├── Dialog.tsx
└── Modal.tsx

Files to create:

libs/ui/gluestack-ui/src/components/overlays/
├── Menu.tsx
├── Popover.tsx (optional wrapper)
└── Tooltip.tsx (optional wrapper)

3.3 Toast System

Files to create:

libs/ui/gluestack-ui/src/components/feedback/
├── index.ts
└── Toast.tsx

Component	Location	Complexity
LoginModal	react-native-paper/src/components/modals/	Medium
LogOutModal	react-native-paper/src/components/modals/	Low
ResetPasswordModal	react-native-paper/src/components/modals/	Medium
ConfirmOTPModal	react-native-paper/src/components/modals/	Medium
MFAMessagingModal	react-native-paper/src/components/modals/	Medium
TermsAndConditionsModal	react-native-paper/src/components/modals/	Low
ConfirmEditProfileModal	react-native-paper/src/components/modals/	Low
DeletePaymentCardModal	react-native-paper/src/components/modals/	Low
MakeCardDefault	react-native-paper/src/components/modals/	Low
BookingInformationModal	react-native-paper/src/components/modals/	Medium
FullScreenAuthModal	react-native-paper/src/components/modals/	Medium
ClubContactForm	react-native-paper/src/components/modals/	Medium

Acceptance Criteria

Portal wrapper available (Host passthrough)
Dialog wrapper with Title/Content/Actions
Menu wrapper with anchor + items
Popover + Tooltip wrappers (anchor + content)
Modal wrapper built on Gluestack modal
Toast notifications wired (useToast hook + renderer)
All 12 modal screens migrated
Overlay animations standardized via hooks + reduced-motion gating
Modal animations smooth (QA pending)

Estimated Effort

Portal/Dialog/Modal: 8 hours
Menu/Popover: 6 hours
Toast system: 4 hours
Modal screens (12): 24 hours
Testing: 8 hours
Total: ~50 hours (6-7 dev days)

Phase 4: Business Components (Week 7-8)

Objectives

Migrate auth flow screens
Migrate profile management components
Migrate buddy management
Migrate booking components

Task Breakdown

4.1 Auth Screens

Files to migrate:

libs/ui/react-native-paper/src/
├── screens/
│   ├── LoginView.tsx
│   ├── SignUpView.tsx
│   └── AuthDiagnosticsView.tsx
├── components/
│   ├── SocialMediaButtons.tsx
│   └── ProfileAvatar.tsx

4.2 Profile Components

Files to migrate:

libs/ui/react-native-paper/src/
├── screens/
│   ├── ProfileSettings.tsx
│   ├── EditProfileView.tsx
│   └── MyBuddies.tsx

4.3 Buddy Management

Files to migrate:

libs/ui/react-native-paper/src/components/
├── BuddyList.tsx
├── BuddyInputModal.tsx
├── PlayerSearchModal.tsx
├── DeleteBuddyModal.tsx
└── AddPlayersFromBuddies.tsx

4.4 Booking Components

Files to migrate:

libs/ui/react-native-paper/src/components/
├── CardPill.tsx
└── booking/
    └── (various booking components)

Acceptance Criteria

Login flow complete (email, social, MFA)
Signup flow complete (multi-step)
Profile view/edit working
Buddy add/remove/search working
Booking modals functional
All business logic preserved

Estimated Effort

Auth screens: 16 hours
Profile: 8 hours
Buddies: 12 hours
Booking: 8 hours
Testing: 8 hours
Total: ~52 hours (6-7 dev days)

Phase 5: App Integration & QA (Week 9-10)

Objectives

Remove all react-native-paper dependencies
Update app entry points
Visual QA across all apps
Performance validation
Build dev clients

Task Breakdown

5.1 Dependency Removal

Commands:

# Remove from apps
pnpm remove react-native-paper --filter teetime-mobile
pnpm remove react-native-paper --filter teetime-country-club
pnpm remove react-native-paper --filter scl-mobile
pnpm remove react-native-paper --filter messaging_mobile

# Remove from libs
pnpm remove react-native-paper --filter @digiwedge/tee-time-ui-mobile
pnpm remove react-native-paper --filter @digiwedge/scl-ui-mobile-components

# Remove from root
pnpm remove react-native-paper -w

# Verify removal
grep -r "react-native-paper" --include="*.tsx" --include="*.ts" apps/ libs/
# Should return empty

5.2 Update App Entry Points

Files to update per app:

App.tsx or _layout.tsx
Remove PaperProvider, add GluestackUIProvider
Import global.css

5.3 Visual QA Matrix

Screen	TeeTime Mobile	TeeTime CC	SCL Mobile	Messaging
Splash	[ ]	[ ]	[ ]	[ ]
Login	[ ]	[ ]	[ ]	[ ]
Signup	[ ]	[ ]	[ ]	[ ]
Home	[ ]	[ ]	[ ]	[ ]
Profile	[ ]	[ ]	[ ]	[ ]
Settings	[ ]	[ ]	[ ]	[ ]
Booking List	[ ]	[ ]	N/A	N/A
Booking Detail	[ ]	[ ]	N/A	N/A
Buddies	[ ]	[ ]	N/A	N/A
Payment	[ ]	[ ]	[ ]	N/A

5.4 Performance Validation

Metrics to capture:

Metric	Before	After	Target
JS Bundle Size	TBD	TBD	No more than before
TTI (iOS)	TBD	TBD	No more than before
TTI (Android)	TBD	TBD	No more than before
Memory Usage	TBD	TBD	No more than before

Tools:

npx react-native-bundle-visualizer
Flipper Performance plugin
Expo dev tools

5.5 Build Dev Clients

pnpm nx run teetime-mobile:build --configuration=development
pnpm nx run teetime-country-club:build --configuration=development
pnpm nx run scl-mobile:build --configuration=development
pnpm nx run messaging_mobile:build --configuration=development

Acceptance Criteria

Zero react-native-paper imports in codebase
All 4 apps build successfully
All screens visually match (95%+ parity)
Bundle size no more than previous
TTI no more than previous
All existing tests pass
Dev clients installed and working

Estimated Effort

Dependency removal: 4 hours
Entry point updates: 4 hours
Visual QA: 16 hours
Performance validation: 8 hours
Bug fixes: 16 hours
Dev client builds: 4 hours
Total: ~52 hours (6-7 dev days)

Summary

Phase	Duration	Effort	Key Deliverable
1. Foundation	Week 1-2	~20h	Library scaffold, NativeWind setup
2. Forms	Week 3-4	~44h	Button, Input, form controls
3. Overlays	Week 5-6	~50h	Modal, Menu, Toast, all modals
4. Business	Week 7-8	~52h	Auth, Profile, Buddies, Booking
5. Integration	Week 9-10	~52h	QA, cleanup, dev clients
Total	10 weeks	~218h	Full migration

Team Recommendation:

1 Lead Developer: Architecture, complex components
1-2 Mobile Developers: Screen migration, testing
1 QA: Visual regression, manual testing

Phase 1: Foundation & Setup (Week 1-2)​

Objectives​

Task Breakdown​

1.1 Create Library Scaffold​

1.2 Configure NativeWind in Each App​

1.3 Port Primitive Components​

Acceptance Criteria​

Estimated Effort​

Phase 2: Form Components (Week 3-4)​

Status​

Objectives​

Task Breakdown​

2.1 Button Components​

2.2 TextInput Component​

2.3 Other Form Controls​

2.4 Motion + Feedback Enhancements​

Acceptance Criteria​

Estimated Effort​

Phase 3: Overlay Components (Week 5-6)​

Objectives​

Task Breakdown​

3.1 Modal Components​

3.2 Menu Components​

3.3 Toast System​

Modal Screens to Migrate​

Acceptance Criteria​

Estimated Effort​

Phase 4: Business Components (Week 7-8)​

Objectives​

Task Breakdown​

4.1 Auth Screens​

4.2 Profile Components​

4.3 Buddy Management​

4.4 Booking Components​

Acceptance Criteria​

Estimated Effort​

Phase 5: App Integration & QA (Week 9-10)​

Objectives​

Task Breakdown​

5.1 Dependency Removal​

5.2 Update App Entry Points​

5.3 Visual QA Matrix​

5.4 Performance Validation​

5.5 Build Dev Clients​

Acceptance Criteria​

Estimated Effort​

Summary​

Phase 1: Foundation & Setup (Week 1-2)

Objectives

Task Breakdown

1.1 Create Library Scaffold

1.2 Configure NativeWind in Each App

1.3 Port Primitive Components

Acceptance Criteria

Estimated Effort

Phase 2: Form Components (Week 3-4)

Status

Objectives

Task Breakdown

2.1 Button Components

2.2 TextInput Component

2.3 Other Form Controls

2.4 Motion + Feedback Enhancements

Acceptance Criteria

Estimated Effort

Phase 3: Overlay Components (Week 5-6)

Objectives

Task Breakdown

3.1 Modal Components

3.2 Menu Components

3.3 Toast System

Modal Screens to Migrate

Acceptance Criteria

Estimated Effort

Phase 4: Business Components (Week 7-8)

Objectives

Task Breakdown

4.1 Auth Screens

4.2 Profile Components

4.3 Buddy Management

4.4 Booking Components

Acceptance Criteria

Estimated Effort

Phase 5: App Integration & QA (Week 9-10)

Objectives

Task Breakdown

5.1 Dependency Removal

5.2 Update App Entry Points

5.3 Visual QA Matrix

5.4 Performance Validation

5.5 Build Dev Clients

Acceptance Criteria

Estimated Effort

Summary