Option to adjust the space above OverflowMenus (#110)

* Made spaceAboveMenu customizable

* Moved spaceAboveMenu to OverflowMenuContext to allow for multiple different space settings

* Added spaceAboveMenu as props to OverflowMenuProvider

* Removed space before semicolon

* Resolved errors from checks

* Resolved prettier errors

* Added spaceAboveMenu-info to README.md

Author: dvbeelen

README.md

@@ -203,6 +203,8 @@ const HiddenItemWrappedTwice = ()=> <HiddenItemWrapped />
 This is a React context provider needed for `overflowMenuPressHandlerDropdownMenu` to work. If you're not using `overflowMenuPressHandlerDropdownMenu` then you don't need it.
 By default, you need to wrap your root component with it.
 
+On Android, `OverflowMenuProvider` accepts an optional `spaceAboveMenu` prop, which can be used to set the distance between the top of the screen and the top of the overflow menu.
+
 #### `HeaderButton`
 
 You will typically not use `HeaderButton` directly. `HeaderButton` is where all the `onPress`, `title` and Icon-related props meet to render actual button.

index.d.ts

@@ -95,6 +95,7 @@ declare class Divider extends Component<{
 
 declare class OverflowMenuProvider extends Component<{
   children: ReactChild;
+  spaceAboveMenu?: number;
 }> {}
 
 export interface OnOverflowMenuPressParams {

src/overflowMenu/OverflowMenuContext.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
 import { Dimensions, Platform } from 'react-native';
+import { getDefaultSpaceAboveMenu } from './statusBarUtils';
 import { Menu } from './vendor/Menu';
-import { getSpaceAboveMenu } from './statusBarUtils';
 
 export type ToggleMenuParam = ?{|
   elements: React.ChildrenArray<any>,
@@ -24,9 +24,10 @@ export const OverflowMenuContext = React.createContext<(ToggleMenuParam) => void
 
 type Props = {|
   children: React.Element<any>,
+  spaceAboveMenu?: number,
 |};
 
-export const OverflowMenuProvider = ({ children }: Props) => {
+export const OverflowMenuProvider = ({ children, spaceAboveMenu }: Props) => {
   const [visible, setVisible] = React.useState(false);
   const [position, setPosition] = React.useState({ x: Dimensions.get('window').width - 10, y: 40 });
   const [elements, setElements] = React.useState(null);
@@ -35,19 +36,22 @@ export const OverflowMenuProvider = ({ children }: Props) => {
     setVisible(false);
   }, []);
 
-  const toggleMenu = React.useCallback((params: ToggleMenuParam) => {
-    setVisible((prevVisible) => !prevVisible);
-    setElements(params?.elements || []);
-    if (params) {
-      const { x, y } = params;
-      const heightApprox = getSpaceAboveMenu();
-      const extraDelta = Platform.select({
-        android: heightApprox,
-        default: OVERFLOW_TOP,
-      });
-      setPosition({ x, y: y + extraDelta });
-    }
-  }, []);
+  const toggleMenu = React.useCallback(
+    (params: ToggleMenuParam) => {
+      setVisible((prevVisible) => !prevVisible);
+      setElements(params?.elements || []);
+      if (params) {
+        const { x, y } = params;
+        const heightApprox = spaceAboveMenu ?? getDefaultSpaceAboveMenu();
+        const extraDelta = Platform.select({
+          android: heightApprox,
+          default: OVERFLOW_TOP,
+        });
+        setPosition({ x, y: y + extraDelta });
+      }
+    },
+    [spaceAboveMenu]
+  );
 
   return (
     <OverflowMenuContext.Provider value={toggleMenu}>

src/overflowMenu/statusBarUtils.expo.js

@@ -1,6 +1,6 @@
 import { StatusBar } from 'react-native';
 
-export const getSpaceAboveMenu = () => {
+export const getDefaultSpaceAboveMenu = () => {
   // approximation, expo draws views right from below the display edge
   // which is a different behavior from vanilla RN
   return StatusBar.currentHeight + 3;

src/overflowMenu/statusBarUtils.js

@@ -1,3 +1,3 @@
-export const getSpaceAboveMenu = () => {
+export const getDefaultSpaceAboveMenu = () => {
   return 0;
 };