react-native-platform-specific

Resolve iOS and Android differences using Platform API and native modules in React Native. 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)

385 stars

byHoangNguyen0403

View on GitHub Installation ↓

Best use case

react-native-platform-specific is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using react-native-platform-specific should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/react-native-platform-specific/SKILL.md --create-dirs "https://raw.githubusercontent.com/HoangNguyen0403/agent-skills-standard/main/skills/react-native/react-native-platform-specific/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/react-native-platform-specific/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How react-native-platform-specific Compares

Feature / Agent	react-native-platform-specific	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

AI Agents for Coding

Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.

SKILL.md Source

# React Native Platform-Specific Code

## **Priority: P1 (OPERATIONAL)**

## Split Platform-Specific Files

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

See [native modules reference](references/native-modules.md) for platform-specific file naming, `Platform.select` usage, and native bridge examples.

React Native automatically picks the right file:

- **iOS**: Button.ios.tsx then Button.tsx (fallback)
- **Android**: Button.android.tsx then Button.tsx (fallback)

## Apply Platform Branching Inline

Use `Platform.select` or `Platform.OS` for small differences within a shared file.

## Integrate 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 significantly.
- **No Hardcoded Version Checks**: Use feature detection.
- **No Ignoring Android**: Test on both platforms.

## References

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

Related Skills

react-typescript

385

from HoangNguyen0403/agent-skills-standard

Type React components and hooks with TypeScript patterns. Use when typing React props, hooks, event handlers, or component generics in TypeScript. (triggers: **/*.tsx, ReactNode, FC, PropsWithChildren, ComponentProps)

react-tooling

385

from HoangNguyen0403/agent-skills-standard

Configure debugging, bundle analysis, and ecosystem tools for React applications. Use when setting up Vite/webpack build tooling, analyzing bundle size, debugging re-renders with React DevTools, or configuring ESLint and StrictMode for React projects. (triggers: package.json, devtool, bundle, strict mode, profile)

react-testing

385

from HoangNguyen0403/agent-skills-standard

Test React components with RTL and Jest/Vitest. Use when writing React component tests with React Testing Library, Jest, or Vitest. (triggers: **/*.test.tsx, **/*.spec.tsx, render, screen, userEvent, expect)

react-state-management

385

from HoangNguyen0403/agent-skills-standard

Select and implement local, global, and server state patterns in React. Use when choosing or implementing state management (Context, Zustand, Redux, React Query) in React. (triggers: **/*.tsx, **/*.jsx, state, useReducer, context, store, props)

react-security

385

from HoangNguyen0403/agent-skills-standard

Prevent XSS, secure auth flows, and harden React client-side applications. Use when preventing XSS, securing auth flows, or auditing third-party dependencies in React. (triggers: **/*.tsx, **/*.jsx, dangerouslySetInnerHTML, token, auth, xss)

react-performance

385

from HoangNguyen0403/agent-skills-standard

Optimize React rendering, bundle size, and data fetching performance. Use when optimizing React rendering performance, reducing re-renders, or improving bundle size. (triggers: **/*.tsx, **/*.jsx, waterfall, bundle, lazy, suspense, dynamic)

react-hooks

385

from HoangNguyen0403/agent-skills-standard

Write efficient React functional components and hooks. Use when writing custom hooks, optimizing useEffect, or working with useMemo/useCallback in React. (triggers: **/*.tsx, **/*.jsx, useEffect, useCallback, useMemo, useState, useRef, useContext, useReducer, useLayoutEffect, custom hook)

react-component-patterns

385

from HoangNguyen0403/agent-skills-standard

Build modern React component architecture with composition patterns. Use when designing reusable React components, applying composition patterns, or structuring component hierarchies. (triggers: **/*.jsx, **/*.tsx, component, props, children, composition, hoc, render-props)

react-native-testing

385

from HoangNguyen0403/agent-skills-standard

Test React Native components with Jest and React Native Testing Library. Use when writing Jest or React Native Testing Library tests for React Native components. (triggers: **/*.test.tsx, **/*.spec.tsx, __tests__/**, test, testing, jest, render, fireEvent, waitFor)

react-native-styling

385

from HoangNguyen0403/agent-skills-standard

Style React Native apps with StyleSheet API, Flexbox, theming, and responsive design. Use when implementing React Native styles, theming, Flexbox layouts, or responsive design. (triggers: **/*.tsx, **/*.ts, StyleSheet, style, theme, responsive, flexbox)

react-native-state-management

385

from HoangNguyen0403/agent-skills-standard

Implement local and global state with Context, Zustand, and Redux Toolkit in React Native. Use when choosing or implementing state management in React Native with Context, Zustand, or Redux. (triggers: **/*.tsx, **/*.ts, useState, useContext, zustand, redux, state-management)

react-native-security

385

from HoangNguyen0403/agent-skills-standard

Secure storage, network traffic, and deep links in React Native mobile apps. Use when implementing secure storage, certificate pinning, or deep link validation in React Native. (triggers: **/*.tsx, **/*.ts, security, keychain, secure-storage, deep-link, certificate-pinning)