Safe Area Support

[mel-adry-olivo]

I understand that Lynx is still a new framework and I'm excited to see it grow. One feature I found missing was a built-in safe area view component. In React Native, this is handled by SafeAreaView.

Is there a workaround on how to implement a safe area view in Lynx? Perhaps there's a way to use CSS or JavaScript to achieve similar functionality until a native component is available?

[urkiddennn]

That would be great just like in Flutter

[MoonfaceX]

Hey! Thanks for bringing this up. Safe area compatibility is definitely a core part of mobile development. In Lynx's previous practices, we're handling this through a dynamic approach where native containers inject status_bar_height and bottom_area_height via __globalProps like CSS does: https://developer.mozilla.org/en-US/docs/Web/CSS/env. This gives developers more control than traditional <SafeAreaView> wrappers.

That said, we totally get the convenience factor of a dedicated element (great suggestion!). We will seriously consider providing a built-in element like <SafeAreaView> does.

Really appreciate the feedback, stay tuned!

[tonyfromundefined]

You can use env(safe-area-inset-*).

[Not0si]

can you please provide an example