<< All versions
Skill v1.0.0
currentLLM-judged scan90/100onekeyhq/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:
| Extension | Platform | |
|---|---|---|
.native.ts | React Native (iOS/Android) | |
.web.ts | Web platform | |
.desktop.ts | Desktop (Electron) | |
.ext.ts | Browser extension |
Platform Detection
ALWAYS use `platformEnv` for platform detection:
typescript
// ✅ CORRECTimport 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 checksif (typeof window !== 'undefined') { }if (process.env.REACT_APP_PLATFORM === 'web') { }
Available Platform Flags
typescript
platformEnv.isNative // React Native (iOS or Android)platformEnv.isWeb // Web browserplatformEnv.isDesktop // Electron desktop appplatformEnv.isExtension // Browser extensionplatformEnv.isIOS // iOS specificallyplatformEnv.isAndroid // Android specificallyplatformEnv.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 interfaceexport interface IStorage {get(key: string): Promise<string | null>;set(key: string, value: string): Promise<void>;}// storage.native.tsimport 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.tsexport const storage: IStorage = {get: async (key) => localStorage.getItem(key),set: async (key, value) => localStorage.setItem(key, value),};// storage.desktop.tsimport { 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
platformEnvinstead 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