Setup Expo Project with Breez SDK Integration

[CodeByMAB]

Epic Reference

Part of Epic: Breez SDK Integration for Expo App (epic:97fd7dcb-10ec-46a8-b681-b2805eb0eb56)
SRS Spec: spec:97fd7dcb-10ec-46a8-b681-b2805eb0eb56/a8f8bef7-d1c5-4113-a9ad-6092120bfe76

Overview

Initialize the Expo project with all required dependencies, configure the Breez SDK for React Native, and set up the basic project structure.

Related SRS Requirements: FR-SDK-001, Section 8 (Expo Deployment)

Tasks

• Create new Expo project (SDK 50+)
• Install Breez SDK: npx expo install @breeztech/breez-sdk-spark-react-native
• Add Expo plugins: Breez SDK, expo-camera, expo-local-authentication to app.json
• Configure app.json: name, slug, bundleIdentifier, permissions (NSCameraUsageDescription, NSFaceIDUsageDescription, CAMERA, USE_BIOMETRIC)
• Install required Expo packages: expo-secure-store, expo-clipboard, expo-sharing, expo-constants, expo-updates
• Install React Navigation and react-native-svg
• Set up EAS Build configuration (eas.json) for development, preview, production
• Verify prebuild and run:ios / run:android (custom dev build required; Expo Go not supported)
• Create basic folder structure (screens, components, services, utils)

Acceptance Criteria

• AC: Project builds with npx expo prebuild and npx expo run:ios / run:android
• AC: Breez SDK plugin is configured in app.json
• AC: All dependencies from SRS Section 8.5 are installed with correct versions
• AC: iOS (min 13.0) and Android (min SDK 26) requirements met
• AC: Basic navigation skeleton present

Technical Notes

• Reason for Custom Build: Breez SDK contains native code and cannot run in Expo Go.
• Build commands: npx expo prebuild, npx expo run:ios, npx expo run:android, eas build --platform ios|android

Dependencies

• None (foundation issue)

---

Ticket ID: ticket:97fd7dcb-10ec-46a8-b681-b2805eb0eb56/a874f80c-4a7b-4e6e-a62c-afb291a83550

[traycerai]

Plan

Observations

The Expo project has been successfully initialized with SDK 50+, Breez SDK installed and configured, and the basic folder structure established. All tasks are marked complete, but two acceptance criteria remain unchecked: confirming all dependencies from SRS Section 8.5 are installed with correct versions, and implementing a basic navigation skeleton. The project structure exists but requires verification of dependencies and implementation of navigation routing.

Approach

The implementation focuses on completing the two remaining acceptance criteria: (1) verifying all dependencies from SRS Section 8.5 are installed with correct versions in package.json and documenting them, and (2) implementing a functional navigation skeleton using React Navigation with at least a HomeScreen. This ensures the project foundation is complete and ready for feature development.

Implementation Steps

1. Verify and Document All Dependencies from SRS Section 8.5

Audit file:package.json to confirm all required dependencies are installed with correct versions:

Required Breez SDK and Core Dependencies:

• @breeztech/breez-sdk-spark-react-native - Latest stable version
• react-native - Compatible with Expo SDK 50+
• react - Compatible with Expo SDK 50+
• expo - Version 50 or higher

Required Expo Packages (from SRS Section 8.5):

• expo-secure-store - For secure credential storage
• expo-clipboard - For clipboard operations
• expo-sharing - For sharing functionality
• expo-constants - For app constants and configuration
• expo-updates - For over-the-air updates
• expo-camera - For camera access (Breez SDK requirement)
• expo-local-authentication - For biometric authentication

Navigation and UI Dependencies:

• @react-navigation/native - Core navigation library
• @react-navigation/stack - Stack navigation for screen management
• react-native-screens - Performance optimization for navigation
• react-native-safe-area-context - Safe area handling
• react-native-svg - SVG rendering support

Verification Process:

1. Open file:package.json and review the dependencies and devDependencies sections
2. Verify each required package from the list above is present with a compatible version
3. Check that no conflicting versions exist between dependencies
4. Run npm list or yarn list to verify all dependencies are installed correctly
5. Document actual installed versions in a verification checklist
6. If any dependencies are missing, install them using npx expo install <package-name>
7. Update file:README.md with a "Dependencies" section listing all verified packages and versions
8. Mark acceptance criterion as complete once all packages are verified

2. Implement and Verify Basic Navigation Skeleton

Implement a functional navigation structure and confirm it is properly integrated:

Create Navigation Configuration:

• Create file:src/navigation/AppNavigator.tsx as a stack navigator using React Navigation v6+
• Implement the stack navigator with HomeScreen as the initial route
• Export the AppNavigator component for use in App.tsx
• Use TypeScript for type safety with navigation parameters

Implement Screen Components:

• Create file:src/screens/HomeScreen.tsx as a functional React component
• Add basic UI elements (title, welcome message, basic layout)
• Ensure HomeScreen renders without errors
• Register HomeScreen in the AppNavigator stack

Configure App Entry Point:

• Update file:App.tsx to import and render AppNavigator
• Wrap the navigation with NavigationContainer from React Navigation
• Add SafeAreaProvider to handle safe area insets
• Ensure the App component properly initializes and renders the navigation structure

Verification Steps:

1. Verify file:src/navigation/AppNavigator.tsx exists and exports a valid stack navigator
2. Confirm file:src/screens/HomeScreen.tsx exists and is a functional component
3. Check file:App.tsx properly imports AppNavigator and wraps it with NavigationContainer
4. Run npx expo run:ios or npx expo run:android to verify the app builds and navigation renders
5. Verify no console errors or warnings related to navigation
6. Confirm the HomeScreen displays correctly on app launch

Expected folder structure:

src/
├── screens/
│   └── HomeScreen.tsx
├── navigation/
│   └── AppNavigator.tsx
├── components/
├── services/
├── utils/
└── App.tsx

3. Update Project Documentation

Update file:README.md to document:

• Complete list of installed dependencies with versions
• Navigation structure overview
• Build and run instructions for iOS and Android
• Development prerequisites
• Next steps for feature development

Acceptance Criteria Verification

Criterion	Status	Verification Method
Project builds with prebuild and run commands	✓ Complete	npx expo prebuild --clean, npx expo run:ios, npx expo run:android execute successfully
Breez SDK plugin configured	✓ Complete	expo.plugins array in file:app.json contains Breez SDK entry with proper configuration
iOS 13.0+ and Android SDK 26+ requirements	✓ Complete	deploymentTarget and minSdkVersion in file:app.json meet minimum requirements
All SRS dependencies installed with correct versions	Pending	Verify all packages from SRS Section 8.5 are present in file:package.json with compatible versions
Basic navigation skeleton present	Pending	Implement file:src/navigation/AppNavigator.tsx, file:src/screens/HomeScreen.tsx, and verify file:App.tsx properly integrates navigation

Technical Considerations

Dependency Verification:

• Use npm list or yarn list to verify all dependencies are installed
• Ensure all packages are compatible with Expo SDK 50+
• Check for peer dependency conflicts or warnings during installation
• Document actual installed versions for future reference

Navigation Implementation:

• Use React Navigation v6+ for best compatibility with Expo SDK 50+
• Implement stack navigation as the base navigator
• Use NavigationContainer as the root wrapper in file:App.tsx
• Use TypeScript for type-safe navigation parameters
• Use useNavigation hook for programmatic navigation in components

Custom Development Client:

• Breez SDK contains native modules that cannot run in Expo Go
• All testing must use custom development builds via expo run:ios/android or EAS Build
• Developers need Xcode (macOS) for iOS builds and Android Studio for Android builds

Troubleshooting:

• If dependencies fail to install, clear cache with npm cache clean --force
• If navigation doesn't render, verify NavigationContainer wraps the navigation in file:App.tsx
• If screens don't appear, check that screens are properly registered in file:src/navigation/AppNavigator.tsx
• Review build logs for specific error messages related to missing dependencies

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Expo project has been successfully initialized with SDK 50+, Breez SDK installed and configured, and the basic folder structure established. All tasks are marked complete, but two acceptance criteria remain unchecked: confirming all dependencies from SRS Section 8.5 are installed with correct versions, and implementing a basic navigation skeleton. The project structure exists but requires verification of dependencies and implementation of navigation routing.

## Approach

The implementation focuses on completing the two remaining acceptance criteria: (1) verifying all dependencies from SRS Section 8.5 are installed with correct versions in `package.json` and documenting them, and (2) implementing a functional navigation skeleton using React Navigation with at least a HomeScreen. This ensures the project foundation is complete and ready for feature development.

## Implementation Steps

### 1. Verify and Document All Dependencies from SRS Section 8.5

Audit `file:package.json` to confirm all required dependencies are installed with correct versions:

**Required Breez SDK and Core Dependencies:**
- `@breeztech/breez-sdk-spark-react-native` - Latest stable version
- `react-native` - Compatible with Expo SDK 50+
- `react` - Compatible with Expo SDK 50+
- `expo` - Version 50 or higher

**Required Expo Packages (from SRS Section 8.5):**
- `expo-secure-store` - For secure credential storage
- `expo-clipboard` - For clipboard operations
- `expo-sharing` - For sharing functionality
- `expo-constants` - For app constants and configuration
- `expo-updates` - For over-the-air updates
- `expo-camera` - For camera access (Breez SDK requirement)
- `expo-local-authentication` - For biometric authentication

**Navigation and UI Dependencies:**
- `@react-navigation/native` - Core navigation library
- `@react-navigation/stack` - Stack navigation for screen management
- `react-native-screens` - Performance optimization for navigation
- `react-native-safe-area-context` - Safe area handling
- `react-native-svg` - SVG rendering support

**Verification Process:**
1. Open `file:package.json` and review the `dependencies` and `devDependencies` sections
2. Verify each required package from the list above is present with a compatible version
3. Check that no conflicting versions exist between dependencies
4. Run `npm list` or `yarn list` to verify all dependencies are installed correctly
5. Document actual installed versions in a verification checklist
6. If any dependencies are missing, install them using `npx expo install <package-name>`
7. Update `file:README.md` with a "Dependencies" section listing all verified packages and versions
8. Mark acceptance criterion as complete once all packages are verified

### 2. Implement and Verify Basic Navigation Skeleton

Implement a functional navigation structure and confirm it is properly integrated:

**Create Navigation Configuration:**
- Create `file:src/navigation/AppNavigator.tsx` as a stack navigator using React Navigation v6+
- Implement the stack navigator with HomeScreen as the initial route
- Export the AppNavigator component for use in App.tsx
- Use TypeScript for type safety with navigation parameters

**Implement Screen Components:**
- Create `file:src/screens/HomeScreen.tsx` as a functional React component
- Add basic UI elements (title, welcome message, basic layout)
- Ensure HomeScreen renders without errors
- Register HomeScreen in the AppNavigator stack

**Configure App Entry Point:**
- Update `file:App.tsx` to import and render AppNavigator
- Wrap the navigation with NavigationContainer from React Navigation
- Add SafeAreaProvider to handle safe area insets
- Ensure the App component properly initializes and renders the navigation structure

**Verification Steps:**
1. Verify `file:src/navigation/AppNavigator.tsx` exists and exports a valid stack navigator
2. Confirm `file:src/screens/HomeScreen.tsx` exists and is a functional component
3. Check `file:App.tsx` properly imports AppNavigator and wraps it with NavigationContainer
4. Run `npx expo run:ios` or `npx expo run:android` to verify the app builds and navigation renders
5. Verify no console errors or warnings related to navigation
6. Confirm the HomeScreen displays correctly on app launch

**Expected folder structure:**
```
src/
├── screens/
│   └── HomeScreen.tsx
├── navigation/
│   └── AppNavigator.tsx
├── components/
├── services/
├── utils/
└── App.tsx
```

### 3. Update Project Documentation

Update `file:README.md` to document:
- Complete list of installed dependencies with versions
- Navigation structure overview
- Build and run instructions for iOS and Android
- Development prerequisites
- Next steps for feature development


## Acceptance Criteria Verification

| Criterion | Status | Verification Method |
|-----------|--------|-------------------|
| Project builds with prebuild and run commands | ✓ Complete | `npx expo prebuild --clean`, `npx expo run:ios`, `npx expo run:android` execute successfully |
| Breez SDK plugin configured | ✓ Complete | `expo.plugins` array in `file:app.json` contains Breez SDK entry with proper configuration |
| iOS 13.0+ and Android SDK 26+ requirements | ✓ Complete | `deploymentTarget` and `minSdkVersion` in `file:app.json` meet minimum requirements |
| All SRS dependencies installed with correct versions | Pending | Verify all packages from SRS Section 8.5 are present in `file:package.json` with compatible versions |
| Basic navigation skeleton present | Pending | Implement `file:src/navigation/AppNavigator.tsx`, `file:src/screens/HomeScreen.tsx`, and verify `file:App.tsx` properly integrates navigation |

## Technical Considerations

**Dependency Verification:**
- Use `npm list` or `yarn list` to verify all dependencies are installed
- Ensure all packages are compatible with Expo SDK 50+
- Check for peer dependency conflicts or warnings during installation
- Document actual installed versions for future reference

**Navigation Implementation:**
- Use React Navigation v6+ for best compatibility with Expo SDK 50+
- Implement stack navigation as the base navigator
- Use `NavigationContainer` as the root wrapper in `file:App.tsx`
- Use TypeScript for type-safe navigation parameters
- Use `useNavigation` hook for programmatic navigation in components

**Custom Development Client:**
- Breez SDK contains native modules that cannot run in Expo Go
- All testing must use custom development builds via `expo run:ios/android` or EAS Build
- Developers need Xcode (macOS) for iOS builds and Android Studio for Android builds

**Troubleshooting:**
- If dependencies fail to install, clear cache with `npm cache clean --force`
- If navigation doesn't render, verify `NavigationContainer` wraps the navigation in `file:App.tsx`
- If screens don't appear, check that screens are properly registered in `file:src/navigation/AppNavigator.tsx`
- Review build logs for specific error messages related to missing dependencies

---

Execution Information

Branch: main
Commit: 342104b

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[traycerai]

I have updated the Implementation Plan to reflect the recent changes in the ticket.

Previous Plan

Observations

The repository is currently empty except for a README file, confirming this is a greenfield project setup. The task requires initializing an Expo project with Breez SDK integration, which necessitates custom development builds since Breez SDK contains native code incompatible with Expo Go. The project targets iOS 13.0+ and Android SDK 26+, with specific dependencies for camera access, biometric authentication, and secure storage.

Approach

The implementation follows a sequential setup pattern: first establishing the Expo project foundation with SDK 50+, then layering in Breez SDK integration with required native configurations, followed by essential dependencies for navigation and device features, and finally configuring build tooling (EAS) and project structure. This bottom-up approach ensures each layer has its dependencies satisfied before proceeding.

Implementation Steps

1. Initialize Expo Project

Create a new Expo project using the latest SDK (50+):

npx create-expo-app@latest . --template blank-typescript

Key Points:

• Use TypeScript template for type safety
• Initialize in current directory (repository root)
• Verify Expo SDK version is 50 or higher in file:package.json

---

2. Install Breez SDK

Add the Breez SDK React Native package:

npx expo install @breeztech/breez-sdk-spark-react-native

Verification:

• Confirm package appears in file:package.json dependencies
• Note: This package contains native modules requiring custom dev builds

---

3. Configure app.json with Breez SDK Plugin

Update file:app.json to include the Breez SDK plugin and required configurations:

Add to expo.plugins array:

• "@breeztech/breez-sdk-spark-react-native"
• "expo-camera"
• "expo-local-authentication"

Configure app metadata:

• Set expo.name to a user-friendly app name (e.g., "WaveSpace")
• Set expo.slug to "wavespace-senior-project"
• Set expo.ios.bundleIdentifier (e.g., "com.yourorg.wavespace")
• Set expo.android.package (e.g., "com.yourorg.wavespace")

Add iOS permissions in expo.ios.infoPlist:

• NSCameraUsageDescription: "Camera access is required for scanning QR codes"
• NSFaceIDUsageDescription: "Biometric authentication is required for secure wallet access"

Add Android permissions in expo.android.permissions:

• "CAMERA"
• "USE_BIOMETRIC"

Set platform requirements:

• expo.ios.deploymentTarget: "13.0"
• expo.android.minSdkVersion: 26

---

4. Install Required Expo Packages

Install all dependencies specified in the SRS Section 8.5:

npx expo install expo-secure-store expo-clipboard expo-sharing expo-constants expo-updates expo-camera expo-local-authentication

Purpose of each package:

• expo-secure-store: Encrypted storage for sensitive wallet data
• expo-clipboard: Copy payment addresses/invoices
• expo-sharing: Share payment information
• expo-constants: Access app configuration
• expo-updates: OTA update support
• expo-camera: QR code scanning for Lightning invoices
• expo-local-authentication: Biometric authentication

---

5. Install Navigation and UI Dependencies

Set up React Navigation and required UI libraries:

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-svg
npx expo install react-native-svg

Components:

• React Navigation for app navigation structure
• Native Stack Navigator for iOS/Android native transitions
• SVG support for icons and graphics

---

6. Configure EAS Build

Create file:eas.json in the project root with build profiles:

Structure:

{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {},
    "preview": {},
    "production": {}
  }
}

Profile configurations:

• development: Local development builds with debugging enabled, set developmentClient: true, distribution: "internal"
• preview: Internal testing builds, set distribution: "internal"
• production: App store/Play Store releases, set distribution: "store"

Additional settings:

• For iOS: Configure ios.simulator for development profile
• For Android: Configure android.buildType appropriately per profile

---

7. Create Project Folder Structure

Establish the following directory hierarchy in the project root:

src/
├── screens/          # Screen components (HomeScreen, WalletScreen, etc.)
├── components/       # Reusable UI components
├── services/         # Business logic and API integrations
│   └── breez/       # Breez SDK service wrapper
├── utils/           # Helper functions and utilities
├── navigation/      # Navigation configuration
├── types/           # TypeScript type definitions
└── constants/       # App-wide constants

Create placeholder files:

• file:src/services/breez/BreezService.ts: SDK initialization wrapper
• file:src/navigation/AppNavigator.tsx: Root navigation component
• file:src/screens/HomeScreen.tsx: Initial home screen
• file:src/types/index.ts: Shared TypeScript types

---

8. Update Entry Point

Modify file:App.tsx to import and render the navigation structure:

• Import AppNavigator from file:src/navigation/AppNavigator.tsx
• Wrap with NavigationContainer from @react-navigation/native
• Add basic error boundary for production stability
• Keep the component minimal, delegating logic to services

---

9. Verify Prebuild Process

Generate native projects to validate configuration:

npx expo prebuild --clean

Validation checks:

• Verify file:ios/ and file:android/ directories are created
• Check that Breez SDK plugin modifications appear in native files
• Confirm all permissions are present in file:ios/[AppName]/Info.plist
• Confirm permissions in file:android/app/src/main/AndroidManifest.xml

Note: Add ios/ and android/ to file:.gitignore as these are generated

---

10. Test Development Builds

Run the app on both platforms to ensure successful compilation:

iOS:

npx expo run:ios

Android:

npx expo run:android

Success criteria:

• App launches without crashes
• No native module linking errors
• Basic navigation renders correctly
• Console shows no critical errors

---

11. Configure Git Ignore

Update file:.gitignore to exclude generated and sensitive files:

Add entries:

• ios/ (generated by prebuild)
• android/ (generated by prebuild)
• node_modules/
• .expo/
• *.log
• .env (for future environment variables)

---

12. Document Build Process

Create or update file:README.md with setup and build instructions:

Include sections:

• Prerequisites (Node.js version, Expo CLI, EAS CLI)
• Installation steps (npm install)
• Development build commands
• EAS build commands for each platform
• Note about Expo Go incompatibility
• Troubleshooting common issues

Example commands to document:

# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development

---

Dependency Flow

graph TD
    A[Initialize Expo Project] --> B[Install Breez SDK]
    B --> C[Configure app.json]
    C --> D[Install Expo Packages]
    D --> E[Install Navigation]
    E --> F[Configure EAS Build]
    F --> G[Create Folder Structure]
    G --> H[Update Entry Point]
    H --> I[Run Prebuild]
    I --> J[Test Dev Builds]
    J --> K[Update Documentation]

Loading

---

Acceptance Criteria Verification

Criterion	Verification Method
Project builds with prebuild and run commands	Execute npx expo prebuild, npx expo run:ios, npx expo run:android successfully
Breez SDK plugin configured	Check expo.plugins array in file:app.json contains Breez SDK entry
All SRS dependencies installed	Verify all packages in Section 8.5 appear in file:package.json
iOS 13.0+ and Android SDK 26+ requirements	Confirm deploymentTarget and minSdkVersion in file:app.json
Basic navigation skeleton present	App launches with functional navigation structure

---

Technical Considerations

Custom Development Client Required:

• Breez SDK contains native modules that cannot run in Expo Go
• All testing must use custom development builds via expo run:ios/android or EAS Build
• Developers need Xcode (macOS) for iOS builds and Android Studio for Android builds

Platform-Specific Notes:

• iOS builds require Apple Developer account for device testing
• Android builds can be tested on emulators without additional accounts
• EAS Build can generate builds in the cloud without local native tooling

Import In IDE

🤖 Prompt for AI Agents

## Observations

The repository is currently empty except for a README file, confirming this is a greenfield project setup. The task requires initializing an Expo project with Breez SDK integration, which necessitates custom development builds since Breez SDK contains native code incompatible with Expo Go. The project targets iOS 13.0+ and Android SDK 26+, with specific dependencies for camera access, biometric authentication, and secure storage.

## Approach

The implementation follows a sequential setup pattern: first establishing the Expo project foundation with SDK 50+, then layering in Breez SDK integration with required native configurations, followed by essential dependencies for navigation and device features, and finally configuring build tooling (EAS) and project structure. This bottom-up approach ensures each layer has its dependencies satisfied before proceeding.

## Implementation Steps

### 1. Initialize Expo Project

Create a new Expo project using the latest SDK (50+):

```bash
npx create-expo-app@latest . --template blank-typescript
```

**Key Points:**
- Use TypeScript template for type safety
- Initialize in current directory (repository root)
- Verify Expo SDK version is 50 or higher in `file:package.json`

---

### 2. Install Breez SDK

Add the Breez SDK React Native package:

```bash
npx expo install @breeztech/breez-sdk-spark-react-native
```

**Verification:**
- Confirm package appears in `file:package.json` dependencies
- Note: This package contains native modules requiring custom dev builds

---

### 3. Configure app.json with Breez SDK Plugin

Update `file:app.json` to include the Breez SDK plugin and required configurations:

**Add to `expo.plugins` array:**
- `"@breeztech/breez-sdk-spark-react-native"`
- `"expo-camera"`
- `"expo-local-authentication"`

**Configure app metadata:**
- Set `expo.name` to a user-friendly app name (e.g., "WaveSpace")
- Set `expo.slug` to "wavespace-senior-project"
- Set `expo.ios.bundleIdentifier` (e.g., "com.yourorg.wavespace")
- Set `expo.android.package` (e.g., "com.yourorg.wavespace")

**Add iOS permissions in `expo.ios.infoPlist`:**
- `NSCameraUsageDescription`: "Camera access is required for scanning QR codes"
- `NSFaceIDUsageDescription`: "Biometric authentication is required for secure wallet access"

**Add Android permissions in `expo.android.permissions`:**
- `"CAMERA"`
- `"USE_BIOMETRIC"`

**Set platform requirements:**
- `expo.ios.deploymentTarget`: "13.0"
- `expo.android.minSdkVersion`: 26

---

### 4. Install Required Expo Packages

Install all dependencies specified in the SRS Section 8.5:

```bash
npx expo install expo-secure-store expo-clipboard expo-sharing expo-constants expo-updates expo-camera expo-local-authentication
```

**Purpose of each package:**
- `expo-secure-store`: Encrypted storage for sensitive wallet data
- `expo-clipboard`: Copy payment addresses/invoices
- `expo-sharing`: Share payment information
- `expo-constants`: Access app configuration
- `expo-updates`: OTA update support
- `expo-camera`: QR code scanning for Lightning invoices
- `expo-local-authentication`: Biometric authentication

---

### 5. Install Navigation and UI Dependencies

Set up React Navigation and required UI libraries:

```bash
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-svg
npx expo install react-native-svg
```

**Components:**
- React Navigation for app navigation structure
- Native Stack Navigator for iOS/Android native transitions
- SVG support for icons and graphics

---

### 6. Configure EAS Build

Create `file:eas.json` in the project root with build profiles:

**Structure:**
```json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {},
    "preview": {},
    "production": {}
  }
}
```

**Profile configurations:**
- **development**: Local development builds with debugging enabled, set `developmentClient: true`, `distribution: "internal"`
- **preview**: Internal testing builds, set `distribution: "internal"`
- **production**: App store/Play Store releases, set `distribution: "store"`

**Additional settings:**
- For iOS: Configure `ios.simulator` for development profile
- For Android: Configure `android.buildType` appropriately per profile

---

### 7. Create Project Folder Structure

Establish the following directory hierarchy in the project root:

```
src/
├── screens/          # Screen components (HomeScreen, WalletScreen, etc.)
├── components/       # Reusable UI components
├── services/         # Business logic and API integrations
│   └── breez/       # Breez SDK service wrapper
├── utils/           # Helper functions and utilities
├── navigation/      # Navigation configuration
├── types/           # TypeScript type definitions
└── constants/       # App-wide constants
```

**Create placeholder files:**
- `file:src/services/breez/BreezService.ts`: SDK initialization wrapper
- `file:src/navigation/AppNavigator.tsx`: Root navigation component
- `file:src/screens/HomeScreen.tsx`: Initial home screen
- `file:src/types/index.ts`: Shared TypeScript types

---

### 8. Update Entry Point

Modify `file:App.tsx` to import and render the navigation structure:

- Import `AppNavigator` from `file:src/navigation/AppNavigator.tsx`
- Wrap with `NavigationContainer` from `@react-navigation/native`
- Add basic error boundary for production stability
- Keep the component minimal, delegating logic to services

---

### 9. Verify Prebuild Process

Generate native projects to validate configuration:

```bash
npx expo prebuild --clean
```

**Validation checks:**
- Verify `file:ios/` and `file:android/` directories are created
- Check that Breez SDK plugin modifications appear in native files
- Confirm all permissions are present in `file:ios/[AppName]/Info.plist`
- Confirm permissions in `file:android/app/src/main/AndroidManifest.xml`

**Note:** Add `ios/` and `android/` to `file:.gitignore` as these are generated

---

### 10. Test Development Builds

Run the app on both platforms to ensure successful compilation:

**iOS:**
```bash
npx expo run:ios
```

**Android:**
```bash
npx expo run:android
```

**Success criteria:**
- App launches without crashes
- No native module linking errors
- Basic navigation renders correctly
- Console shows no critical errors

---

### 11. Configure Git Ignore

Update `file:.gitignore` to exclude generated and sensitive files:

**Add entries:**
- `ios/` (generated by prebuild)
- `android/` (generated by prebuild)
- `node_modules/`
- `.expo/`
- `*.log`
- `.env` (for future environment variables)

---

### 12. Document Build Process

Create or update `file:README.md` with setup and build instructions:

**Include sections:**
- Prerequisites (Node.js version, Expo CLI, EAS CLI)
- Installation steps (`npm install`)
- Development build commands
- EAS build commands for each platform
- Note about Expo Go incompatibility
- Troubleshooting common issues

**Example commands to document:**
```bash
# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development
```

---

## Dependency Flow

```mermaid
graph TD
    A[Initialize Expo Project] --> B[Install Breez SDK]
    B --> C[Configure app.json]
    C --> D[Install Expo Packages]
    D --> E[Install Navigation]
    E --> F[Configure EAS Build]
    F --> G[Create Folder Structure]
    G --> H[Update Entry Point]
    H --> I[Run Prebuild]
    I --> J[Test Dev Builds]
    J --> K[Update Documentation]
```

---

## Acceptance Criteria Verification

| Criterion | Verification Method |
|-----------|-------------------|
| Project builds with prebuild and run commands | Execute `npx expo prebuild`, `npx expo run:ios`, `npx expo run:android` successfully |
| Breez SDK plugin configured | Check `expo.plugins` array in `file:app.json` contains Breez SDK entry |
| All SRS dependencies installed | Verify all packages in Section 8.5 appear in `file:package.json` |
| iOS 13.0+ and Android SDK 26+ requirements | Confirm `deploymentTarget` and `minSdkVersion` in `file:app.json` |
| Basic navigation skeleton present | App launches with functional navigation structure |

---

## Technical Considerations

**Custom Development Client Required:**
- Breez SDK contains native modules that cannot run in Expo Go
- All testing must use custom development builds via `expo run:ios/android` or EAS Build
- Developers need Xcode (macOS) for iOS builds and Android Studio for Android builds

**Platform-Specific Notes:**
- iOS builds require Apple Developer account for device testing
- Android builds can be tested on emulators without additional accounts
- EAS Build can generate builds in the cloud without local native tooling

---

Execution Information

Branch: main
Commit: 342104b

New Plan

Observations

The Expo project has been initialized with SDK 50+ and the Breez SDK has been installed. The foundation is in place, and the remaining work focuses on configuring native plugins, installing complementary dependencies, setting up build infrastructure, and establishing the project structure. The project requires custom development builds due to Breez SDK's native code, targeting iOS 13.0+ and Android SDK 26+.

Approach

The implementation continues from the current state by completing the plugin and dependency configuration in app.json, installing all required Expo packages and navigation libraries, setting up EAS Build infrastructure, creating the folder structure, and verifying the build process. This approach ensures each configuration layer builds on the previous one, with validation at the end.

Implementation Steps

1. Configure app.json with Breez SDK Plugin and Permissions

Update file:app.json to add all required plugins and platform-specific configurations:

Add to expo.plugins array:

• "@breeztech/breez-sdk-spark-react-native"
• "expo-camera"
• "expo-local-authentication"

Configure app metadata:

• Set expo.name to "WaveSpace" (or appropriate app name)
• Set expo.slug to "wavespace-senior-project"
• Set expo.ios.bundleIdentifier (e.g., "com.yourorg.wavespace")
• Set expo.android.package (e.g., "com.yourorg.wavespace")

Add iOS permissions in expo.ios.infoPlist:

• NSCameraUsageDescription: "Camera access is required for scanning QR codes"
• NSFaceIDUsageDescription: "Biometric authentication is required for secure wallet access"

Add Android permissions in expo.android.permissions:

• "CAMERA"
• "USE_BIOMETRIC"

Set platform requirements:

• expo.ios.deploymentTarget: "13.0"
• expo.android.minSdkVersion: 26

---

2. Install Required Expo Packages

Install all dependencies specified in the SRS Section 8.5:

npx expo install expo-secure-store expo-clipboard expo-sharing expo-constants expo-updates expo-camera expo-local-authentication

Purpose of each package:

• expo-secure-store: Encrypted storage for sensitive wallet data
• expo-clipboard: Copy payment addresses/invoices
• expo-sharing: Share payment information
• expo-constants: Access app configuration
• expo-updates: OTA update support
• expo-camera: QR code scanning for Lightning invoices
• expo-local-authentication: Biometric authentication

---

3. Install Navigation and UI Dependencies

Set up React Navigation and required UI libraries:

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-svg
npx expo install react-native-svg

Components:

• React Navigation for app navigation structure
• Native Stack Navigator for iOS/Android native transitions
• SVG support for icons and graphics

---

4. Configure EAS Build

Create file:eas.json in the project root with build profiles:

Structure:

{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {},
    "preview": {},
    "production": {}
  }
}

Profile configurations:

• development: Local development builds with debugging enabled, set developmentClient: true, distribution: "internal"
• preview: Internal testing builds, set distribution: "internal"
• production: App store/Play Store releases, set distribution: "store"

Additional settings:

• For iOS: Configure ios.simulator for development profile
• For Android: Configure android.buildType appropriately per profile

---

5. Create Project Folder Structure

Establish the following directory hierarchy in the project root:

src/
├── screens/          # Screen components (HomeScreen, WalletScreen, etc.)
├── components/       # Reusable UI components
├── services/         # Business logic and API integrations
│   └── breez/       # Breez SDK service wrapper
├── utils/           # Helper functions and utilities
├── navigation/      # Navigation configuration
├── types/           # TypeScript type definitions
└── constants/       # App-wide constants

Create placeholder files:

• file:src/services/breez/BreezService.ts: SDK initialization wrapper
• file:src/navigation/AppNavigator.tsx: Root navigation component
• file:src/screens/HomeScreen.tsx: Initial home screen
• file:src/types/index.ts: Shared TypeScript types

---

6. Update Entry Point

Modify file:App.tsx to import and render the navigation structure:

• Import AppNavigator from file:src/navigation/AppNavigator.tsx
• Wrap with NavigationContainer from @react-navigation/native
• Add basic error boundary for production stability
• Keep the component minimal, delegating logic to services

---

7. Verify Prebuild Process

Generate native projects to validate configuration:

npx expo prebuild --clean

Validation checks:

• Verify file:ios/ and file:android/ directories are created
• Check that Breez SDK plugin modifications appear in native files
• Confirm all permissions are present in file:ios/[AppName]/Info.plist
• Confirm permissions in file:android/app/src/main/AndroidManifest.xml

Note: Add ios/ and android/ to file:.gitignore as these are generated

---

8. Test Development Builds

Run the app on both platforms to ensure successful compilation:

iOS:

npx expo run:ios

Android:

npx expo run:android

Success criteria:

• App launches without crashes
• No native module linking errors
• Basic navigation renders correctly
• Console shows no critical errors

---

9. Configure Git Ignore

Update file:.gitignore to exclude generated and sensitive files:

Add entries:

• ios/ (generated by prebuild)
• android/ (generated by prebuild)
• node_modules/
• .expo/
• *.log
• .env (for future environment variables)

---

10. Document Build Process

Create or update file:README.md with setup and build instructions:

Include sections:

• Prerequisites (Node.js version, Expo CLI, EAS CLI)
• Installation steps (npm install)
• Development build commands
• EAS build commands for each platform
• Note about Expo Go incompatibility
• Troubleshooting common issues

Example commands to document:

# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development

---

Dependency Flow

graph TD
    A[Initialize Expo Project] --> B[Install Breez SDK]
    B --> C[Configure app.json]
    C --> D[Install Expo Packages]
    D --> E[Install Navigation]
    E --> F[Configure EAS Build]
    F --> G[Create Folder Structure]
    G --> H[Update Entry Point]
    H --> I[Run Prebuild]
    I --> J[Test Dev Builds]
    J --> K[Update Documentation]

Loading

---

3. Configure app.json with Breez SDK Plugin

Update file:app.json to include the Breez SDK plugin and required configurations:

Add to expo.plugins array:

• "@breeztech/breez-sdk-spark-react-native"
• "expo-camera"
• "expo-local-authentication"

Configure app metadata:

• Set expo.name to a user-friendly app name (e.g., "WaveSpace")
• Set expo.slug to "wavespace-senior-project"
• Set expo.ios.bundleIdentifier (e.g., "com.yourorg.wavespace")
• Set expo.android.package (e.g., "com.yourorg.wavespace")

Add iOS permissions in expo.ios.infoPlist:

• NSCameraUsageDescription: "Camera access is required for scanning QR codes"
• NSFaceIDUsageDescription: "Biometric authentication is required for secure wallet access"

Add Android permissions in expo.android.permissions:

• "CAMERA"
• "USE_BIOMETRIC"

Set platform requirements:

• expo.ios.deploymentTarget: "13.0"
• expo.android.minSdkVersion: 26

---

4. Install Required Expo Packages

Install all dependencies specified in the SRS Section 8.5:

npx expo install expo-secure-store expo-clipboard expo-sharing expo-constants expo-updates expo-camera expo-local-authentication

Purpose of each package:

• expo-secure-store: Encrypted storage for sensitive wallet data
• expo-clipboard: Copy payment addresses/invoices
• expo-sharing: Share payment information
• expo-constants: Access app configuration
• expo-updates: OTA update support
• expo-camera: QR code scanning for Lightning invoices
• expo-local-authentication: Biometric authentication

---

5. Install Navigation and UI Dependencies

Set up React Navigation and required UI libraries:

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-svg
npx expo install react-native-svg

Components:

• React Navigation for app navigation structure
• Native Stack Navigator for iOS/Android native transitions
• SVG support for icons and graphics

---

6. Configure EAS Build

Create file:eas.json in the project root with build profiles:

Structure:

{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {},
    "preview": {},
    "production": {}
  }
}

Profile configurations:

• development: Local development builds with debugging enabled, set developmentClient: true, distribution: "internal"
• preview: Internal testing builds, set distribution: "internal"
• production: App store/Play Store releases, set distribution: "store"

Additional settings:

• For iOS: Configure ios.simulator for development profile
• For Android: Configure android.buildType appropriately per profile

---

7. Create Project Folder Structure

Establish the following directory hierarchy in the project root:

src/
├── screens/          # Screen components (HomeScreen, WalletScreen, etc.)
├── components/       # Reusable UI components
├── services/         # Business logic and API integrations
│   └── breez/       # Breez SDK service wrapper
├── utils/           # Helper functions and utilities
├── navigation/      # Navigation configuration
├── types/           # TypeScript type definitions
└── constants/       # App-wide constants

Create placeholder files:

• file:src/services/breez/BreezService.ts: SDK initialization wrapper
• file:src/navigation/AppNavigator.tsx: Root navigation component
• file:src/screens/HomeScreen.tsx: Initial home screen
• file:src/types/index.ts: Shared TypeScript types

---

8. Update Entry Point

Modify file:App.tsx to import and render the navigation structure:

• Import AppNavigator from file:src/navigation/AppNavigator.tsx
• Wrap with NavigationContainer from @react-navigation/native
• Add basic error boundary for production stability
• Keep the component minimal, delegating logic to services

---

9. Verify Prebuild Process

Generate native projects to validate configuration:

npx expo prebuild --clean

Validation checks:

• Verify file:ios/ and file:android/ directories are created
• Check that Breez SDK plugin modifications appear in native files
• Confirm all permissions are present in file:ios/[AppName]/Info.plist
• Confirm permissions in file:android/app/src/main/AndroidManifest.xml

Note: Add ios/ and android/ to file:.gitignore as these are generated

---

10. Test Development Builds

Run the app on both platforms to ensure successful compilation:

iOS:

npx expo run:ios

Android:

npx expo run:android

Success criteria:

• App launches without crashes
• No native module linking errors
• Basic navigation renders correctly
• Console shows no critical errors

---

11. Configure Git Ignore

Update file:.gitignore to exclude generated and sensitive files:

Add entries:

• ios/ (generated by prebuild)
• android/ (generated by prebuild)
• node_modules/
• .expo/
• *.log
• .env (for future environment variables)

---

12. Document Build Process

Create or update file:README.md with setup and build instructions:

Include sections:

• Prerequisites (Node.js version, Expo CLI, EAS CLI)
• Installation steps (npm install)
• Development build commands
• EAS build commands for each platform
• Note about Expo Go incompatibility
• Troubleshooting common issues

Example commands to document:

# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development

---

Dependency Flow

graph TD
    A[Initialize Expo Project] --> B[Install Breez SDK]
    B --> C[Configure app.json]
    C --> D[Install Expo Packages]
    D --> E[Install Navigation]
    E --> F[Configure EAS Build]
    F --> G[Create Folder Structure]
    G --> H[Update Entry Point]
    H --> I[Run Prebuild]
    I --> J[Test Dev Builds]
    J --> K[Update Documentation]

Loading

---

11. Configure Git Ignore

Update file:.gitignore to exclude generated and sensitive files:

Add entries:

• ios/ (generated by prebuild)
• android/ (generated by prebuild)
• node_modules/
• .expo/
• *.log
• .env (for future environment variables)

---

12. Document Build Process

Create or update file:README.md with setup and build instructions:

Include sections:

• Prerequisites (Node.js version, Expo CLI, EAS CLI)
• Installation steps (npm install)
• Development build commands
• EAS build commands for each platform
• Note about Expo Go incompatibility
• Troubleshooting common issues

Example commands to document:

# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development

---

Acceptance Criteria Verification

Criterion	Verification Method
Project builds with prebuild and run commands	Execute npx expo prebuild, npx expo run:ios, npx expo run:android successfully
Breez SDK plugin configured	Check expo.plugins array in file:app.json contains Breez SDK entry
All SRS dependencies installed	Verify all packages in Section 8.5 appear in file:package.json
iOS 13.0+ and Android SDK 26+ requirements	Confirm deploymentTarget and minSdkVersion in file:app.json
Basic navigation skeleton present	App launches with functional navigation structure

---

Technical Considerations

Custom Development Client Required:

• Breez SDK contains native modules that cannot run in Expo Go
• All testing must use custom development builds via expo run:ios/android or EAS Build
• Developers need Xcode (macOS) for iOS builds and Android Studio for Android builds

Platform-Specific Notes:

• iOS builds require Apple Developer account for device testing
• Android builds can be tested on emulators without additional accounts
• EAS Build can generate builds in the cloud without local native tooling

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Expo project has been initialized with SDK 50+ and the Breez SDK has been installed. The foundation is in place, and the remaining work focuses on configuring native plugins, installing complementary dependencies, setting up build infrastructure, and establishing the project structure. The project requires custom development builds due to Breez SDK's native code, targeting iOS 13.0+ and Android SDK 26+.

## Approach

The implementation continues from the current state by completing the plugin and dependency configuration in app.json, installing all required Expo packages and navigation libraries, setting up EAS Build infrastructure, creating the folder structure, and verifying the build process. This approach ensures each configuration layer builds on the previous one, with validation at the end.

## Implementation Steps

### 1. Configure app.json with Breez SDK Plugin and Permissions

Update `file:app.json` to add all required plugins and platform-specific configurations:

**Add to `expo.plugins` array:**
- `"@breeztech/breez-sdk-spark-react-native"`
- `"expo-camera"`
- `"expo-local-authentication"`

**Configure app metadata:**
- Set `expo.name` to "WaveSpace" (or appropriate app name)
- Set `expo.slug` to "wavespace-senior-project"
- Set `expo.ios.bundleIdentifier` (e.g., "com.yourorg.wavespace")
- Set `expo.android.package` (e.g., "com.yourorg.wavespace")

**Add iOS permissions in `expo.ios.infoPlist`:**
- `NSCameraUsageDescription`: "Camera access is required for scanning QR codes"
- `NSFaceIDUsageDescription`: "Biometric authentication is required for secure wallet access"

**Add Android permissions in `expo.android.permissions`:**
- `"CAMERA"`
- `"USE_BIOMETRIC"`

**Set platform requirements:**
- `expo.ios.deploymentTarget`: "13.0"
- `expo.android.minSdkVersion`: 26

---

### 2. Install Required Expo Packages

Install all dependencies specified in the SRS Section 8.5:

```bash
npx expo install expo-secure-store expo-clipboard expo-sharing expo-constants expo-updates expo-camera expo-local-authentication
```

**Purpose of each package:**
- `expo-secure-store`: Encrypted storage for sensitive wallet data
- `expo-clipboard`: Copy payment addresses/invoices
- `expo-sharing`: Share payment information
- `expo-constants`: Access app configuration
- `expo-updates`: OTA update support
- `expo-camera`: QR code scanning for Lightning invoices
- `expo-local-authentication`: Biometric authentication

---

### 3. Install Navigation and UI Dependencies

Set up React Navigation and required UI libraries:

```bash
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-svg
npx expo install react-native-svg
```

**Components:**
- React Navigation for app navigation structure
- Native Stack Navigator for iOS/Android native transitions
- SVG support for icons and graphics

---

### 4. Configure EAS Build

Create `file:eas.json` in the project root with build profiles:

**Structure:**
```json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {},
    "preview": {},
    "production": {}
  }
}
```

**Profile configurations:**
- **development**: Local development builds with debugging enabled, set `developmentClient: true`, `distribution: "internal"`
- **preview**: Internal testing builds, set `distribution: "internal"`
- **production**: App store/Play Store releases, set `distribution: "store"`

**Additional settings:**
- For iOS: Configure `ios.simulator` for development profile
- For Android: Configure `android.buildType` appropriately per profile

---

### 5. Create Project Folder Structure

Establish the following directory hierarchy in the project root:

```
src/
├── screens/          # Screen components (HomeScreen, WalletScreen, etc.)
├── components/       # Reusable UI components
├── services/         # Business logic and API integrations
│   └── breez/       # Breez SDK service wrapper
├── utils/           # Helper functions and utilities
├── navigation/      # Navigation configuration
├── types/           # TypeScript type definitions
└── constants/       # App-wide constants
```

**Create placeholder files:**
- `file:src/services/breez/BreezService.ts`: SDK initialization wrapper
- `file:src/navigation/AppNavigator.tsx`: Root navigation component
- `file:src/screens/HomeScreen.tsx`: Initial home screen
- `file:src/types/index.ts`: Shared TypeScript types

---

### 6. Update Entry Point

Modify `file:App.tsx` to import and render the navigation structure:

- Import `AppNavigator` from `file:src/navigation/AppNavigator.tsx`
- Wrap with `NavigationContainer` from `@react-navigation/native`
- Add basic error boundary for production stability
- Keep the component minimal, delegating logic to services

---

### 7. Verify Prebuild Process

Generate native projects to validate configuration:

```bash
npx expo prebuild --clean
```

**Validation checks:**
- Verify `file:ios/` and `file:android/` directories are created
- Check that Breez SDK plugin modifications appear in native files
- Confirm all permissions are present in `file:ios/[AppName]/Info.plist`
- Confirm permissions in `file:android/app/src/main/AndroidManifest.xml`

**Note:** Add `ios/` and `android/` to `file:.gitignore` as these are generated

---

### 8. Test Development Builds

Run the app on both platforms to ensure successful compilation:

**iOS:**
```bash
npx expo run:ios
```

**Android:**
```bash
npx expo run:android
```

**Success criteria:**
- App launches without crashes
- No native module linking errors
- Basic navigation renders correctly
- Console shows no critical errors

---

### 9. Configure Git Ignore

Update `file:.gitignore` to exclude generated and sensitive files:

**Add entries:**
- `ios/` (generated by prebuild)
- `android/` (generated by prebuild)
- `node_modules/`
- `.expo/`
- `*.log`
- `.env` (for future environment variables)

---

### 10. Document Build Process

Create or update `file:README.md` with setup and build instructions:

**Include sections:**
- Prerequisites (Node.js version, Expo CLI, EAS CLI)
- Installation steps (`npm install`)
- Development build commands
- EAS build commands for each platform
- Note about Expo Go incompatibility
- Troubleshooting common issues

**Example commands to document:**
```bash
# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development
```

---

## Dependency Flow

```mermaid
graph TD
    A[Initialize Expo Project] --> B[Install Breez SDK]
    B --> C[Configure app.json]
    C --> D[Install Expo Packages]
    D --> E[Install Navigation]
    E --> F[Configure EAS Build]
    F --> G[Create Folder Structure]
    G --> H[Update Entry Point]
    H --> I[Run Prebuild]
    I --> J[Test Dev Builds]
    J --> K[Update Documentation]
```

---

### 3. Configure app.json with Breez SDK Plugin

Update `file:app.json` to include the Breez SDK plugin and required configurations:

**Add to `expo.plugins` array:**
- `"@breeztech/breez-sdk-spark-react-native"`
- `"expo-camera"`
- `"expo-local-authentication"`

**Configure app metadata:**
- Set `expo.name` to a user-friendly app name (e.g., "WaveSpace")
- Set `expo.slug` to "wavespace-senior-project"
- Set `expo.ios.bundleIdentifier` (e.g., "com.yourorg.wavespace")
- Set `expo.android.package` (e.g., "com.yourorg.wavespace")

**Add iOS permissions in `expo.ios.infoPlist`:**
- `NSCameraUsageDescription`: "Camera access is required for scanning QR codes"
- `NSFaceIDUsageDescription`: "Biometric authentication is required for secure wallet access"

**Add Android permissions in `expo.android.permissions`:**
- `"CAMERA"`
- `"USE_BIOMETRIC"`

**Set platform requirements:**
- `expo.ios.deploymentTarget`: "13.0"
- `expo.android.minSdkVersion`: 26

---

### 4. Install Required Expo Packages

Install all dependencies specified in the SRS Section 8.5:

```bash
npx expo install expo-secure-store expo-clipboard expo-sharing expo-constants expo-updates expo-camera expo-local-authentication
```

**Purpose of each package:**
- `expo-secure-store`: Encrypted storage for sensitive wallet data
- `expo-clipboard`: Copy payment addresses/invoices
- `expo-sharing`: Share payment information
- `expo-constants`: Access app configuration
- `expo-updates`: OTA update support
- `expo-camera`: QR code scanning for Lightning invoices
- `expo-local-authentication`: Biometric authentication

---

### 5. Install Navigation and UI Dependencies

Set up React Navigation and required UI libraries:

```bash
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-svg
npx expo install react-native-svg
```

**Components:**
- React Navigation for app navigation structure
- Native Stack Navigator for iOS/Android native transitions
- SVG support for icons and graphics

---

### 6. Configure EAS Build

Create `file:eas.json` in the project root with build profiles:

**Structure:**
```json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {},
    "preview": {},
    "production": {}
  }
}
```

**Profile configurations:**
- **development**: Local development builds with debugging enabled, set `developmentClient: true`, `distribution: "internal"`
- **preview**: Internal testing builds, set `distribution: "internal"`
- **production**: App store/Play Store releases, set `distribution: "store"`

**Additional settings:**
- For iOS: Configure `ios.simulator` for development profile
- For Android: Configure `android.buildType` appropriately per profile

---

### 7. Create Project Folder Structure

Establish the following directory hierarchy in the project root:

```
src/
├── screens/          # Screen components (HomeScreen, WalletScreen, etc.)
├── components/       # Reusable UI components
├── services/         # Business logic and API integrations
│   └── breez/       # Breez SDK service wrapper
├── utils/           # Helper functions and utilities
├── navigation/      # Navigation configuration
├── types/           # TypeScript type definitions
└── constants/       # App-wide constants
```

**Create placeholder files:**
- `file:src/services/breez/BreezService.ts`: SDK initialization wrapper
- `file:src/navigation/AppNavigator.tsx`: Root navigation component
- `file:src/screens/HomeScreen.tsx`: Initial home screen
- `file:src/types/index.ts`: Shared TypeScript types

---

### 8. Update Entry Point

Modify `file:App.tsx` to import and render the navigation structure:

- Import `AppNavigator` from `file:src/navigation/AppNavigator.tsx`
- Wrap with `NavigationContainer` from `@react-navigation/native`
- Add basic error boundary for production stability
- Keep the component minimal, delegating logic to services

---

### 9. Verify Prebuild Process

Generate native projects to validate configuration:

```bash
npx expo prebuild --clean
```

**Validation checks:**
- Verify `file:ios/` and `file:android/` directories are created
- Check that Breez SDK plugin modifications appear in native files
- Confirm all permissions are present in `file:ios/[AppName]/Info.plist`
- Confirm permissions in `file:android/app/src/main/AndroidManifest.xml`

**Note:** Add `ios/` and `android/` to `file:.gitignore` as these are generated

---

### 10. Test Development Builds

Run the app on both platforms to ensure successful compilation:

**iOS:**
```bash
npx expo run:ios
```

**Android:**
```bash
npx expo run:android
```

**Success criteria:**
- App launches without crashes
- No native module linking errors
- Basic navigation renders correctly
- Console shows no critical errors

---

### 11. Configure Git Ignore

Update `file:.gitignore` to exclude generated and sensitive files:

**Add entries:**
- `ios/` (generated by prebuild)
- `android/` (generated by prebuild)
- `node_modules/`
- `.expo/`
- `*.log`
- `.env` (for future environment variables)

---

### 12. Document Build Process

Create or update `file:README.md` with setup and build instructions:

**Include sections:**
- Prerequisites (Node.js version, Expo CLI, EAS CLI)
- Installation steps (`npm install`)
- Development build commands
- EAS build commands for each platform
- Note about Expo Go incompatibility
- Troubleshooting common issues

**Example commands to document:**
```bash
# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development
```

---

## Dependency Flow

```mermaid
graph TD
    A[Initialize Expo Project] --> B[Install Breez SDK]
    B --> C[Configure app.json]
    C --> D[Install Expo Packages]
    D --> E[Install Navigation]
    E --> F[Configure EAS Build]
    F --> G[Create Folder Structure]
    G --> H[Update Entry Point]
    H --> I[Run Prebuild]
    I --> J[Test Dev Builds]
    J --> K[Update Documentation]
```

---

### 11. Configure Git Ignore

Update `file:.gitignore` to exclude generated and sensitive files:

**Add entries:**
- `ios/` (generated by prebuild)
- `android/` (generated by prebuild)
- `node_modules/`
- `.expo/`
- `*.log`
- `.env` (for future environment variables)

---

### 12. Document Build Process

Create or update `file:README.md` with setup and build instructions:

**Include sections:**
- Prerequisites (Node.js version, Expo CLI, EAS CLI)
- Installation steps (`npm install`)
- Development build commands
- EAS build commands for each platform
- Note about Expo Go incompatibility
- Troubleshooting common issues

**Example commands to document:**
```bash
# Install dependencies
npm install

# Generate native projects
npx expo prebuild

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# EAS builds
eas build --platform ios --profile development
eas build --platform android --profile development
```

---

## Acceptance Criteria Verification

| Criterion | Verification Method |
|-----------|-------------------|
| Project builds with prebuild and run commands | Execute `npx expo prebuild`, `npx expo run:ios`, `npx expo run:android` successfully |
| Breez SDK plugin configured | Check `expo.plugins` array in `file:app.json` contains Breez SDK entry |
| All SRS dependencies installed | Verify all packages in Section 8.5 appear in `file:package.json` |
| iOS 13.0+ and Android SDK 26+ requirements | Confirm `deploymentTarget` and `minSdkVersion` in `file:app.json` |
| Basic navigation skeleton present | App launches with functional navigation structure |

---

## Technical Considerations

**Custom Development Client Required:**
- Breez SDK contains native modules that cannot run in Expo Go
- All testing must use custom development builds via `expo run:ios/android` or EAS Build
- Developers need Xcode (macOS) for iOS builds and Android Studio for Android builds

**Platform-Specific Notes:**
- iOS builds require Apple Developer account for device testing
- Android builds can be tested on emulators without additional accounts
- EAS Build can generate builds in the cloud without local native tooling

---

Execution Information

Branch: main
Commit: 342104b