Android Edge to edge support

[SickanK]

trafficstars

Yesterday, I created ticket #69 regarding a color change in the bottom navigation bar. Upon further investigation, I realized that the color change was due to the backdrop showing through the transparent color I had set for the navigation bar. A similar issue with edge-to-edge on android was previously reported in ticket #50, which has since been closed.

Description: When using react-native-unistyles, which automatically sets Android to edge-to-edge mode, the sheet floats above the navigation bar. I've also set the color of the navigation bar to transparent for the effect to be noticeable. In the provided reproduction, you can see the text showing through the navigation bar.

Reproduction: https://github.com/SickanK/react-native-true-sheet-edge

Images:

[lodev09]

Okay. thanks for investigating.. Looks like I just need the sheet to detect if edge to edge is enabled. I have yet to explore on that feature on Android..

I'm kind of occupied at the moment, but I'm open to PRs :)

[SickanK]

I gave it a try for an hour, but my skills aren't up to the task. Looks like I'll just have to wait for now! :)

[lodev09]

@SickanK no worries.. I can understand, android doesn't make things easy like IOS :D

[lodev09]

I tried looking for solution on this but couldn't find one that works. I honestly think this is an issue with Android bottom sheet itself lol.

I'll pin this and maybe someone that knows android can fix this for us 😅

[a-eid]

@lodev09 there is no way to detect edge-to-edge on android, however you could add it as an optional prop to the true sheet component.

checkout

react-native-controller RN unistyle 1 RN unistyle 2

[lodev09]

Yes that's what I thought, by using a prop boolean. My main issue is that I couldn't find a working code that moves the sheet at the bottom edge.

[hirbod]

@kirillzyusko can you maybe help out? I just toggled your navigationBarTranslucent and everything works fine, but breaks with this library. You have lot's of knowledge with Edge to Edge, maybe you can add support into this library.

[kirillzyusko]

@hirbod I had only a brief look at the code. It looks like for showing a sheet we show a dialog and then attach RootSheetView. But on top of my head a dialog doesn't know anything about the edge-to-edge mode (same problem with Modals in react-native and overall the android part looks very similar to Modal implementation on Android) and it will not be stretched to the full window by default.

A potential solution would be measuring rootView of main Activity and then force dialog to stretch to these sizes. In this case it should work in both variants - edge-to-edge and not edge-to-edge 🤷‍♂️

@lodev09 would you mind do some experiments with forcing the dialog to stretch to full window size and let us know the result? 👀 I'm keen to help, but don't have too much free time at the moment (unfortunately). We can also sync up on discord if you want 😊

[lodev09]

Hey @kirillzyusko. Thanks for looking!

The library doesn't really need to automatically determine if edge-to-edge is enabled -- we can put this burden to the user and add a prop for the TrueSheet to know if edge-to-edge is enabled 😅

However, I'm missing something to make the actual BottomSheetDialog to popup at the edge of the screen. Assuming that edge-to-edge is enabled.

I did a second googling and it looks like I might just be missing the style requirement for the navigationBarColor. Doc says it needs to be transparent. I'll take a look more this week and try it out.

[zoontek]

@lodev09 You can't detect if edge-to-edge is enable, but you can detect if react-native-edge-to-edge is installed (using a super small package, react-native-is-edge-to-edge).

If you pass the isEdgeToEdge() value to your module, and apply this to your dialog Window, it should be good (the code is actually what's needed to enable edge-to-edge on Modal, which also uses Dialog)

I probably can open a PR if you want 🙂

[lodev09]

I probably can open a PR if you want 🙂

@zoontek that would be awesome!

[zoontek]

@lodev09 PR opened: https://github.com/lodev09/react-native-true-sheet/pull/103, I didn't expose a prop in JS, it just detects if the package is installed and acts automatically.

[lodev09]

Thanks @zoontek! I'll do the docs at a separate PR before release. Closing 💪