Unity view has grey gaps (top/bottom/sides) and system UI/orientation issues when embedded in React Native on Android

[entelostre]

Bug 1: Grey gaps around UnityView

Description

When embedding a Unity view, grey gaps appear between the RN navigation header and the Unity view, and/or at the bottom/sides of the screen. The gaps are inconsistent and change with device orientation.

To reproduce:

A minimal reproduction repository is available here: https://github.com/entelostre/UnityGapTest

Clone the repo and run on Android device
Tap "Open Unity" from the Home tab
Observe grey gaps around the Unity content
Rotate the device

Expected:

Unity view fills the available space with no gaps in all orientations.

Observed:

Grey gaps appear above/below/beside the Unity view. The gaps also change after orientation changes.

Screenshots

Bug 2: UI rendered behind system navigation bar + orientation locked after returning from Unity

Description

After rotating the device to landscape while on the Unity screen, navigating back to React Native causes two issues:

The RN UI is rendered behind the Android system navigation bar (back/home button area) — the bottom portion of the UI is obscured
The orientation is locked and the app no longer responds to device rotation

Steps to reproduce

1. Open the Unity screen
2. Rotate device to landscape
3. Navigate back to React Native (press the back button or navigate programmatically)
4. Observe: UI is pushed behind the system nav bar, and orientation is permanently locked

Screenshots:

Before

After

Environment:

@azesmway/react-native-unity: 1.0.11
React Native: 0.83.0
Navigation: @react-navigation/native-stack as root, with @react-navigation/bottom-tabs as the default screen and a Unity screen pushed on top (covering the tabs)
Unity: 6000.3.8f1
Android OS: 12 (API 31)
Device: Samsung SM-G973U1