react-native-nitro-hinge

Native size class, safe insets, and hinge geometry for React Native. Nitro-backed. iOS + Android. One API for phones, tablets, foldables, tri-folds, iPhone Duo — and whatever ships next.

Status: v2.0.0 — Both platforms verified end-to-end. iOS across all 6 iPhone Duo poses on the Xcode 27.1 beta simulator. Android across the full pose matrix (folded, book, tabletop, flat) on the Pixel 10 Pro Fold API 37.2 emulator. See Status by platform below.

Verified on iPhone Duo (Xcode 27.1 beta)

Six configurations, six correct readings, zero manual work:

Outer portrait compact 1 column vertical bar right	Outer landscape compact 1 column vertical bar left	Inner flat portrait medium 2 columns
Inner flat landscape expanded 3 columns	Inner unfolded portrait medium × expanded tablet-shape	Inner unfolded landscape expanded widest window

Every value in every screenshot is what UIKit + iOS 27.1 reserved regions actually report, marshalled through Nitro's synchronous JSI bridge and rendered in a React Native example app with no manual polling, no bridge hops, no JS-side heuristics.

Verified on Pixel 10 Pro Fold (Android emulator API 37.2)

Six configurations across a regular phone and a foldable, all four fold states covered, correct readings on every one:

Regular phone closed (compact) 1 column no fold reported	Fold cover screen closed (compact) 1 column closed / no fold	Book pose (half-open, portrait) Half Open 3 columns vertical fold, separating
Tabletop (half-open, landscape) Half Open 3 columns horizontal fold	Flat landscape open (expanded) 3 columns horizontal fold, flat	Flat portrait open (expanded) 3 columns vertical fold, flat

Every value is what Jetpack WindowManager's WindowInfoTracker and FoldingFeature actually report, delivered through Nitro's JSI callbacks and rendered in the same React Native example app. Cold start, config changes, and fold-state transitions all propagate to the same reactive hook that iOS uses. Asymmetric insets rotate correctly between book and tabletop postures. Size class flips from compact to expanded when the inner display becomes available.

Status by platform

Platform	Signals	Reactive updates	Fold detection	Notes
iOS 13.4 – 26	✅	✅	n/a	Size class, safe insets, font scale, orientation.
iOS 27.1+	✅	✅	✅	Full reservedRegions(kind: .division) on Duo. Requires Xcode 27.1 beta and HINGE_IOS_27_1_SDK=1 in podspec.
iPadOS	✅	✅	n/a	Split View, Stage Manager, Slide Over all reflow correctly.
Android API 24+	✅	✅	✅	Full WindowInfoTracker + FoldingFeature via WindowFoldSource. Verified on Pixel 10 Pro Fold API 37.2 emulator.

If you're shipping for iPhone Duo October 23 or any Android foldable, Hinge is ready today. Emulator coverage is complete on both platforms. Physical device certification lands in v2.3.

Why this exists now

The foldable market moved from "someday" to "shipping in production" in the last 90 days:

• September 9, 2026 — Apple announced iPhone Duo alongside iPhone 18 Pro
• September 18, 2026 — Xcode 27.1 beta released with iPhone Duo SDKs and simulator
• October 23, 2026 — iPhone Duo goes on sale in ~70 countries
• December 2025 — Samsung Galaxy Z TriFold launched (first shipping tri-fold)
• August 2026 — Huawei Pura X Max, Mate XT2 tri-fold, Xiaomi 18 Fold all launched in China
• 2026 forecast — 20–27M foldable units shipped globally, ~2% of all phones
• 2027 forecast — 23–36M units, Apple projected to hit 40% market share
• Cumulative — 100M foldable devices in customer hands by end of 2027

Every React Native app in the store now has to handle:

1. iPhone Duo's outer display (compact width), inner display in portrait and landscape (medium/expanded width), and half-folded poses that reserve a vertical bar on one side
2. Samsung and Google foldables that reflow between cover screen and inner display, and half-open poses for tabletop/book layouts
3. Samsung TriFold and future Apple foldables with multiple simultaneous hinges
4. iPad Split View, Stage Manager, and Android tablets that already break naive Dimensions.get('window') code
5. Asymmetric safe areas caused by the vertical bars foldable platforms put on the trailing edge in landscape

Dimensions.get('window') snapshots at read time. Platform.isPad is a coarse device check. StyleSheet.create freezes numbers at module load. None of them handle any of the above correctly.

What Hinge does

Hinge is a data source, not a styling engine. It surfaces the signals Apple and Google both bless for adaptive layouts — size class, measured window, asymmetric safe insets, hinge geometry — directly to JS via Nitro's synchronous JSI bridge. Reads work inside StyleSheet.create at module load, and a hook subscribes to live changes on fold, rotate, split view resize, and stage manager gestures.

Bring your own styles. Pair with StyleSheet.create factory patterns, Unistyles, NativeWind, or anything else.

Foldable devices covered

Hinge works on every foldable that ships Android's WindowInfoTracker or iOS 27.1's reservedRegions API. That's every foldable currently in the market:

iOS

Vendor	Device	Form factor	Support
Apple	iPhone Duo	Book-style (2-panel)	✅ Full via iOS 27.1
Apple	Future foldable iPad (rumored 2028)	Book-style or tri-fold	✅ Same code path — foldFeatures[] scales to N hinges

iOS Guide

Android — book-style (2-panel)

The dominant Android form factor. All book-style foldables use the same WindowInfoTracker API and report a single FoldingFeature per hinge.

Vendor	Series	Latest devices	Market position
Samsung	Galaxy Z Fold	Z Fold 6, Z Fold 7, Z Fold 8 (2026)	32–38% global foldable share
Huawei	Mate X, Pura X	Mate X7, Pura X Max, Mate XT2 (Sept 2026)	22–24% global, 57% in China H1 2026
Google	Pixel Fold	Pixel Fold, Pixel 9 Pro Fold, Pixel 10 Pro Fold	2–3% global, growing
Motorola	Razr (book-style variants)	Razr 70 series	8% global
Honor	Magic V	Magic V3, V5, V6 (fastest growth: 82% YoY in Q2 2026)	3–9% global, growing fast
Xiaomi	Mix Fold	Mix Fold 3, Mix Fold 4, Xiaomi 18 Fold (Sept 2026)	1–2% global, mostly China
OPPO / OnePlus	Find N	Find N3 / OnePlus Open	Paused new releases as of 2025, existing units still in market
vivo	X Fold	X Fold 3, X Fold 3 Pro	China-focused, growing

Android — clamshell (Flip-style, hinge across the middle)

Clamshells report as compact width class in every pose because the outer screen is small and the inner unfolds to a normal phone shape, not a tablet shape. Tabletop (flex mode) posture is detected via foldFeatures[i].orientation === 'horizontal'.

Vendor	Series	Latest devices
Samsung	Galaxy Z Flip	Z Flip 6, Z Flip 7, Z Flip 7 FE
Motorola	Razr	Razr 70, Razr Ultra 2026
Honor	Magic Flip	(China-focused)
Xiaomi	Mix Flip	(China-focused)
OPPO	Find N Flip	(China-focused)

Android — tri-fold (three panels, two hinges)

The newest form factor. Hinge reports foldFeatures.length === 2 when both hinges are half-open. No code changes needed by consumers — the array API handles it naturally.

Vendor	Device	Launch
Samsung	Galaxy Z TriFold	Dec 2025 (Korea), Jan 2026 (US)
Huawei	Mate XT, Mate XT2	Mate XT2 launched Sept 2026
Apple	Foldable iPad (rumored)	2028 forecast

Devices that do NOT need Hinge

• Regular phones (iPhone 15, Pixel 9, Galaxy S25, etc.) — Hinge returns widthClass: compact, foldFeatures: [], works fine
• Regular tablets (iPad Air, Galaxy Tab S10) — Hinge returns widthClass: medium or expanded based on Split View state, foldFeatures: []
• Wearables (Apple Watch, Wear OS) — Hinge doesn't target these
• TV / CarPlay / Vision Pro — out of scope

Global foldable market — September 2026 snapshot

Data from Counterpoint Research, TrendForce, IDC, and SAG. Numbers are consensus estimates; different trackers vary ±10%.

Full-year 2026 (in-year forecast at Duo launch):

Vendor	Share	Shipments 2026	Notes
Samsung	32–38%	~7.1M	Z Fold 7/8 driving growth, Z TriFold expanding form factor
Apple	25%	~5–10M	iPhone Duo, first year, only 2 months on sale
Huawei	22–24%	~5M	China-dominant, 57% H1 2026 share in China alone
Motorola	8%	~2M	Razr 70 series
Honor	3–9%	~1M	Magic V6, fastest growth vendor (82% YoY Q2 2026)
Xiaomi + OPPO + vivo + Google	~5% combined	~1M	Regional/emerging players

Full-year 2027 forecasts (already released):

• Total foldable market: 23.5M–36M units (37% YoY growth, fastest since 2022)
• Apple: 40% share — 20–25M iPhone Duo shipments in first full year of availability
• Cumulative foldable devices in customer hands: 100M by end of 2027

Foldables are still only ~2% of total smartphone shipments, but they're the fastest-growing premium segment. Every RN app targeting premium/enterprise/creator markets already has foldable users.

Install

yarn add react-native-nitro-hinge react-native-nitro-modules
cd ios && pod install

Requires:

• React Native 0.75+
• iOS 13.4+ (fold geometry needs iOS 27.1+; falls back gracefully)
• Android API 24+ (fold geometry via androidx.window 1.5+)
• Xcode 16.4+ (Xcode 27.1 beta for iPhone Duo fold detection)
• Nitro 0.37+

Without this flag, Hinge builds and ships against Xcode 27.0 SDK just fine — you get every non-fold signal (size class, safe insets, orientation, font scale). foldFeatures returns empty until the flag is enabled and you're building against 27.1.

Quick start

Static styles (module load)

import { StyleSheet, View, Text } from 'react-native';
import { hinge, font, space, isWide } from 'react-native-nitro-hinge';

const styles = StyleSheet.create({
  container: {
    padding: space(16),
    flexDirection: isWide() ? 'row' : 'column',
  },
  title: { fontSize: font(24) },
});

function Screen() {
  return <View style={styles.container}><Text style={styles.title}>Hi</Text></View>;
}

Reactive styles (reflow on fold, rotate, split view)

import { useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { useHinge, font, space, isWide } from 'react-native-nitro-hinge';

const makeStyles = () => StyleSheet.create({
  container: {
    padding: space(16),
    flexDirection: isWide() ? 'row' : 'column',
  },
  title: { fontSize: font(24) },
});

function Screen() {
  const { widthClass } = useHinge();
  const styles = useMemo(makeStyles, [widthClass]);
  return <View style={styles.container}>...</View>;
}

API

State

hinge.widthClass; // 'compact' | 'medium' | 'expanded'
hinge.heightClass; // 'compact' | 'medium' | 'expanded'
hinge.windowWidth; // measured window width (pt / dp)
hinge.windowHeight; // measured window height
hinge.safeInsets; // { top, right, bottom, left } — asymmetric-aware
hinge.foldFeatures; // array of active folds; empty on non-foldables
hinge.hingeAngle; // continuous angle for animations only (nullable)
hinge.fontScale; // OS Dynamic Type / Configuration.fontScale
hinge.deviceInfo; // { platformVersion, model, hasHardwareHinge } — analytics only

Scaling helpers

font(16); // size-class-based bump, respects Dynamic Type
space(16); // scales more aggressively for tablets
size(48); // sub-linear scaling for containers
radius(8); // sub-linear for corners
icon(24); // same as size
hairline(1); // PixelRatio-aware, always 1px
responsive({ compact: 1, medium: 2, expanded: 3 });

Layout queries

isCompactWidth(); // phone-shape layout
isWide(); // tablet-shape layout (medium or expanded)
hasActiveFold(); // any active fold in current window
isSeparating(); // any active fold separates content into panes
isTriFold(); // 2+ simultaneous active folds (Samsung TriFold, future Apple)
isBookPosture(); // half-open + vertical fold (two-page layout)
isTabletopPosture(); // half-open + horizontal fold (video-above / controls-below)
contentWidth(); // width inside safe area, asymmetric-safe
contentHeight(); // height inside safe area

Reactive hook

const state = useHinge(); // subscribes to all state changes

What it does NOT expose (and why)

Missing on purpose. These are anti-patterns on at least one platform:

• ❌ isIPad() / Platform.isPad for layout — Platform.isPad works and correctly reports iPad, but it's a coarse device check. On iPhone Duo the inner display is regular width on a phone: isPad returns false but the layout should be tablet-like. Same in reverse on iPad Split View at compact widths. Use widthClass === 'expanded' or isWide() — ask the window, not the device.
• ❌ isDuo() / isFold() — model checks are fragile across vendors, wrong on outer displays where the device is still a fold but the app should look like a phone. Use hasActiveFold() or foldFeatures.length > 0.
• ❌ pose enum for layout — Apple's guidance is explicit: use size class for layout, hinge state for content-arrangement decisions like tabletop/book. foldFeatures[i].state is exposed for this; general layout branching should key off widthClass.
• ❌ Aspect-ratio font scaling — the classic (height/width) * multiplier hack. Broken on every rotation, every fold, every split view. Use Dynamic Type + a small size-class bump instead.

Comparison to alternatives

Concern	Dimensions.get('window')	useWindowDimensions	Hinge
Reactive to rotate	❌	✅	✅
Reactive to fold	Partial	Partial	✅ (native listener)
Reactive to Split View	❌	✅	✅
Size class exposed	❌	❌	✅
Asymmetric safe insets handled	❌	❌	✅
Hinge geometry	❌	❌	✅
iOS 27.1 reservedRegions	❌	❌	✅
Tri-fold (multiple hinges)	❌	❌	✅
Sync at module load	✅	❌ (hook only)	✅
Font scale	✅	✅	✅

Vs. other RN foldable libraries:

Library	Platform	Nitro	iOS Duo	Tri-fold	Size class	Status
@logicwind/react-native-fold-detection	Android only	❌	❌	❌	❌	Alpha
@hecom/react-native-foldable	JS-only wrapper	❌	❌	❌	❌	Not native
marcooli/react-native-foldable	iOS + Android	❌ (Fabric)	Partial	❌	❌	0.1.0-alpha, not published
react-native-fold-kit	iOS + Android	❌ (Fabric)	✅	❌	Partial	0.x, active
react-native-hinges (appandflow)	iOS + Android	❌ (Fabric)	✅	❌	❌	0.1.0-alpha
react-native-nitro-hinge	iOS + Android	✅	✅	✅	✅	v2.0.0

Position vs. styling engines

Hinge is a data source. It answers "what window am I in?" It doesn't answer "how do I write styles that reflow?" That's what styling engines do.

• Hinge alone — factory StyleSheet.create + hook pattern. Good for bare-workflow apps that don't want a styling dependency.
• Hinge + Unistyles — use Hinge as Unistyles' runtime state source for Duo pose, hinge geometry, and asymmetric insets that Unistyles doesn't have out of the box.
• Hinge + NativeWind — use Hinge for the "what's the current breakpoint" question inside NativeWind's hooks.

Roadmap

• v2.0.0 (current) — iOS complete across all six Duo poses, Android complete across all Pixel Fold poses via WindowFoldSource
  • WindowInfoTracker.
• v2.1 — Continuous hinge-angle sensor via TYPE_HINGE_ANGLE on Android and the iOS continuous angle API.
• v2.2 — Expo config plugin for zero-config integration.
• v2.3 — Physical device certification across Samsung Fold, Pixel Fold, Honor Magic V, and iPhone Duo when the GM lands.

Reference material

• iOS: Apple's iPhone Duo HIG
• iOS: Preparing your app for iPhone Duo
• Android: Window size classes
• Android: Make your app fold-aware
• Android: Support tri-folds and landscape foldables
• Samsung: Foldable developer docs

For device-specific metrics on every foldable in the market, see android-foldables-device-metrics.md.

Credits

Android observation architecture adapted from react-native-fold-kit by Alexey Tsutsoev (MIT). Their WindowFoldSource design — per-activity refcounted source, WindowInfoTrackerCallbackAdapter over the coroutine flow, hinge-sensor client separation, version-counter change detection — is the reference the Nitro Android side is built on.

🪪 License

MIT © Gautham Vijayan

---

Made with ❤️ and Nitro Modules