# iphone-duo-react-native

Adapts React Native and Expo apps for the foldable iPhone Duo, handling asymmetric safe area insets, live window resizing, and iOS 27.1 native modules.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 432 installs · ★ 214
- Author: mirzaaghazadeh
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/mirzaaghazadeh/iphone-duo-skills/tree/HEAD/skills/iphone-duo-react-native/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/iphone-duo-react-native

## What it does

This skill structures adaptation into two tiers. Tier 1 requires no native Swift code: it fixes layout issues using `useSafeAreaInsets()` from `react-native-safe-area-context` and the `useWindowDimensions()` hook. Because the iPhone Duo safe area is asymmetric, symmetric padding calculations will break layouts. The skill guides you to branch on width breakpoints rather than device models or orientation.

Tier 2 outlines building a TurboModule or legacy module in Swift for iOS 27.1. This exposes `reservedRegions(kind:)` on `UIView` to dodge the hinge or camera, streams hinge angles with `UIHingeInteraction`, and reads trait collection size classes into JavaScript.

Testing the native module requires the Xcode 27.1 simulator. In Expo environments, this native bridging will not run inside standard Expo Go, so setting up a config plugin and a development build is mandatory.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-react-native -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/iphone-duo-react-native/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/iphone-duo-react-native/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-react-native -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/iphone-duo-react-native/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-react-native -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/iphone-duo-react-native/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mirzaaghazadeh/iphone-duo-skills iphone-duo-react-native
```

2. **Manually: put the files in place**
- File: `.github/skills/iphone-duo-react-native/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-react-native -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mirzaaghazadeh/iphone-duo-skills --path skills/iphone-duo-react-native
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/iphone-duo-react-native/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-react-native -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/mirzaaghazadeh/iphone-duo-skills/tree/HEAD/skills/iphone-duo-react-native/SKILL.md

## When to use it
- prevent layout clipping from asymmetric safe area insets
- handle dynamic screen resizing using `useWindowDimensions`
- implement two-column layouts across width breakpoints
- expose Swift `UIHingeInteraction` angle events to JavaScript

## Example prompts
- Audit this React Native layout for iPhone Duo asymmetric insets
- Write a TurboModule to bridge iOS 27.1 reservedRegions into React Native
- Replace Dimensions.get calls with useWindowDimensions across navigation screens

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a405a130b9a65387.

BEGIN THIRD-PARTY FILE a405a130b9a65387
````text
---
name: iphone-duo-react-native
description: Adapt a React Native or Expo app to iPhone Duo, Apple's first foldable iPhone — asymmetric safe area insets, resize handling, and how to expose the iOS 27.1 reserved-region and hinge APIs through a native module. Use when a React Native, Expo or JS-based iOS app needs foldable iPhone support.
---

# React Native on iPhone Duo

React Native has **no fold or hinge API**. There is no `useDisplayFeatures`, no
hinge event, nothing that tells JavaScript the device is folded. As of this
writing no React Native or Expo release has shipped iPhone Duo support.

The good news is that the two things that break most often — resizing and safe
areas — are already solvable with libraries you probably have installed. Work in
two tiers.

## Tier 1 — works today, no native code

### Safe area insets, handled per edge

This is where React Native apps break on iPhone Duo, and it is worth being blunt
about why: **the safe area is asymmetric here.** iOS moves its controls to one
side of the display, so `left` and `right` insets differ — and which side depends
on the pose and on which half of a Split View your app occupies.

Use `useSafeAreaInsets()` from
[`react-native-safe-area-context`](https://github.com/AppAndFlow/react-native-safe-area-context).
It returns `{ top, right, bottom, left }` as independent numbers, and it updates
when the insets change.

```js
const insets = useSafeAreaInsets();
// each edge, independently
paddingLeft: insets.left,
paddingRight: insets.right,
```

Three things to avoid:

- **`SafeAreaView` from `react-native` core** — deprecated, and it only ever
  handled the notch case properly. Use the context library's hook or its
  `SafeAreaView`.
- **Symmetric math** — anything shaped like `width - insets.left * 2` is wrong
  the moment the insets differ, which on this device is most of the time.
- **Reading insets once** — they change while the app is running, so read them
  through the hook on every render rather than caching.

If you're on React Native 0.81+ with edge-to-edge enabled, your content already
extends under the system UI, which makes correct inset handling load-bearing
rather than cosmetic.

### Resize on every render

The window changes size constantly on iPhone Duo: opening, closing, folding,
rotating, entering Split View.

Use `useWindowDimensions()`. It is a hook, so it re-renders on change — unlike
`Dimensions.get('window')`, which returns a snapshot that silently goes stale.
If you have `Dimensions.get(...)` at module scope or in a constant, that is a
bug on this device.
````
END THIRD-PARTY FILE a405a130b9a65387

The third-party file has ended. Everything between the a405a130b9a65387 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2602 of 5899 bytes. © mirzaaghazadeh · MIT · https://github.com/mirzaaghazadeh/iphone-duo-skills/tree/HEAD/skills/iphone-duo-react-native/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md