rn-modal mode makes android navigation bar non-transparent in Expo 54

[dlee]

Describe the bug
In Expo 54 (with always enabled edge-to-edge), you can make android navigation bars transparent by setting enforceContrast to false. However, the modal implementation of react-native-popover-view for the rn-modal mode breaks the transparent navigation bars. I believe this is because it's using react-native's Modal under the hood.

Device/Setup Info:

• Device: Emulator
• OS: Android 16
• react-native version: 0.81.4
• react-native-popover-view version: 6.1.0

** Reproducer**
https://github.com/dlee/react-native-popover-view-reproducer

Recording
I'm attaching a recording of the reproducer comparing:

• expo-router's modal screen behavior
• react-native's Modal component behavior
• react-native-popover-view rn-modal behavior

Screen.Recording.2025-09-17.at.4.32.47.AM.mov

Debug Output
Pass the debug={true} prop into the Popover, and then paste the contents of the log here.

[2025-09-17T11:13:39.462Z] calculateRectFromRef - waiting for ref
[2025-09-17T11:13:39.463Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}
[2025-09-17T11:13:39.466Z] calculateRectFromRef - calculated Rect: {"x":134.85714721679688,"y":467.047607421875,"width":142.09524536132812,"height":41.90478515625}
[2025-09-17T11:13:39.480Z] setDefaultDisplayArea - newDisplayArea: {"x":0,"y":-0.000017438616168874432,"width":411.4285583496094,"height":914.2857055664062}
[2025-09-17T11:13:39.480Z] setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0}
[2025-09-17T11:13:39.485Z] calculateRectFromRef - waiting for ref
[2025-09-17T11:13:39.485Z] calculateRectFromRef - waiting for ref to move from: {"x":134.85714721679688,"y":467.047607421875,"width":142.09524536132812,"height":41.90478515625}
[2025-09-17T11:13:39.505Z] measureContent - new requestedContentSize: {"width":164.95237731933594,"height":114.28564453125} (used to be null)
[2025-09-17T11:13:39.511Z] handleChange - waiting 100ms to accumulate all changes
[2025-09-17T11:13:39.621Z] handleChange - requestedContentSize: {"width":164.95237731933594,"height":114.28564453125}
[2025-09-17T11:13:39.621Z] handleChange - displayArea: {"x":0,"y":-0.000017438616168874432,"width":411.4285583496094,"height":914.2857055664062}
[2025-09-17T11:13:39.621Z] handleChange - fromRect: {"x":134.85714721679688,"y":467.047607421875,"width":142.09524536132812,"height":41.90478515625}
[2025-09-17T11:13:39.621Z] handleChange - placement: "auto"
[2025-09-17T11:13:39.623Z] computeAutoGeometry - displayArea: {"x":0,"y":-0.000017438616168874432,"width":411.4285583496094,"height":914.2857055664062}
[2025-09-17T11:13:39.623Z] computeAutoGeometry - fromRect: {"x":134.85714721679688,"y":467.047607421875,"width":142.09524536132812,"height":41.90478515625}
[2025-09-17T11:13:39.623Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":118.85714721679688,"sizeRequested":164.95237731933594,"fits":false,"extraSpace":-46.09523010253906},"right":{"sizeAvailable":118.47616577148438,"sizeRequested":164.95237731933594,"fits":false,"extraSpace":-46.47621154785156},"top":{"sizeAvailable":451.04762486049117,"sizeRequested":114.28564453125,"fits":true,"extraSpace":336.76198032924117},"bottom":{"sizeAvailable":389.3332955496651,"sizeRequested":114.28564453125,"fits":true,"extraSpace":275.0476510184151}}
[2025-09-17T11:13:39.624Z] computeAutoGeometry - Found best postition for placement: "top"
[2025-09-17T11:13:39.624Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":123.42858123779297,"y":344.761962890625},"anchorPoint":{"x":205.90476989746094,"y":467.047607421875},"placement":"top","forcedContentSize":{"width":391.4285583496094,"height":449.04762486049117},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2025-09-17T11:13:39.624Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":123.42858123779297,"y":344.761962890625},"anchorPoint":{"x":205.90476989746094,"y":467.047607421875},"placement":"top","forcedContentSize":{"width":391.4285583496094,"height":449.04762486049117},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2025-09-17T11:13:39.627Z] handleChange - animating in
[2025-09-17T11:13:39.628Z] getTranslateOrigin - popoverSize: {"width":164.95237731933594,"height":122.28564453125}
[2025-09-17T11:13:39.629Z] getTranslateOrigin - anchorPoint: {"x":205.90476989746094,"y":467.047607421875}
[2025-09-17T11:13:39.632Z] animateIn - translateStart: {"x":123.42858123779297,"y":2234.4762137276784}
[2025-09-17T11:13:39.633Z] animateIn - translatePoint: {"x":123.42858123779297,"y":344.761962890625}
[2025-09-17T11:13:39.644Z] Setting up keyboard listeners
[2025-09-17T11:13:39.955Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":123.42858123779297,"y":344.7620849609375,"width":164.95236206054688,"height":114.28564453125}
[2025-09-17T11:13:39.955Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":198.09524536132812,"y":457.1429443359375,"width":17.904754638671875,"height":9.90478515625}
[2025-09-17T11:13:40.608Z] [BasePopover] componentDidUpdate - changedProps: ["isVisible"]
[2025-09-17T11:13:40.608Z] componentDidUpdate - isVisible changed, now false
[2025-09-17T11:13:40.610Z] animateOut - isMounted: true
[2025-09-17T11:13:40.610Z] getTranslateOrigin - popoverSize: {"width":164.95237731933594,"height":122.28564453125}
[2025-09-17T11:13:40.611Z] getTranslateOrigin - anchorPoint: {"x":205.90476989746094,"y":467.047607421875}
[2025-09-17T11:13:40.612Z] componentDidUpdate - Hiding popover
[2025-09-17T11:13:40.621Z] Tearing down keyboard listeners

[AdamGerthel]

I think you're right - that the issue lies with React Native modal. There are similar issues with using immersive mode.

You can use a JS popover instead (I.e the JS mode). In order to make it appear on the right position in the tree, you'll want to use something like https://github.com/gorhom/react-native-portal