1k-cross-platform

OneKey Cross-Platform Development

Platform Extensions

Use platform extensions for platform-specific implementations:

• .native.ts for React Native (iOS/Android)
• .web.ts for web platform
• .desktop.ts for desktop platform
• .ext.ts for browser extension

Platform Detection

Use import platformEnv from '@onekeyhq/shared/src/platformEnv' for platform detection:

import platformEnv from '@onekeyhq/shared/src/platformEnv';

if (platformEnv.isNative) { // React Native specific code }

if (platformEnv.isWeb) { // Web specific code }

if (platformEnv.isDesktop) { // Desktop (Electron) specific code }

if (platformEnv.isExtension) { // Browser extension specific code }

## Key Principles

- UI components should work consistently across all platforms
- Keep platform-specific code in separate files with appropriate extensions
- Minimize platform-specific code by keeping common logic separate
- Test across all target platforms

## Common Patterns

### Platform-Specific File Structure

MyComponent/ ├── index.ts # Main entry, common logic ├── MyComponent.tsx # Shared component ├── MyComponent.native.tsx # React Native specific ├── MyComponent.web.tsx # Web specific ├── MyComponent.desktop.tsx # Desktop specific └── MyComponent.ext.tsx # Extension specific

### Conditional Platform Logic
```typescript
// GOOD: Use platformEnv
import platformEnv from '@onekeyhq/shared/src/platformEnv';

function getStoragePath() {
  if (platformEnv.isNative) {
    return 'file://...';
  }
  if (platformEnv.isDesktop) {
    return '/path/to/storage';
  }
  return 'indexeddb://...';
}

// BAD: Direct platform checks
if (typeof window !== 'undefined') { } // ❌
if (process.env.REACT_APP_PLATFORM === 'web') { } // ❌

Platform-Specific Imports

// index.ts - Auto-resolves based on platform
export * from './MyComponent';

// The bundler will automatically pick:
// - MyComponent.native.ts on mobile
// - MyComponent.web.ts on web
// - MyComponent.desktop.ts on desktop
// - MyComponent.ext.ts on extension

Platform Considerations

Extension (Chrome, Firefox, Edge, Brave)

• MV3/service worker lifetimes
• Permissions and CSP
• Background script limitations
• Cross-origin restrictions

Mobile (iOS/Android)

• WebView limitations
• Native modules
• Background/foreground states
• Deep linking

Desktop (Electron)

• Security boundaries
• IPC communication
• nodeIntegration settings
• File system access

Web

• CORS restrictions
• Storage limitations (localStorage, IndexedDB)
• XSS prevention
• Bundle size optimization