SafeAreaView background color changes on production build with New Architecture

[bahadiraraz]

Description

After migrating to the New Architecture in React Native, I've encountered an issue with the SafeAreaView background color. The color changes unexpectedly when building the app for release, but works correctly in development mode.

Expected behavior:
The SafeAreaView background colors should remain consistent between development and release builds.

Actual behavior:
The SafeAreaView background colors change unexpectedly in the release build when using the New Architecture.

Steps to reproduce

Steps to reproduce:

1. Create a new React Native project with New Architecture enabled
2. Add the following code to your main component:

<Fragment>
    <SafeAreaView className="bg-[#FDFDFD] dark:bg-black" />
    <SafeAreaView className="flex-1 bg-white dark:bg-[#1C1C1E]" style={[androidSafeArea]}>
        <View style={{ flex: 1 }}>
        </View>
    </SafeAreaView>
</Fragment>

3. Run the app in development mode: npx expo run:ios --device
   • Observe that the SafeAreaView background colors are correct
4. Build the app for release: npx expo run:ios --configuration Release --device
   • Observe that the SafeAreaView background colors have changed unexpectedly

Additional Information:

• This issue only occurs after migrating to the New Architecture
• The problem is not present when running in development mode
• The issue is reproducible on iOS and android

React Native Version

0.74.3

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.3.1
  CPU: (8) arm64 Apple M1
  Memory: 206.78 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.2.4
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.06.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No error

Reproducer

https://snack.expo.dev/@bahadirs/safeareaview-background-bug

Screenshots and Videos

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.4. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cipolleschi]

Thanks @bahadiraraz for the issue, we will look into that.
QQ: why do you have 2 SafeAreaView one after the other? I might miss something here, but 2 SafeAreaView feels wrong to me.

[bahadiraraz]

Thanks @bahadiraraz for the issue, we will look into that. QQ: why do you have 2 SafeAreaView one after the other? I might miss something here, but 2 SafeAreaView feels wrong to me.
Here's a response you can use:

---

Thanks for pointing that out! The reason I used two SafeAreaView components one after the other is that I wanted to have different background colors for the top and bottom safe areas. This approach allows me to customize the appearance of these regions separately. From my research, this seems to be a common workaround that has been used without issues until now, even before the new architecture.

You can find a discussion about this approach here: Stack Overflow.

If there's a more efficient or modern way to handle this, I'm definitely open to suggestions!

[cipolleschi]

If there's a more efficient or modern way to handle this, I'm definitely open to suggestions!

I get curious about alternatives, and I think that something with linear gradients might work.

For example:

function App() {
  return (
    <LinearGradient
      colors={['red', 'red', 'white', 'green', 'green']}
      locations={[0, 0.4, 0.5, 0.6, 1]}
      style={{flex:1}}>
      <SafeAreaView style={{flex:1, backgroundColor:'transparent'}}>
        <View style={{flex:1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
			<Text style={{fontSize: 24}}> Hello World </Text>
        </View>
      </SafeAreaView>
    </LinearGradient>
  );
}

Results in something like this:

The fun thing is that you can even extract it to a separate component:

function DifferentlyColoredSafeAreaView({topColor, bottomColor, backgroundColor, children}) {
  return (
    <LinearGradient
      colors={[topColor, topColor, backgroundColor, bottomColor, bottomColor]}
      locations={[0, 0.4, 0.5, 0.6, 1]}
      style={{flex:1}}>
      <SafeAreaView style={{flex:1, backgroundColor:'transparent'}}>
        <View style={{flex:1, backgroundColor: backgroundColor, alignItems: 'center', justifyContent: 'center'}}>
          {children}
        </View>
      </SafeAreaView>
    </LinearGradient>
  )
}

And then just use it like this:

<DifferentlyColoredSafeAreaView
      topColor="black"
      bottomColor="gray"
      backgroundColor="black">
      <Text style={{color: 'white', fontSize: 24}}> Hello World </Text>
</DifferentlyColoredSafeAreaView>

To get:

I'm still going to look into the issue, but as the doc says, the intended use of is to have a top level one that wraps the other components.

wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

[bahadiraraz]

@cipolleschi This solution worked for me, thank you !

[migueldaipre]

Could this issue be related to View Flattening?

[cipolleschi]

@migueldaipre I thought about that as well, but I was ensured that SafeAreaView is never flattened. But I really haven't had time to investigate it myself and the 2 SaveAreaView are really an anti-pattern. 😅

[coado]

I cannot reproduce this issue on React Native rn-tester. I've tried copying the code from the snack and changing the build configuration in Xcode on the new architecture.

[cipolleschi]

I cannot reproduce this issue with plain React Native: nor in 0.74.5 nor in 0.75.

I suspect that Expo might have something to do with it.
I'll close this issue as:

1. there is a work around for the author
2. the problem does repro in plain react native for 74 and 75