<TopInsets/> and <BottomInsets/> components

[iway1]

In all of my applications, I have helper components that look like this for applying safe area insets:

function BottomInsets() {
    return (
        <SafeAreaView edges={['bottom']} />
    )
}

I find that this is easier than wrapping things up in a safe area view, and is more readable as well because we can visibly see the insets in the markup.

Unfortunately, I think this approach can cause some of the same flickering issues that useSafeAreaInsets can cause with UI flickering, as the safe areas don't get set to the edges prop until afters some communication over the JS bridge (in the old architecture, at least? I think?).

It would be really nice to have these utility components included in the this package, and have them apply the insets natively. Anyone else think this might be nice to have?

[AdamGerthel]

Agree - I've contemplated adding similar components. I rarely have need for all insets on a single view.

[jacobp100]

I think it's best we focus on the core functionality rather than give abstractions users might want

Unfortunately, I think this approach can cause some of the same flickering issues that useSafeAreaInsets can cause with UI flickering, as the safe areas don't get set to the edges prop until afters some communication over the JS bridge (in the old architecture, at least? I think?).

Your example works perfectly fine. There are some documented issues around the hooks - https://github.com/th3rdwave/react-native-safe-area-context#consumers

[jacobp100]

Closing because I think it's unlikely we'd do this