[Web] Nested <SafeAreaProvider> doesn’t update frame values

[Freddy03h]

Description

On the web, useSafeAreaFrame always returns the frame of the root <SafeAreaProvider>.
Nesting <SafeAreaProvider> components doesn’t seem to work.

Web : issue

Native (iOS) : expected behavior

Steps to reproduce

• Create a nested <SafeAreaProvider> that is smaller than the root one.
• Use useSafeAreaFrame to retrieve the values, but on the web it doesn’t return the frame of the nearest provider like it does on native.

(the snack example is on 5.6.0 but the issue is also on 5.7.0)

Snack or a link to a repository

https://snack.expo.dev/@freddy03h/safe-area-frame-issue

Safe Area Context version

5.7.0

React Native version

0.84.1

Platforms

Web

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes