Remove deprecated SafeAreaView

README.md

@@ -84,9 +84,18 @@ Contributions are welcome! Just open an issues with any idea or pull-request if
 ## React Native Compatibility
 We keep compatibility on best effort basis.
 
+First table describes what minimal version of RN (or React) is needed to use version of popup menu.
+
 | popup-menu version | min RN (React) version |
 | ------------------ | -------------- |
 | 0.13               | 0.55 (16.3.1)  |
 | 0.9                | 0.40           |
 | 0.8                | 0.38           |
 | 0.7                | 0.18           |
+
+Second is other way round - which minimal version of popup-menu is required to work well with RN (or React version)
+
+| RN (React) version | popup-menu version |
+| ------------------ | -------------- |
+| 0.81+ (SafeAreaView depecation, see [#301](https://github.com/instea/react-native-popup-menu/issues/301)) | 0.19   |
+| 0.78 (19.0)        | 0.18           |

doc/api.md

@@ -25,6 +25,7 @@ The only known exception is when you use [Modal](https://facebook.github.io/reac
 |`customStyles`|`Object`|Optional||Object defining wrapper, touchable and text styles|
 |`backHandler`|`boolean\|Function`|Optional|false|Whether to close the menu when the back button is pressed or custom back button handler if a function is passed (RN >= 0.44 is required)|
 |`skipInstanceCheck`|`boolean`|Optional|false|Normally your application should have only one menu provider (with exception as discussed above). If you really need more instances, set `skipInstanceCheck` to `true` to disable the check (and following warning message)|
+|`SafeAreaComponent`|`Component`|Optional|`View`|Component to use for safe area wrapper. Can be set to `SafeAreaView` from React Native to restore the old behavior or any 3rd component like `react-native-safe-area-context`|
 
 ### Custom styles
 
@@ -34,6 +35,7 @@ To style `<MenuProvider />` and backdrop component you can pass `customStyles` o
 |---|---|---|
 |`menuProviderWrapper`|`Style`|Style of wrapping `View` component (formerly `menuContextWrapper`)|
 |`backdrop`|`Style`|Backdrop `View` style|
+|`safeArea`|`Style`|Safe area wrapper style. When not provided, default padding of 30 is applied to top and bottom|
 
 **Note:** `Style` type is any valid RN style parameter.
 **Note:** In addition to these styles we add also `{flex:1}`. You can disable it by e.g. `style={{flex:0}}`.

examples/package.json

@@ -32,7 +32,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-popup-menu": "^0.18.0",
+    "react-native-popup-menu": "0.19.0-beta.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-screens": "~4.16.0",
     "react-native-web": "^0.21.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-popup-menu",
-  "version": "0.18.0",
+  "version": "0.19.0-beta.0",
   "description": "extensible popup/context menu for react native",
   "main": "build/rnpm.js",
   "directories": {

src/MenuProvider.js

@@ -1,6 +1,6 @@
 import React, { Component, createContext } from 'react';
 import PropTypes from 'prop-types';
-import { View, BackHandler, SafeAreaView, StyleSheet } from 'react-native';
+import { View, BackHandler, StyleSheet } from 'react-native';
 
 import { withContext } from './with-context';
 import makeMenuRegistry from './menuRegistry';
@@ -210,6 +210,8 @@ export default class MenuProvider extends Component {
 
   render() {
     const { style, customStyles = {} } = this.props;
+    const SafeAreaComponent = this.props.SafeAreaComponent || View;
+    const safeAreaStyles = this._computeSafeAreaStyles();
     debug('render menu', this.isMenuOpen(), this._ownLayout);
     return (
       <PopupMenuContext.Provider value={this.menuCtx}>
@@ -222,8 +224,8 @@ export default class MenuProvider extends Component {
           ]}>
             { this.props.children }
           </View>
-          <SafeAreaView
-            style={styles.safeArea}
+          <SafeAreaComponent
+            style={safeAreaStyles}
             pointerEvents="box-none"
           >
             <View
@@ -236,7 +238,7 @@ export default class MenuProvider extends Component {
               backdropStyles={customStyles.backdrop}
               ref={this._onPlaceholderRef}
               />
-          </SafeAreaView>
+          </SafeAreaComponent>
         </View>
       </PopupMenuContext.Provider>
     );
@@ -342,12 +344,28 @@ export default class MenuProvider extends Component {
     this._notify(true);
   }
 
+  _computeSafeAreaStyles() {
+    const { customStyles = {} } = this.props;
+    const { safeArea: customSafeAreaStyle } = customStyles;
+
+    if (customSafeAreaStyle) {
+      return [styles.safeArea, customSafeAreaStyle];
+    } else {
+      const defaultSafeAreaStyles = {
+        paddingTop: 30,
+        paddingBottom: 30,
+      };
+      return [styles.safeArea, defaultSafeAreaStyles];
+    }
+  }
+
 }
 
 MenuProvider.propTypes = {
   customStyles: PropTypes.object,
   backHandler: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   skipInstanceCheck: PropTypes.bool,
+  SafeAreaComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 }
 
 const styles = StyleSheet.create({

src/index.d.ts

@@ -17,9 +17,11 @@ declare module "react-native-popup-menu" {
     customStyles?: {
       menuProviderWrapper?: StyleProp<ViewStyle>;
       backdrop?: StyleProp<ViewStyle>;
+      safeArea?: StyleProp<ViewStyle>;
     };
     backHandler?: boolean | Function;
     skipInstanceCheck?: boolean;
+    SafeAreaComponent?: React.ComponentType<any>;
     children: React.ReactNode;
   }