Crash on Android 14 (S24 Ultra) when setting edges prop on RNCSafeAreaView

[carloslibardo]

Description

I've encountered a crash in my React Native application on Android when trying to set the edges prop on RNCSafeAreaView. The application crashes with the following exception:

Exception com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'edges' of a view managed by: RNCSafeAreaView
...
Caused by java.lang.ClassCastException: com.facebook.react.bridge.ReadableNativeMap cannot be cast to com.facebook.react.bridge.ReadableArray

This issue seems to be related to how the edges prop is handled in the native Android implementation of RNCSafeAreaView.

Steps to Reproduce

1. Use SafeAreaView with the edges prop set to an array of strings, e.g., edges={['top', 'left', 'right']}.
2. Run the app on an Android device or emulator.

Expected Behavior

The SafeAreaView should correctly apply the safe area insets according to the specified edges without causing a crash.

Actual Behavior

The application crashes on Android with a JSApplicationIllegalArgumentException related to the edges prop.

Environment

• React Native version: 0.73.4
• React Native Safe Area Context version: 4.9.0
• Device: S24 Ultra (I cannot reproduce in my device - S23 Ultra)

Code Snippet

Here are the snippets from my code where I use SafeAreaView:

<SafeAreaView
  edges={['top', 'left', 'right']}
  style={{ flex: 1 }}
>
...

Additional Context

I've followed the documentation for react-native-safe-area-context and the usage of SafeAreaView seems to be correct according to the examples provided. This crash is blocking further development and testing on Android devices.

Any assistance or guidance on how to resolve this issue would be greatly appreciated.

[jacobp100]

Are you able to get a better stack trace?

[carloslibardo]

Here is the complete stacktrace at google play, check if can help.

Exception com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'edges' of a view managed by: RNCSafeAreaView
  at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp (ViewManagersPropertyCache.java:101)
  at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty (ViewManagerPropertyUpdater.java:136)
  at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps (ViewManagerPropertyUpdater.java:56)
  at com.facebook.react.uimanager.ViewManager.updateProperties (ViewManager.java:79)
  at com.facebook.react.uimanager.ViewManager.createViewInstance (ViewManager.java:181)
  at com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:108)
  at com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:281)
  at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute (UIViewOperationQueue.java:194)
  at com.facebook.react.uimanager.UIViewOperationQueue$1.run (UIViewOperationQueue.java:920)
  at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches (UIViewOperationQueue.java:1037)
  at com.facebook.react.uimanager.UIViewOperationQueue.-$$Nest$mflushPendingBatches
  at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:1097)
  at com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:29)
  at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame (ReactChoreographer.java:175)
  at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame (ChoreographerCompat.java:85)
  at android.view.Choreographer$CallbackRecord.run (Choreographer.java:1687)
  at android.view.Choreographer$CallbackRecord.run (Choreographer.java:1698)
  at android.view.Choreographer.doCallbacks (Choreographer.java:1153)
  at android.view.Choreographer.doFrame (Choreographer.java:1069)
  at android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:1646)
  at android.os.Handler.handleCallback (Handler.java:958)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at android.os.Looper.loopOnce (Looper.java:230)
  at android.os.Looper.loop (Looper.java:319)
  at android.app.ActivityThread.main (ActivityThread.java:8918)
  at java.lang.reflect.Method.invoke
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:608)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1103)
Caused by java.lang.ClassCastException: com.facebook.react.bridge.ReadableNativeMap cannot be cast to com.facebook.react.bridge.ReadableArray
  at com.facebook.react.uimanager.ViewManagersPropertyCache$ArrayPropSetter.getValueOrDefault (ViewManagersPropertyCache.java:267)
  at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp (ViewManagersPropertyCache.java:86)

[jacobp100]

Are you able to reproduce it on a device?

[carloslibardo]

No, because I don't have the s24 ultra, what I'm managing to get is a problem from a customer in production who is helping us with some tests.

[jacobp100]

I’ll leave this issue open - with the caveat it’s unlikely to get taken on by any current maintainers. If you find more information - or better, a fix - let us know!

[kuldeep-IT]

Stucked in same issue.