OnDeviceUI causes stories to inherit SafeAreaView and KeyboardAvoidingView

[lidio601]

When testing simple UI components it's all good.

The problem comes when you're testing a full-screen story like this one:

as you can see by specifying {onDeviceUI: true} the vertical space is reduced because of the SafeAreaView inherited by the OnDeviceUI component.

Furthermore, our Screen component is already considering the SafeAreaView insets and providing its own KeyboardAvoidingView instance so this double KeyboardAvoidingView could create also functionality issues.

If I specify {onDeviceUI: false} the problem is solved:

Having the OnDeviceUI helps non-developers to review components even testing on an actual app release.

I think the solution would be to have the OnDeviceUI to be an actual overlay on top of the StoryView instead of wrapping all the stories

What do you think?

[dannyhw]

I think the solution would be to have the OnDeviceUI to be an actual overlay on top of the StoryView

I like this idea but I'm not sure how that would effect the UI, would need some testing. I'll try to experiment with this at some point.

In the meantime if you think you can make it work then please feel free to open a PR it would be apreciated :)

[dannyhw]

Safe area can now be toggled by parameter

[arnold-drita-abm]

@dannyhw I am having the same issue, and I've tried passing parameters: {noSafeArea: true} to my Stories, but it doesn't do anything. Is this parameter still supported or has the approach changed? There's no guidance on the docs and I was just looking at these examples.

[dannyhw]

The parameter i think is still there but currently the ui isnt hideable without completely disabling the ondevice ui. I have an open pr for this but haven't finished it yet.

[arnold-drita-abm]

@dannyhw Thanks for the quick reply! I'm assuming it's this PR: #632
This feature looks pretty cool! Not trying to be an a-hole, but, any ETAs on when this could be finished? Or otherwise, is there currently a workaround to getting rid of the safe area view, while still having the onDeviceUI? I was thinking of adding a decorator that just adds negative margins, equal to the safe area insets, as an ugly workaround, but reaching out to see if there's any better alternatives?

Thanks!

[dannyhw]

Not sure about what workaround would work best, i could probably work on getting the pr ready for an alpha and have something you can preview relatively quickly depending on when i get the free time. I can't really promise an exact timeline due to having other obligations but I can try to get it done soon.

[arnold-drita-abm]

@dannyhw Got it. Thanks!

[dannyhw]

@arnold-drita-abm gave it a try, think its working ok

try this version 8.4.5-alpha.0, the parameter noSafeArea: true should give you what you need

[arnold-drita-abm]

@dannyhw Works like a charm! Thank you so much!