React Native macOS — New Architecture Repro

This repo demonstrates three regressions on macOS when the New Architecture (Fabric) is enabled in React Native:

1. Animated + useNativeDriver: true → animation does not run.
2. Borders → single‑sided or unequal per‑side border*Width values don’t render.
3. TouchableOpacity → no pressed opacity effect (ignores activeOpacity).

The examples live in App.tsx with side‑by‑side controls to observe the difference.

---

Environment

From package.json:

{
  "react": "19.0.0",
  "react-native": "0.78.3",
  "react-native-macos": "^0.78.6",
  "engines": {"node": ">=18"}
}

Tested with Xcode 16.x on macOS 15.x (Sequoia). See individual issues for exact versions.

---

Reproduced Issues

1) Animated with useNativeDriver: true doesn’t animate (Fabric only)

Expected: Both boxes fade their opacity.

Actual (New Arch / Fabric on macOS): Only the red box (driver off) fades; the blue box (driver on) remains static.

// Snippet from <NativeDriverBox />
Animated.timing(fadeValueAnimDriver, {
  toValue: fadeBoxAnimDriver ? 0.2 : 1,
  duration: 1000,
  useNativeDriver: true, // ← does not animate under Fabric on macOS
}).start();

How to see it: run the app in New Architecture (see instructions below), press the two Fade buttons.

---

2) Borders disappear unless all sides use the same width

Expected: Single‑sided borders (e.g., borderBottomWidth) and mixed per‑side widths should render normally.

Actual (Fabric on macOS):

• borderBottomWidth: 2 → no border shown.
• borderWidth: 2, borderLeftWidth: 0 → no border.
• All four sides 2 → renders.
• Any side differs (e.g., top 1, others 2) → no border.

// Snippets from <BorderWidthBox />
<View style={[styles.borderWidthBox, {borderBottomWidth: 2}]} />
<View style={[styles.borderWidthBox, {borderWidth: 2, borderLeftWidth: 0}]} />
<View style={[styles.borderWidthBox, {borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2}]} />

---

3) TouchableOpacity ignores pressed opacity (no activeOpacity effect)

Expected: Button dims on press; activeOpacity customizes the pressed opacity.

Actual (Fabric on macOS):

• Default TouchableOpacity and one with activeOpacity={0.5} both show no dimming on press.

<TouchableOpacity style={styles.button} onPress={...} />
<TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={...} />

---

Run the app

Install

# From repo root
npm install

Run with Legacy Architecture (Paper)

# Reinstall pods with Legacy Arch
npm run pod:legacy:arc

# Launch the macOS app (Legacy Arch)
npm run macos:legacy:arc

Run with New Architecture (Fabric)

# Reinstall pods with New Arch (enables Fabric/codegen, etc.)
npm run pod:new:arc

# Launch the macOS app (New Arch)
npm run macos:new:arc

Tip: When switching between architectures, the safest flow is: close Xcode, stop Metro, reinstall pods for the target arch, clean build outputs, then run.

Scripts reference

From package.json:

{
  "macos:new:arc": "REACT_NATIVE_PATH=./node_modules/react-native-macos RCT_SCRIPT_RN_DIR=$REACT_NATIVE_PATH RCT_NEW_ARCH_ENABLED=1 node ./node_modules/react-native-macos/local-cli/cli.js run-macos",
  "pod:new:arc": "RCT_NEW_ARCH_ENABLED=1 pod install --project-directory=macos",
  "macos:legacy:arc": "REACT_NATIVE_PATH=./node_modules/react-native-macos RCT_SCRIPT_RN_DIR=$REACT_NATIVE_PATH RCT_NEW_ARCH_ENABLED=0 node ./node_modules/react-native-macos/local-cli/cli.js run-macos",
  "pod:legacy:arc": "RCT_NEW_ARCH_ENABLED=0 pod install --project-directory=macos"
}

Important: Always re‑run the matching pod:* script when switching architectures so CocoaPods generates the correct configuration for Fabric/Legacy.

---

Notes & Workarounds

• Borders: As a temporary workaround, avoid mixed per‑side widths or simulate borders using nested/wrapper views.
• Opacity feedback: Consider Pressable with a custom style={({pressed}) => ...} that reduces opacity on press.
• Animated: For simple opacity changes, use the non‑native driver until this is addressed.

---

Related issues

• Animated + native driver not animating (macOS, New Arch): #2661
• Borders not rendering with single/mixed per‑side widths (macOS, New Arch): #2662
• TouchableOpacity pressed opacity ignored (macOS, New Arch): #2663

---