CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-unimodules--core

Deprecated compatibility wrapper that provides backward compatibility for applications migrating from legacy Unimodules infrastructure to Expo Modules API

Pending
Overview
Eval results
Files

platform-utilities.mddocs/

Platform Utilities

Extended platform detection and capability checking beyond React Native's built-in Platform, providing comprehensive environment detection for cross-platform development.

Capabilities

Platform Object

Enhanced platform detection with additional capabilities and environment checks.

/**
 * Extended platform utilities with capability detection
 */
interface PlatformInterface {
  /**
   * Current platform OS
   */
  OS: PlatformOSType;
  
  /**
   * Select platform-specific values
   */
  select: <T>(specifics: { [platform in PlatformSelectOSType]?: T }) => T;
  
  /**
   * Whether DOM API is available
   */
  isDOMAvailable: boolean;
  
  /**
   * Whether window event listeners can be attached
   */
  canUseEventListeners: boolean;
  
  /**
   * Whether screen properties can be inspected
   */
  canUseViewport: boolean;
  
  /**
   * Whether JavaScript is executing remotely
   */
  isAsyncDebugging: boolean;
}

const Platform: PlatformInterface;

Usage Examples:

import { Platform } from "@unimodules/core";

// Basic platform detection
console.log('Running on:', Platform.OS); // 'ios', 'android', or 'web'

// Platform-specific logic
if (Platform.OS === 'ios') {
  // iOS-specific code
} else if (Platform.OS === 'android') {
  // Android-specific code
} else if (Platform.OS === 'web') {
  // Web-specific code
}

// Check capabilities
if (Platform.isDOMAvailable) {
  // Safe to use DOM APIs
  document.addEventListener('click', handler);
}

if (Platform.canUseEventListeners) {
  // Safe to attach window event listeners
  window.addEventListener('resize', handleResize);
}

if (Platform.canUseViewport) {
  // Safe to inspect screen properties
  console.log('Screen width:', window.screen.width);
}

if (Platform.isAsyncDebugging) {
  console.warn('Running in remote debugger - synchronous native calls unavailable');
}

Platform Selection

Select values based on the current platform with fallback support.

/**
 * Platform-specific value selection
 */
type PlatformSelect = <T>(specifics: { 
  [platform in PlatformSelectOSType]?: T 
}) => T;

type PlatformSelectOSType = 
  | 'ios' 
  | 'android' 
  | 'web' 
  | 'native'    // Matches ios or android
  | 'electron'  // Electron apps
  | 'default';  // Fallback value

Usage Examples:

import { Platform } from "@unimodules/core";

// Select platform-specific values
const fontSize = Platform.select({
  ios: 16,
  android: 14,
  web: 18,
  default: 16
});

// Platform-specific components
const StatusBarHeight = Platform.select({
  ios: 20,
  android: 24,
  web: 0,
  default: 0
});

// Platform-specific styles
const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.select({
      ios: 20,
      android: 10,
      default: 0
    }),
    ...Platform.select({
      native: {
        // Applies to both iOS and Android
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      web: {
        // Web-specific shadow
        boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.25)',
      }
    })
  }
});

// Complex platform-specific configuration
const apiConfig = Platform.select({
  ios: {
    baseURL: 'https://api-ios.example.com',
    timeout: 5000,
    retries: 3
  },
  android: {
    baseURL: 'https://api-android.example.com',
    timeout: 7000,
    retries: 2
  },
  web: {
    baseURL: 'https://api-web.example.com',
    timeout: 10000,
    retries: 1
  },
  default: {
    baseURL: 'https://api.example.com',
    timeout: 5000,
    retries: 2
  }
});

Environment Capability Detection

Detect specific environment capabilities for safe feature usage.

Usage Examples:

import { Platform } from "@unimodules/core";

// DOM availability check
function setupDocumentListeners() {
  if (Platform.isDOMAvailable) {
    document.addEventListener('visibilitychange', () => {
      console.log('Visibility changed:', document.visibilityState);
    });
  } else {
    console.log('DOM not available - skipping document listeners');
  }
}

// Window event listeners
function setupWindowListeners() {
  if (Platform.canUseEventListeners) {
    window.addEventListener('online', () => {
      console.log('Network back online');
    });
    
    window.addEventListener('offline', () => {
      console.log('Network went offline');
    });
  }
}

// Viewport/screen detection
function getScreenInfo() {
  if (Platform.canUseViewport) {
    return {
      width: window.screen.width,
      height: window.screen.height,
      orientation: window.screen.orientation?.type || 'unknown'
    };
  }
  return null;
}

// Debugging detection
function performanceOptimization() {
  if (Platform.isAsyncDebugging) {
    console.warn('Remote debugging detected - disabling performance-sensitive features');
    return false;
  }
  return true;
}

Advanced Usage

Custom Platform Detection

import { Platform } from "@unimodules/core";

// Custom platform utilities
const PlatformUtils = {
  isNative: Platform.OS === 'ios' || Platform.OS === 'android',
  isMobile: Platform.OS === 'ios' || Platform.OS === 'android',
  isTablet: Platform.OS === 'ios' && Platform.isPad, // Note: isPad from React Native
  isDesktop: Platform.OS === 'web' && Platform.canUseViewport && window.screen.width > 1024,
  
  supportsNativeModules: Platform.OS !== 'web',
  supportsWebAPIs: Platform.isDOMAvailable,
  supportsBackgroundTasks: Platform.OS === 'ios' || Platform.OS === 'android',
};

// Usage
if (PlatformUtils.isNative) {
  // Use native features
} else if (PlatformUtils.supportsWebAPIs) {
  // Use web APIs
}

Feature Detection Pattern

import { Platform } from "@unimodules/core";

class FeatureDetector {
  static canUseCamera(): boolean {
    return Platform.OS === 'ios' || Platform.OS === 'android';
  }
  
  static canUseFileSystem(): boolean {
    return Platform.OS !== 'web' || Platform.isDOMAvailable;
  }
  
  static canUseNotifications(): boolean {
    if (Platform.OS === 'web') {
      return Platform.isDOMAvailable && 
             'Notification' in window && 
             'serviceWorker' in navigator;
    }
    return true; // Native platforms support notifications
  }
  
  static canUseBiometrics(): boolean {
    return Platform.OS === 'ios' || Platform.OS === 'android';
  }
}

// Usage
if (FeatureDetector.canUseCamera()) {
  // Initialize camera
}

if (FeatureDetector.canUseNotifications()) {
  // Setup push notifications
}

Runtime Environment Detection

import { Platform } from "@unimodules/core";

// Detect specific runtime environments
const RuntimeEnvironment = {
  isExpoClient: typeof expo !== 'undefined',
  isStandalone: Platform.OS !== 'web' && typeof expo === 'undefined',
  isWeb: Platform.OS === 'web',
  isElectron: Platform.select({ electron: true, default: false }),
  
  // Development vs production
  isDevelopment: __DEV__,
  isProduction: !__DEV__,
  
  // Debugging
  isRemoteDebugging: Platform.isAsyncDebugging,
  hasDevTools: Platform.isDOMAvailable && window.__REACT_DEVTOOLS_GLOBAL_HOOK__,
};

// Conditional initialization
if (RuntimeEnvironment.isDevelopment) {
  console.log('Development mode - enabling debug features');
}

if (RuntimeEnvironment.isRemoteDebugging) {
  console.warn('Remote debugging - some features may not work correctly');
}

Types

type PlatformOSType = 'ios' | 'android' | 'windows' | 'macos' | 'web';

type PlatformSelectOSType = 
  | PlatformOSType 
  | 'native' 
  | 'electron' 
  | 'default';

interface EnvironmentCapabilities {
  isDOMAvailable: boolean;
  canUseEventListeners: boolean;
  canUseViewport: boolean;
  isAsyncDebugging: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-unimodules--core

docs

error-handling.md

event-management.md

index.md

native-modules.md

native-views.md

permissions.md

platform-utilities.md

utilities.md

tile.json