skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

ios-patterns

Implement iOS-specific UI patterns in React Native with code examples.

3|Updated Dec 30, 2025
Search Tags:#ios#react native#shadows#ui patterns#platform specific#safe area
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill ios-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ios-patterns
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/platform/ios-patterns
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill ios-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides best practices and code examples for implementing common iOS-specific UI patterns and platform features in React Native, ensuring a native look, feel, and behavior.

Core Features & Use Cases

  • Platform Detection: Use PlatformIs.ios() for clear, type-safe iOS checks.
  • Safe Area Handling: Implement SafeAreaView with explicit edges or useSafeAreaInsets for notches and home indicators.
  • iOS Shadows: Apply consistent shadows using Zest tokens for cross-platform compatibility.
  • Device Info: Access device and OS details using react-native-device-info.
  • Use Case: When building a new screen with a custom header that needs to respect the iPhone notch, you would use this Skill to correctly apply top safe area insets.

Quick Start

Apply iOS-specific shadow patterns to a React Native component using Zest tokens.

Frequently Asked Questions about ios-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle iPhone notch and safe area insets in React Native?▼

Handle iPhone notch layouts in React Native by applying SafeAreaView with explicit edges or the useSafeAreaInsets hook. This ensures custom headers and screen content respect native safe area boundaries and home indicators.

What is the best way to apply iOS shadows in React Native?▼

Apply consistent iOS shadows in React Native by utilizing Zest tokens for cross-platform compatibility. This approach standardizes shadow implementation across UI components while maintaining a native look and feel.

How do I detect iOS platform specifically in React Native?▼

Detect iOS specifically in React Native using the PlatformIs.ios() method for clear, type-safe platform checks. This ensures platform-specific UI rendering logic only executes on targeted Apple devices.

How do I access device and OS information in React Native?▼

Access device and OS details in React Native by integrating the react-native-device-info library. This allows your application to retrieve specific hardware and operating system information for iOS-specific UI patterns.

What are common pitfalls when implementing platform specific UI in React Native?▼

Common pitfalls when implementing platform specific UI in React Native include incorrect safe area handling and inconsistent shadow application. Following established best practices for testing helps avoid these native look and feel errors.

Does ios-patterns provide code examples for platform specific rendering?▼

Yes, comprehensive guidance and code examples are provided for iOS-specific platform rendering in React Native. It covers platform detection, safe area handling, shadow implementation, and device information access.

Related Skills

Explore More Software Engineering Skills→
FernanSuozaFernanSuoza

qa-mobile-ui-verification

Verify mobile UI behavior across Android, iOS, React Native, hybrid, and WebView surfaces.

Community
Advanced
HigorAlvesHigorAlves
4

mobile-ios-design

Guide iOS interface design with SwiftUI layouts and Apple Human Interface Guidelines.

Community
Intermediate
guichefferguicheffer
3

android-patterns

Provide idiomatic Android patterns for React Native apps.

Community
Intermediate
FilenCloudDiensteFilenCloudDienste
34

building-native-ui

Guide native UI implementation for Expo Router apps with iOS-focused conventions.

Official
Advanced