What does parentTheme do? + How to integrate it with RNAS?

[GGORG0]

Hi.
What does setting the parentTheme in https://github.com/zoontek/react-native-edge-to-edge?tab=readme-ov-file#expo change?
What effect does changing the parent theme even have, and why does it have to be provided?

And what do I need to do to integrate it with React Native Actions Sheet? Right now it just draws above the navigation bar, no matter what I do.

[zoontek]

Hi. It updates your app android theme parent, for one with edge-to-edge support.

if you had -> use
parent="Theme.AppCompat.DayNight.NoActionBar" (react native current default) -> "Default"
parent="Theme.AppCompat.Light.NoActionBar" (expo current default) -> "Light"
parent="Theme.MaterialComponents.DayNight.NoActionBar" -> "Material2"
parent="Theme.Material3.DayNight.NoActionBar" -> "Material3"
parent="Theme.MaterialComponents.Light.NoActionBar" -> "Material2.Light"
parent="Theme.Material3.Light.NoActionBar" -> "Material3.Light"

And what do I need to do to integrate it with React Native Actions Sheet? Right now it just draws above the navigation bar, no matter what I do.

By default, Android 15 enforces a transparent gesture navigation bar, or a semi-opaque light / dark buttons navigation bar (link).

[zoontek]

@GGORG0 I updated the documentation with a clear "Pick a parent theme" section, check v1.3.0 (you can also have a fully transparent nav bar now!)

[GGORG0]

Oh, I didn't notice your first response.

Thanks for adding the ability to make the navbar fully transparent! (I was actually trying to figure out how to do that too)

I actually didn't set any theme manually, as I'm using Expo with app.json and prebuild, but I figured that since my app is using Material 3 with react-native-paper, I should just set it to Material 3. It did break the contrast in the React Native (not Expo's) dev menu, but that's not that important as it's still readable and won't be seen by end users.

By how to integrate that with RNAS, I meant that the sheets appear above the navigation bar (gestures) and leaves a small gap (underneath the bar) where the content below can be seen (in my case Expo Router + react-native-paper 's navbar, which works perfectly with this library). In 3-button mode the sheets appear below the system navbar, iirc (I will confirm once I get home).

[zoontek]

@GGORG0 You can refers to the new "Pick a parent theme" section of the documentation.

It did break the contrast in the React Native (not Expo's) dev menu, but that's not that important as it's still readable and won't be seen by end users.

Because Expo does not correctly implement dark mode. I pinged them, they fixed it, it should be available soon. Until then, pick .Light variants of the themes (you still can implement a dark mode in your app, it's just that the system UI will stay light - like currently in Expo, but not in bare React native).

By how to integrate that with RNAS, I meant that the sheets appear above the navigation bar (gestures) and leaves a small gap (underneath the bar) where the content below can be seen (in my case Expo Router + react-native-paper 's navbar, which works perfectly with this library). In 3-button mode the sheets appear below the system navbar, iirc (I will confirm once I get home).

Pick the correct theme, set enforceNavigationBarContrast to false and you are good to go. No need to touch anything else.