Broken on RN 0.74.1 and new arch (both with bridgeless and normal)

[ospfranco]

Here is a reproduction repo of a bare RN app:

Text should respect top margin

import React from 'react';
import {StyleSheet, Text} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <Text>test</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

export default App;

https://github.com/ospfranco/broken-safe-area-view

Just do:

yarn

yarn pods

yarn ios

With the new arch enabled safeAreaView does not work

env

System:
  OS: macOS 14.5
  CPU: (12) arm64 Apple M2 Max
  Memory: 1.23 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.2
    path: ~/.local/share/mise/installs/node/18/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.local/share/mise/installs/node/18/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.local/share/mise/installs/node/18/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/osp/.local/share/mise/installs/ruby/3/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    Android NDK: 26.1.10909125
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11709847
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.1
    path: /Users/osp/.local/share/mise/installs/ruby/3/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

[Bialson]

@ospfranco What about using SafeAreaView from base react native library? The problem still exists?

[ospfranco]

No, normal SafeAreaView was working I think

[janicduplessis]

I will have a look asap, I know 0.74 had a lot of changes in yoga so maybe that broke when migrating to the new api.

[flixyudh]

also reproduced with RN 0.74.2

Bundle Log:

 (NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) LOG  Running "mobile" with {"rootTag":1,"initialProps":{"concurrentRoot":true},"fabric":true}

Example:

import { View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const App = props => {
  return (
    <SafeAreaView style={{flex:1, backgroundColor:'white'}}>
      <View style={{borderWidth:1, borderColor:'red', flex:1}} />
    </SafeAreaView>
  );
};

export default App;

import { View, SafeAreaView } from 'react-native';	import { View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context';

[ospfranco]

@janicduplessis any news here?

[janicduplessis]

Sorry about the delay here, I just tested and reproduced the issue. Looking at it now.

[janicduplessis]

Should be fixed in 4.10.5