Crash when using TopBar ButtonComponents + BottomTabs + Pop

[zzorba]

🐛 Bug Report

I was getting crash reports about use of the back button causing crashes on certain screens in my app. In debugging, I came across this PR on the react-native project which seemed to fix the crash facebook/react-native#32989, but I figured it would be good to make a concise reproduction.

In a starter project with only RNN added, I was able to reproduce this by combining the following features:

1. Bottom tabs
2. Top bar button components

Using one or the other is fine, but the combination of the two leads to a crash when the screen that contains TopBarButtonComponents is 'popped'

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Setup a sample project that reproduces the issue: https://github.com/zzorba/RnnCrashPlayground

1. Pressing the Red button and popping the screen works (no crash)
2. Pressing the Blue button and popping the screen crashes, at least on the API30 (Android 11.0, Google APIs) emulator that comes with android-studio.

The key difference is the presence of one or more left buttons that are introduced with mergeOptions when the screen is pushed on.

Expected behavior

Popping the screen would work

Actual Behavior

The app crashes with a callstack about a NullPointerException related to getDisplayCutout

Your Environment

• React Native Navigation version: 7.24.3-hotfix.1
• React Native version: 0.67.1
• Platform(s): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Emulator, API 30, debug. But I have reports of this bug on real devices as well based on callstacks. Based on stack reporting, it does not appear to be an API specific thing, but it doesn't seem to happen on every emulator I have tried (BlueStacks works).

Reproducible Demo

https://github.com/zzorba/RnnCrashPlayground

Are you willing to resolve this issue by submitting a Pull Request?

-✖️   Yes, I have the time, and I know how to start.

• ✅   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

[zzorba]

The fix for this from the react-native side was released in in 0.67.2, so the patch is no longer necessary.

However I wonder if there might still be an issue that the inheritance of TopBarComponents causes with other libraries. I still get regular crashes that look like a View inheritance bug of some kind when using react-native-reanimated.

[eliaslecomte]

Me too :-(.

[zzorba]

@eliaslecomte I haven't deployed it yet, but the newest version of react-native-reanimated claims to have fixed some issues related to View inheritance + crashes.

Not with react-native-navigation specifically, but I'm hoping that it might address the Android crashes.

[zzorba]

This specific crash no longer reproduces, so I'm going to close this project. I'm still encountering numerous issues on production with TitleBarReactButtonView attempting to be cast to a ReactViewGroup by ReactNative.