Mobile Platform Development Guide¶

This guide provides comprehensive information for developers working on the Mobile Platform.

Development Environment Setup¶

Prerequisites¶

Node.js (16.0 or higher)
React Native CLI (latest)
Xcode (for iOS development)
Android Studio (for Android development)
Git (for version control)

Installation¶

Clone Repository

git clone https://github.com/optim/mobile-platform.git
cd mobile-platform

Install Dependencies

npm install
# or
yarn install

iOS Setup

cd ios
pod install
cd ..

Environment Configuration

cp .env.example .env
# Edit .env with your configuration

Project Structure¶

mobile-platform/
├── src/
│   ├── components/          # Reusable UI components
│   ├── screens/            # Screen components
│   ├── navigation/         # Navigation configuration
│   ├── services/           # API and business logic
│   ├── utils/              # Utility functions
│   ├── hooks/              # Custom React hooks
│   └── types/              # TypeScript type definitions
├── ios/                    # iOS-specific code
├── android/                # Android-specific code
├── __tests__/             # Test files
└── docs/                  # Documentation

Development Workflow¶

Running the App¶

Start Metro Bundler

npm start
# or
yarn start

Run on iOS

npm run ios
# or
yarn ios

Run on Android
```
npm run android
# or
yarn android
```

Development Commands¶

# Type checking
npm run type-check

# Linting
npm run lint
npm run lint:fix

# Testing
npm run test
npm run test:watch
npm run test:coverage

# Build
npm run build:ios
npm run build:android

Architecture¶

Component Architecture¶

The app follows a component-based architecture with:

Atomic Design - Components organized by complexity
Container/Presenter - Separation of logic and presentation
Hooks - Custom hooks for business logic

State Management¶

// Using Redux Toolkit
interface AppState {
  auth: AuthState;
  documents: DocumentState;
  sync: SyncState;
  ui: UIState;
}

// React Navigation v6
type RootStackParamList = {
  Auth: undefined;
  Main: undefined;
  Document: { documentId: string };
};

API Integration¶

Service Layer¶

// services/api.ts
class APIService {
  async getDocuments(): Promise<Document[]> {
    const response = await fetch("/api/documents");
    return response.json();
  }
}

Error Handling¶

// utils/errorHandler.ts
export const handleAPIError = (error: APIError) => {
  // Centralized error handling logic
};

Testing¶

Test Structure¶

__tests__/
├── components/         # Component tests
├── screens/           # Screen tests
├── services/          # Service tests
├── utils/             # Utility tests
└── __mocks__/         # Mock files

Testing Best Practices¶

Unit Tests - Test individual components and functions
Integration Tests - Test component interactions
E2E Tests - Test complete user workflows

Example Test¶

import { render, fireEvent } from "@testing-library/react-native";
import { LoginScreen } from "../src/screens/LoginScreen";

describe("LoginScreen", () => {
  it("should handle login submission", () => {
    const mockLogin = jest.fn();
    const { getByTestId } = render(<LoginScreen onLogin={mockLogin} />);

    fireEvent.press(getByTestId("login-button"));
    expect(mockLogin).toHaveBeenCalled();
  });
});

Build and Deployment¶

iOS Build¶

Configure Signing

# Update provisioning profiles
# Configure certificates in Xcode

Build for Release
```
npm run build:ios:release
```

Android Build¶

Generate Keystore

keytool -genkey -v -keystore release-key.keystore -alias release-key -keyalg RSA -keysize 2048 -validity 10000

Build for Release
```
npm run build:android:release
```

Code Style Guidelines¶

TypeScript¶

Use strict TypeScript configuration
Define interfaces for all data structures
Prefer type inference where possible

React Native¶

Use functional components with hooks
Follow React Native naming conventions
Use TypeScript for prop types

Styling¶

// Use StyleSheet.create for styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

Performance Optimization¶

Best Practices¶

Image Optimization
Use appropriate image formats
Implement lazy loading
Optimize image sizes
List Performance
Use FlatList for large datasets
Implement proper keyExtractor
Use getItemLayout when possible
Bundle Size
Use dynamic imports
Implement code splitting
Remove unused dependencies

Debugging¶

Development Tools¶

Flipper - Debugging and inspection
Reactotron - React Native debugging
VS Code Debugger - Breakpoint debugging

Common Issues¶

Metro Bundle Issues

npm start -- --reset-cache

iOS Build Issues

cd ios && pod install

Android Build Issues
```
cd android && ./gradlew clean
```

Contributing¶

Pull Request Process¶

Create feature branch from develop
Implement changes with tests
Update documentation
Submit PR for review

Commit Message Format¶

type(scope): description

feat(auth): add biometric authentication
fix(sync): resolve offline data sync issue
docs(api): update API documentation

Resources¶

For development questions, contact the Mobile Development Team or create an issue in the repository.