react-to-ios

Files (1)

• SKILL.md

SKILL.md (first lines)

# React to iOS: Feature Parity Implementation

Use React/React Native code as the reference to implement the equivalent native iOS feature. Not a literal translation - understand what the React code does, then implement it idiomatically for iOS.

**Use this when:**
- Porting a feature from React/React Native to native iOS
- React is the "source of truth" for a feature
- Building native iOS alternatives to web components
- Migrating from React Native to native Swift

## Key Principle

```
React Code → Understand Feature → Match iOS Codebase Patterns → Implement
                 (what)                  (how it's done here)
```

**Preserved:** Feature behavior, data structure shapes, business logic, user flows, API contracts
**Adapted:** Language idioms, frameworks, UI patterns to match the iOS codebase

---

## Common Mappings Reference

| React/React Native | iOS/Swift Equivalent |
|--------------------|---------------------|
| `useState` | `@State` / `@Published` |
| `useEffect` | `.onAppear` / `.task` / `viewDidLoad` |
| `useContext` | Environment objects / Dependency injection |
| `useMemo` / `useCallback` | Computed properties / lazy vars |
| `useReducer` | State machine / Combine |
| Props | Init parameters / Bindings |
| `View` / `div` | SwiftUI `View` / UIKit `UIView` |
| `Text` | `Text` / `UILabel` |
| `Image` | `Image` / `UIImageView` |
| `ScrollView` | `ScrollView` / `UIScrollView` |
| `FlatList` | `List` / `LazyVStack` / `UITableView` |
| `TouchableOpacity` | `Button` / tap gestures |
| `TextInput` | `TextField` / `UITextField` |
| `StyleSheet` | SwiftUI modifiers / UIKit constraints |
| `fetch` / `axios` | `URLSession` / async-await |
| Redux / Zustand | Combine / SwiftUI state / TCA |
| React Navigation | `NavigationStack` / `UINavigationController` |
| React Query / SWR | Async/await patterns / Combine |
| Styled Components | View modifiers / custom ViewModifiers |
| Context Providers | `@EnvironmentObject` / DI containers |

---

## Workflow

### Step 0: Gather Context

**Ask the user for both pieces of information:**

```
To port a feature from React to iOS, I need:

1. PATH TO REACT CODEBASE (source of truth)
   Where is the React/React Native project located?
   Example: /path/to/react-app or ../react-native-app

2. FEATURE TO IMPLEMENT
   What feature or component should I port?
   Example: "UserProfile component" or "the checkout flow" or "src/components/Dashboard"
```

**Assumptions:**
- Current working directory = iOS codebase (target)
- User provides path to React codebase (source)

If the user already provided this info, proceed. Otherwise, ask.

### Step 1: Locate the React Feature

Navigate to the React codebase path and find the relevant files:

1. Go to the React path provided
2. Find files related to the feature (components, hooks, stores, utils)
3. Read and understand the implementation

**Files to look for:**
- Component files (`.tsx`, `.jsx`, `.js`)
- Custom hooks (`use*.ts`)
- State management (Redux slices, Zustand stores, Context)
- API services
- Types/interfaces (`.ts`, `.d.ts`)
- Styles (CSS modules, styled-components, StyleSheet)

### Step 2: Analyze the React Code

Thoroughly understand:

| Aspect | What to Extract |
|--------|-----------------|
| **Feature Behavior** | What does this feature do? User-facing functionality |
| **Component Structure** | Component hierarchy, props, composition patterns |
| **State Management** | useState, useReducer, Redux, Context usage |
| **Side Effects** | useEffect patterns, data fetching, subscriptions |
| **Business Logic** | Validations, transformations, calculations |
| **API Contracts** | Network calls, request/response shapes |
| **UI Flow** | Screens, navigation, user interactions |
| **Edge Cases** | Error handling, loading states, empty states |

```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                  REACT FEATURE ANALYSIS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

## Feature: [Name]

### What It Does
[User-facing description]

### Component Structure
[Component hierarchy and relationships]

### Props & State
[Key props, state variables, their purposes]

From michaelboeding/skills, MIT.

More from michaelboeding/skills