>_SkillsHub▋

> react-native-platform-specific

Handling iOS and Android differences with Platform API and native modules. Use when handling platform-specific behavior or integrating native modules in React Native. (triggers: **/*.tsx, **/*.ts, **/*.ios.*, **/*.android.*, Platform, Platform.select, native-module, ios, android)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-native-platform-specific?format=md"
SKILL.md•react-native-platform-specific

React Native Platform-Specific Code

Priority: P1 (OPERATIONAL)

Platform Detection

import { Platform } from 'react-native';

// Simple Check
if (Platform.OS === 'ios') {
  // iOS-specific code
}

// Object Selection
const styles = Platform.select({
  ios: { paddingTop: 20 },
  android: { paddingTop: 0 },
  default: { paddingTop: 10 }, // Fallback
});

File Extensions

Use .ios. and .android. for platform-specific files:

Button.tsx          # Shared
Button.ios.tsx      # iOS-specific
Button.android.tsx  # Android-specific

React Native automatically picks the right file:

  • iOS: Button.ios.tsx → Button.tsx (fallback)
  • Android: Button.android.tsx → Button.tsx (fallback)

Native Modules

  • Expo: Use Expo modules when available (expo-* packages).
  • Bare RN: Use community modules (@react-native-community/*).
  • Custom: Write native modules in Swift/Kotlin when needed.

Anti-Patterns

  • No Excessive Branching: Extract to separate files if logic diverges.
  • No Hardcoded Version Checks: Use feature detection.
  • No Ignoring Android: Test on both platforms.

Reference & Examples

See references/native-modules.md for Native Bridge (iOS/Android), Expo JSI Modules, and SafeArea handling.

Related Topics

components | styling

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#android#backend#ios#java#mobile#react
└────────────