Layout, involving negative margin, changes between debug and release builds

[shirakaba]

Problem Description

The following layout, involving negative margin, changes between debug mode and release mode:

import { StatusBar } from "expo-status-bar";
import { Image, StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        accessibilityLabel="Windows logo"
        resizeMode="contain"
        source={require("./assets/windows-logo-2.png")}
        style={styles.logo}
      />
      <Text style={styles.text}>Developers, developers, developers!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "#000",
  },
  logo: {
    marginLeft: 40,
    marginTop: -40,
    marginBottom: -40,
    width: 220,
    height: 220,
  },
});

Here's the windows-logo-2.png asset referenced:

And here's how the layout changed between the two build configurations (ignore the fact that the window size is different - resizing the window to the same size does not fix the layout):

Debug mode

This is the intended layout that I developed against. By using negative margins, I can subtract for the excessive padding that the logo image has.

Release mode

Here's the surprising appearance in a release-mode build:

Given that the image shifts down significantly and claims extra space above itself, it feels like it's rendering something like this in practice:

  logo: {
    marginLeft: 40,
-   marginTop: -40,
+   marginTop: 40,
-   marginBottom: -40,
+   marginBottom: -80,
    width: 220,
    height: 220,
  },

... but that's just a guess. I see it's also moving somewhat towards the right, and the image has become 25% larger. So maybe rather than a margin problem, it's a scaling and transform origin problem? Or a little bit of both?

Steps To Reproduce

1. git clone git@github.com:shirakaba/rnw-layout-change-repro.git
2. cd rnw-layout-change-repro
3. bun install (I used Bun v1.3.14), or install with your preferred package manager.
4. Compare the results of a debug-mode build vs. a release-mode build. In my case, I passed --msbuildprops PreferredToolArchitecture=x64 because otherwise it ran out of memory trying to build on my VM with 8 GB RAM:

• # The debug-mode build
  node --run windows -- --msbuildprops PreferredToolArchitecture=x64

• # The release-mode build
  node --run windows -- --msbuildprops PreferredToolArchitecture=x64 --release

Expected Results

The layout should be the same between both debug mode and release mode.

CLI version

20.2.0

Environment

'dotnet.exe' is not recognized as an internal or external command,
operable program or batch file.
'dotnet.exe' is not recognized as an internal or external command,
operable program or batch file.
info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.26100
  CPU: (4) arm64 Apple Silicon
  Memory: 881.42 MB / 7.99 GB
Binaries:
  Node:
    version: 26.8.1
    path: C:\Users\jamie\AppData\Local\mise\installs\node\26.8.1\node.EXE
  Yarn: Not Found
  npm:
    version: 12.0.2
    path: C:\Users\jamie\AppData\Local\mise\installs\npm\12.0.2\node_modules\.bin\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.14.37614.0 (Visual Studio Community 2022)
    - 18.9.12112.369 (Visual Studio Community 2026)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.2.0
    wanted: ^20.1.3
  react:
    installed: 19.1.4
    wanted: 19.1.4
  react-native:
    installed: 0.81.6
    wanted: 0.81.6
  react-native-windows:
    installed: 0.81.35
    wanted: 0.81.35
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.87.1 is now available (your project is running on v0.81.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.87.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.81.6&to=0.87.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Community Modules

It's an Expo Windows project:

    "expo": "~54.0.35",
    "expo-desktop-modules-core": "~54.0.14-beta.0",
    "expo-desktop-prebuild-config": "~1.1.0-beta.0",
    "expo-desktop-stubs": "~54.0.14-beta.0",
    "expo-status-bar": "~3.0.9",
    "react": "19.1.4",
    "react-native": "0.81.6",
    "react-native-macos": "0.81.7",
    "react-native-windows": "0.81.35"

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

10.0.26100

Visual Studio Version

Visual Studio 2026

Build Configuration

No response

Snack, code example, screenshot, or link to a repository

See "Steps to Reproduce" for minimal code example, and "Problem Description" for screenshots.