chore(android): support react-native 0.79.0

[akuul]

Summary

Release of React Native 0.79 broke Android builds that resulted in an error:

Exception thrown when executing UIFrameGuarded

Attempt to invoke interface method 'void com.facebook.react.uimanager.ViewManagerDelegate.setProperty(android.view.View, java.lang.String, java.lang.Object)' on a null object reference

Tested on React Native 0.76.1 example and React Native 0.79.0

Closes #607

Test Plan

• Build example project
• Build on project using React Native 0.79

[jacobp100]

Is this backwards compatible?

[janicduplessis]

I think the problem with this approach is that we lose support for all props implemented in ReactViewManager this is why it extends it and doesn't use the delegate.

Seems like this no longer works in 0.79. I had a look and it seems that it now uses a check on an interface to know if the class will implement the delegate. Could you try removing the RNCSafeAreaViewManagerInterface interface and see if it works?

[akuul]

You are right, working fine. Tested on RN 74 as it is minimal supporter for v5, on example and on 0.79.0. All of them behave as expected.

I will not be available until start of next week in case there is something I have missed and changes required :( I could take a look after, or someone to update in the meantime, sorry

[djangoamidala]

if you want to fix it you can use this
you just get the Insets and use it in your own view, perfectly working, better for the futur you will not have problem to handle this kind of errors :)

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

export const SafeView = ({ children, style }) => {
const insets = useSafeAreaInsets();

const top = typeof insets.top === 'number' ? insets.top : 0;
const bottom = typeof insets.bottom === 'number' ? insets.bottom : 0;
const left = typeof insets.left === 'number' ? insets.left : 0;
const right = typeof insets.right === 'number' ? insets.right : 0;

return (
<View
style={[
{
paddingTop: top,
paddingBottom: bottom,
paddingLeft: left,
paddingRight: right,
},
style,
]}
>
{children}

);
};

export default SafeView;

[cixio]

works great on RN 0.79.0, please merge.

[janicduplessis]

Thanks a lot @akuul, will get this merged today

[CoericK]

@janicduplessis this is happening to me when adding the SafeAreaProvider on the top level:

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

const App = () => {
  return (
    // <SafeAreaView style={styles.container}>
    <SafeAreaProvider>
      <View style={styles.container}>
        <Text style={styles.title}>Welcome to App</Text>
        <Text style={styles.subtitle}>
          Your production-ready React Native project is set up!
        </Text>
      </View>
    </SafeAreaProvider>
  );
};
}

Getting the following error:

This only happens on android:

{
  "name": "App",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/elements": "2.3.8",
    "@react-navigation/native": "7.1.6",
    "@react-navigation/native-stack": "7.3.10",
    "react": "19.0.0",
    "react-native": "0.79.1",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "4.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.1",
    "@react-native/eslint-config": "0.79.1",
    "@react-native/metro-config": "0.79.1",
    "@react-native/typescript-config": "0.79.1",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

This is a brand new app, created minutes before adding react native safe area context

[JerryBels]

I'd like to know when are we getting a release with these changes?

[SimantaRajSarma]

I'm in react-native-safe-area-view@5.4.0, and RN v79.2

getting the same error. I used the custom one but it's not that good, please fix the issue ASAP

[sjoerdwol]

@janicduplessis I am, as others as well, still experiencing this error with v5.4.0 and RN v0.79.

[sharifrayhan]

The current expo go on android causes this problem.
You can wait for the new update on app store or you can install the latest version on your phone using expo orbit.

You can install it from here ---> https://expo.dev/go

Hopefully it will solve the problem 👍

[SimantaRajSarma]

The current expo go on android causes this problem. You can wait for the new update on app store or you can install the latest version on your phone using expo orbit.

You can install it from here ---> https://expo.dev/go

Hopefully it will solve the problem 👍

using the latest one, but didn't worked, so i used my custom SafeAreaViw using the useSafeAreaInsets hook and it's working fine

import React from "react";
import { View, ViewStyle } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

interface SafeAreaViewProps {
  children: React.ReactNode;
  edges?: {
    top?: boolean;
    bottom?: boolean;
    left?: boolean;
    right?: boolean;
  };
  style?: ViewStyle;
}

const SafeAreaView: React.FC<SafeAreaViewProps> = ({
  children,
  edges = { top: true, bottom: true, left: true, right: true },
  style,
}) => {
  const insets = useSafeAreaInsets();

  const paddingStyle: ViewStyle = {
    paddingTop: edges.top ? insets.top : 0,
    paddingBottom: edges.bottom ? insets.bottom : 0,
    paddingLeft: edges.left ? insets.left : 0,
    paddingRight: edges.right ? insets.right : 0,
  };

  return <View style={[paddingStyle, style]}>{children}</View>;
};

export default SafeAreaView;

[sjoerdwol]

The current expo go on android causes this problem. You can wait for the new update on app store or you can install the latest version on your phone using expo orbit.

You can install it from here ---> https://expo.dev/go

Hopefully it will solve the problem 👍

I am using Expo Go 2.33.16 for Expo SDK 53 with RN v0.79 and v5.4.0 of react-native-safe-area-context which are the latest versions and I'm still experiencing the issue. As a current workaround I'm using a custom SafeArea with useSafeAreaInsets similar to the others mentioned in this thread, but the original issue doesn't appear to be fixed.

[sharifrayhan]

You need Expo Go 2.33.19

[sjoerdwol]

Expo Go Update just popped up in Play Store, i can confirm it does work with Expo Go 2.33.19 👍

[SimantaRajSarma]

yep! Expo Go 2.33.19 has the fix, migrating to again react-native-safe-area-context

[sugaith]

still happening for dev-client builds

[stefan-schweiger]

Also experiencing this for my android dev-client builds

[avasisht23]

also seeing this in dev-client builds

[Rinshin-Jalal]

any fix for android ???