SafeAreaView is deprecated

[jerone]

Version 0.81 or React Native is deprecating SafeAreaView, and next versions might not include it anymore.
https://reactnative.dev/blog/2025/08/12/react-native-0.81#safeareaview-deprecation

Please replace it with react-native-safe-area-context.

[ertucaglar]

+1

[jerone]

@sodik82 As main contributor to this repo, can you have a look at this. It's blocking our upgrade to RN 0.81.

[GaelCO]

Hi,
For those interested, here is a patch-package to use react-native-safe-area-context
However, I don't really know what this is for, because as with the classic SafeAreaView, the menu may be outside the safe area.

react-native-popup-menu+0.18.0.patch

[macr1408]

@madox2 @nitzanbueno just pinging you guys since @sodik82 seems to be away from the project

[zonist]

+1

[sodik82]

hi guys,

if you want to help, you can test a bit new beta version https://www.npmjs.com/package/react-native-popup-menu/v/0.19.0-beta.0

What was changed: we have removed deprecated SafeAreaView - and instead we just replaced it with simple View (with small paddings on top and bottom so that menu does not render too close to edges).

For those who don't like defaults, they can

1. override them (probably you want to have platform specific styles, example is extreme to showcases effects)

      <MenuProvider style={{flex: 1}} customStyles={{ safeArea: { paddingBottom: 300 }}}> 

2. inject react-native-safe-area-context into MenuProvider (don't forget that react-native-safe-area-context needs its own SafeAreaProvider "higher" in component hierarchy like MenuProvider)

import { SafeAreaView } from 'react-native-safe-area-context';

      <MenuProvider style={{flex: 1}} SafeAreaComponent={SafeAreaView }>

Pls let us know the feedback. Thanks for patience ;-)