<< All versions

Skill v1.0.0

currentLLM-judged scan90/100
onekeyhq/app-monorepo/1k-cross-platform
──Details
PublishedOctober 24, 2026 at 07:52 AM
Content Hashsha256:b83da3f57102eee3...
Git SHA53a793b25463
──Files
Files (1 file, 4.1 KB)
SKILL.md4.1 KBactive
SKILL.md · 149 lines · 4.1 KB

version: "1.0.0" name: 1k-cross-platform description: OneKey cross-platform patterns, platform files, platformEnv, and supported OS/SDK requirements. allowed-tools: Read, Grep, Glob, Bash


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:

typescript
// ✅ 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

typescript
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

typescript
// 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
All versions