feat: add presentMenu and closeMenu calls for overflowMenuPressHandler (#220)

* chore: update deps

* docs: update manually closing menu

* feat: add `presentMenu` and `closeMenu` calls for overflowMenuPressHandlerDropdownMenu

* chore: update node in CI

Author: vonovak

.github/actions/setup/action.yml

@@ -5,9 +5,9 @@ runs:
   using: composite
   steps:
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version-file: .nvmrc
+        node-version: 'lts/*'
 
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -39,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup

.nvmrc

@@ -258,6 +258,14 @@ You can fully customize what it renders inside of the `PlatformPressable` using
 
 ## Recipes
 
+#### Closing the overflow menu from `overflowMenuPressHandlerDropdownMenu` manually
+
+`overflowMenuPressHandlerDropdownMenu` supports rendering custom items in the menu. In your item's onPress handler, you can call `closeMenu` to close the menu manually.
+
+```ts
+const { closeMenu } = useOverflowMenu();
+```
+
 #### Customizing the overflow menu
 
 The default handler for overflow menu on iOS is `overflowMenuPressHandlerActionSheet`.

README.md

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

example/index.js

@@ -15,20 +15,20 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
-    "expo": "~49.0.13",
-    "expo-splash-screen": "~0.20.5",
-    "expo-status-bar": "~1.6.0",
+    "expo": "~50.0.6",
+    "expo-splash-screen": "~0.26.4",
+    "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.5",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^19.0.0",
+    "@expo/webpack-config": "~19.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.1.0"
   },

example/package.json

@@ -33,7 +33,7 @@ export function HomeScreen({ navigation }: ScreenProps<'HomeScreen'>) {
   const { toggleTheme } = React.useContext(ThemeContext);
 
   return (
-    <ScrollView>
+    <ScrollView contentContainerStyle={{ rowGap: 10 }}>
       <Text style={{ margin: 15 }}>Explore possible usages with:</Text>
       <Button
         onPress={() => _navigateTo('UsageWithIcons')}
@@ -47,6 +47,10 @@ export function HomeScreen({ navigation }: ScreenProps<'HomeScreen'>) {
         onPress={() => _navigateTo('UsageWithCustomOverflow')}
         title="Custom overflow menu action"
       />
+      <Button
+        onPress={() => _navigateTo('UsageNativeMenu')}
+        title="Native menu overflow"
+      />
       <Button
         onPress={() => _navigateTo('UsageWithOverflowComplex')}
         title="Overflow menu - all handlers"
@@ -67,10 +71,7 @@ export function HomeScreen({ navigation }: ScreenProps<'HomeScreen'>) {
         onPress={() => _navigateTo('UsageCustom')}
         title="Custom elements"
       />
-      <Button
-        onPress={() => _navigateTo('UsageNativeMenu')}
-        title="Native menu overflow"
-      />
+
       <Button
         onPress={toggleTheme}
         title="Toggle Theme (ripple, text and icon color changes)"

example/src/screens/HomeScreen.tsx

@@ -10,6 +10,7 @@ import {
   overflowMenuPressHandlerDropdownMenu,
   HiddenItemProps,
   OnOverflowMenuPressParams,
+  useOverflowMenu,
 } from 'react-navigation-header-buttons';
 import type { ScreenProps } from '../NavTypes';
 import { Button } from '../components/PaddedButton';
@@ -30,10 +31,22 @@ const handlers = {
   overflowMenuPressHandlerActionSheet,
   overflowMenuPressHandlerPopupMenu,
   custom: function custom(obj: OnOverflowMenuPressParams) {
-    alert('you custom function will receive:' + Object.keys(obj));
+    alert('you custom function will receive:' + Object.keys(obj).join(', '));
   },
 };
 
+const CustomViewInOverflow = () => {
+  const { closeMenu } = useOverflowMenu();
+  return (
+    <View style={{ backgroundColor: 'orange', maxWidth: 200 }}>
+      <Text onPress={closeMenu}>
+        custom view that will only be considered for
+        overflowMenuPressHandlerDropdownMenu
+      </Text>
+    </View>
+  );
+};
+
 export function UsageWithOverflowComplex({
   navigation,
 }: ScreenProps<'UsageWithOverflowComplex'>) {
@@ -64,12 +77,7 @@ export function UsageWithOverflowComplex({
               onPress={() => alert('hidden4')}
             />,
           ]}
-          <View style={{ backgroundColor: 'orange', maxWidth: 200 }}>
-            <Text>
-              custom view that will only be considered for
-              overflowMenuPressHandlerDropdownMenu
-            </Text>
-          </View>
+          <CustomViewInOverflow />
         </OverflowMenu>
       ),
     });