OneKey cross-platform patterns, platform files, platformEnv, and supported OS/SDK requirements.
56
64%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./.skillshare/skills/1k-cross-platform/SKILL.mdPatterns for writing platform-specific code in OneKey.
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 |
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') { }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 componentsMyComponent/
├── 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 specificThe bundler automatically resolves the correct file based on platform.
// 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),
};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:
platformEnvplatformEnv instead of direct checks/1k-coding-patterns - General coding patterns/1k-architecture - Project structure and importsd71e6b7
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.