Cross-platform development patterns. Use when writing platform-specific code, handling platform differences, or working with native/web/desktop/extension platforms. Triggers on platform, native, web, desktop, extension, iOS, Android, Electron, platformEnv, .native.ts, .web.ts, .desktop.ts, .ext.ts, cross-platform, multi-platform.
Patterns for writing platform-specific code in cross-platform applications.
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 |
Use a centralized platform detection utility:
// ✅ CORRECT - Use centralized platform detection
import { platformEnv } from '@{scope}/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 (inconsistent, error-prone)
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
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.
// 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.
Topics covered:
platformEnvplatformEnv instead of direct checks/coding-patterns - General coding patterns/architecture - Project structure and imports