CtrlK
BlogDocsLog inGet started
Tessl Logo

1k-cross-platform

OneKey cross-platform patterns, platform files, platformEnv, and supported OS/SDK requirements.

56

Quality

64%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.skillshare/skills/1k-cross-platform/SKILL.md
SKILL.md
Quality
Evals
Security

Cross-Platform Development

Patterns for writing platform-specific code in OneKey.

Platform Extensions

Use platform extensions for platform-specific implementations:

ExtensionPlatform
.native.tsReact Native (iOS/Android)
.web.tsWeb platform
.desktop.tsDesktop (Electron)
.ext.tsBrowser extension

Platform Detection

ALWAYS use platformEnv for platform detection:

// ✅ CORRECT
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
}

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

Available Platform Flags

platformEnv.isNative      // React Native (iOS or Android)
platformEnv.isWeb         // Web browser
platformEnv.isDesktop     // Electron desktop app
platformEnv.isExtension   // Browser extension
platformEnv.isIOS         // iOS specifically
platformEnv.isAndroid     // Android specifically
platformEnv.isWebEmbed    // Embedded web components

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

The bundler automatically resolves the correct file based on platform.

Example: Platform-Specific Storage

// storage.ts - shared interface
export interface IStorage {
  get(key: string): Promise<string | null>;
  set(key: string, value: string): Promise<void>;
}

// storage.native.ts
import AsyncStorage from '@react-native-async-storage/async-storage';

export const storage: IStorage = {
  get: (key) => AsyncStorage.getItem(key),
  set: (key, value) => AsyncStorage.setItem(key, value),
};

// storage.web.ts
export const storage: IStorage = {
  get: async (key) => localStorage.getItem(key),
  set: async (key, value) => localStorage.setItem(key, value),
};

// storage.desktop.ts
import { ipcRenderer } from 'electron';

export const storage: IStorage = {
  get: (key) => ipcRenderer.invoke('storage:get', key),
  set: (key, value) => ipcRenderer.invoke('storage:set', key, value),
};

Detailed Guide

For comprehensive cross-platform patterns and platform considerations, see cross-platform.md.

For current development tool and minimum platform versions, see platform-requirements.md. Verify version values against the referenced repository files before relying on them.

Topics covered:

  • Platform extensions and file structure
  • Platform detection with platformEnv
  • Platform-specific imports
  • Platform considerations (Extension, Mobile, Desktop, Web)
  • Real-world examples
  • Cross-platform checklist

Platform Considerations

Extension (Chrome, Firefox, Edge, Brave)

  • MV3/service worker lifetimes, permissions, CSP, background script limitations

Mobile (iOS/Android)

  • WebView limitations, native modules, background/foreground states, deep linking

Desktop (Electron)

  • Security boundaries, IPC communication, file system access

Web

  • CORS restrictions, storage limitations, XSS prevention, bundle size

Checklist

  • Platform-specific code uses correct file extension
  • Uses platformEnv instead of direct checks
  • Common logic extracted to shared files
  • Tested on all target platforms

Related Skills

  • /1k-coding-patterns - General coding patterns
  • /1k-architecture - Project structure and imports
Repository
OneKeyHQ/app-monorepo
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.